simply_plain_v2 : Simple « Templates « HTML / CSS






simply_plain_v2

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simply Plain</title>
<style type='text/css'>
/* CSS Document */

body { text-align:center; font-family:verdana; }
#pagewrapper,#page { width:960px; margin:auto; text-align:left; display:block; }
#header
{
 display:block; height:100px;
 padding:0px;
 clear:both;
 margin:5px 5px 0 5px;
}
#header h1 { margin:0; padding:0; font:30px Georgia, serif; margin-top:20px; margin-left:40px; }
#header h2 { margin:0; padding:0; font:14px Georgia, serif;  margin-left:40px; }

#topnav
{
 color:#FFFFFF;
 margin:0px 5px 5px 5px;
 font:13px verdana;
 padding:5px;
 background:url(topnav_bg.gif) #333333;
}

#topnav ul { list-style-type:none; margin:0; padding:0px; }
#topnav ul li { display:inline; margin-right:6px; margin-left:6px; }


#main
{
 margin:5px;
 border:0px solid #CCCCCC;
 clear:both;
 display:block;
 margin-bottom:40px;
}

#right { width:20%; float:right; margin:10px; margin-right:0; }
#right2 { width:20%; float:right; margin:10px; }

#body { width:51%; float:left; margin-bottom:20px; margin:10px; margin-right:0;padding-left:16px; }

#footer { clear:both; margin:5px; vertical-align:middle; text-align:center; font-size:12px; display:block; }
.bcol { color:#fb9622; }


/****************************************************************/

#main h2 { color:#7D3F00;margin:20px 0 6px;padding-bottom:10px;font:normal 17px Georgia, serif;border-bottom : 1px solid #e2dfdb; }

#main { font:12px verdana; line-height:15px; }
p { padding:0; margin-left:10px; margin-right:5px; margin-top:0px; margin-bottom:8px; }
/******************************************************************/
#page { border:1px solid #333333; color:#333333; background:#fff; }

#footer { background:#333333; color:#FFFFFF; padding:5px 0px 10px 0px; }
#header{ border-top:3px solid #666666; border-bottom:0px solid #666666; }

a { color:#DF7000; }
a:hover { color:#666666 }
#topnav a , #footer a{ color:#FF9933; text-decoration:none; font-weight:500;  }
#topnav a:hover, #footer a:hover {  text-decoration:underline; }

body {font : normal 12px/1.6em Arial, Helvetica, sans-serif;color : #2a3845;margin : 0;padding : 0;background:#f7f7f7}

.nav ul { margin-left:4px; list-style:inside; margin-top:10px; padding:0; }
.nav li { margin-bottom:2px; }
.nobullet li, .nobullet ul{ margin-top:6px; list-style:none; list-style-position:outside; list-style-type:none; padding:0; border:0px solid red; }

blockquote { border-left:5px solid #df7000; margin-left:10px; padding:6px; padding-left:10px; background:#fef6ee; }
code { background:#fffcf8; display:block; border:1px solid #df7000; margin:14px; padding:7px; }


</style>


</head>
<body>
<div id="pagewrapper">
<div id="page">
  <div id="header">
     <h1><span class="bcol">Simply</span>Plain 2.0</h1>
     <h2>My Place Online</h2>
  </div>
  <div id="topnav">
     <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
     </ul>
  </div>
  <div id="main">


  <div id="body">
       <h2>The Template</h2>
       <p>SimplyPlain 2.0 is the 3 column version of my <a href="http://kalyanchakravarthy.net/?cat=5">SimplyPlain v1.0 template</a>. <br />
         This design contains only 6 main divisions - page, header, topnav, main, body, right, right2; The page is the main container of the page which is responsible for the page to be center. Also it holds the attribute for the width of the page.</p>
       <p>This template is also Search Engine Optimised with content first and navigaion next...feel free to view the source code. </p>
       <p>This template is tested in <a href="#">IE 6.x</a>, <a href="#">IE 7</a>, <a href="#">Opera 9.x</a>, <a href="#">Firefox 2.x</a>, <a href="#">Firefox 3.x</a> , <a href="#">Netscape 8</a>, <a href="#">Safari</a> (Windows). This template looks exactly the same in all browsers, and i am pretty much proud of it </p>
       <p>You can view the <a href="index.html">Alternate Layout</a> [navigation-left, content-right] </p>
       <h2>WordPress Theme is also available </h2>
       <p>If you use wordpress, then <a href="http://KalyanChakravarthy.net/?cat=18">wordpress theme of this template</a> is also available. You can download it and more templates at my website </p>
       <p>For more templates, WordPress themes, NanoCMS themes, and my other stuff visit <a href="http://www.kalyanchakravarthy.net">KalyanChakravarthy.net</a></p>
       <h2>I Love Simplicity </h2>
       <p>The reason mainly develop web templates is because i love Art and desiging involves art.</p>
       <p>I belive that simplicity is tha way of life. I like things to be simple yet elegent and beautiful. Beauty lies in simplicity.</p>
       <blockquote><p>This template is designed keeping simplicity in mind. Simply Plain as the name suggests it is very plain, simple and yet elegant. This template is the second one in my Simply series of templates the first one being SimplyGreen.</p></blockquote>
       <p>For more templates and my other stuff visit <a href="http://www.kalyanchakravarthy.net">KalyanChakravarthy.net</a> </p>
       <h2>The Rights</h2>
        <p>This template is Open Source. Which means that you can use this template in any way you want to use, do whatever you want at your wills and fancies. I would appreciate you if the &quot;design by Kalyan&quot; tag linked to <a href="http://www.kalyanchakravarthy.net">KalyanChakravarthy.net</a> is left alone and thats your wish.      </p>
        <p>One sincere request, please dont claim the design to be yours, respect the hardwork put in.</p>
        <h2>Feed Back</h2>
        <p>
        And i would to love to have feedback from you ppl. you can mail me your suggestions...etc etc to <a href="mailto:nvsnkalyan@gmail.com">nvsnkalyan@gmail.com.</a>.
        </p>


  </div>
  <div id="right2">
      <h2>Hello</h2>
      <p>Hi every one. I am <b>Kalyan Chakravarthy</b> a 18yr old designer living in India. </p>
      <p>I am a student and i do  part time freelancing as a developer and designer.  </p>
      <p>This <a href="#">Simply Plain v2</a> template is/was made completely by me.</p>
      <p></p>

      <h2>My Projects </h2>
      <div class="nav">
       <ul>
      <li><a href="http://www.kalyanchakravarthy.net">KalyanChakravartny.net</a></li>
      <li><a href="http://www.anytimesudoku.com">AnytimeSudoku.com</a></li>
      <li><a href="http://nanocms.kalyanchakravarthy.net">NanoCMS - the tinyest cms </a></li>
       </ul>
      </div>

      <h2>Navigation</h2>
      <div class="nav">
       <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="http://www.google.com">Google</a></li>
      <li><a href="http://www.openwebdesign.org/">OpenWebDesign.Org</a></li>
       </ul>
      </div>

      <h2>Validation</h2>
      <p>
       Valid <a href="http://validator.w3.org/check?uri=referer">XHTML Strict</a> | <a href="">CSS</a>
      </p>
  </div>
  <!-- END OF RIGHT BAR1 -->
  
  
  <div id="right">
    <h2>Recent posts</h2>
    <div class="nav nobullet">
    <ul>
      <li><a href="#">How to increase blog traffic</a></li>
      <li><a href="#">My entry in TheDesignAgency</a></li>
      <li><a href="#">How to monetize your blog quickly</a></li>
      <li><a href="#">Coding style, proper formatting and naming</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Web Templates</a></li>
      <li><a href="#">Linux, which and why?</a></li>
      <li><a href="#">Configuring grub for default OS</a></li>
    </ul>
    </div>
    
    <h2>Subscribe</h2>
    <div id="sub_div">
    <form action="#">
      <p><input type="text" value="Email id" id="sub_emailid" name="sub_emailid" /></p>
      <p><input type="submit" value="Go" id="sub_submit" name="sub_submit" /></p>
    </form>
    </div>
    <p>Subscribing will enable you to get regular notifications about new postings, and blah blah blah... </p>
  </div><!-- END OF RIGHT BAR1 -->

  </div><!-- END OF MAIN DIV TAG -->

 <div id="footer">Designed by <a href="http://www.kalyanchakravarthy.net">Kalyan Chakravarthy</a></div>
<div style="display:none;"><a href="http://free-templates.ru">free-templates.ru</a></div>
</div>
</div>

</body>
</html>

   
    
  








Related examples in the same category

1.simple-blue
2.simple-brown
3.simple-elegance
4.simple-jojo
5.simple-personal
6.simple-solution
7.simple-type
8.simple 1
9.simple3column
10.simpleandsleak
11.simpleblog1-0
12.simplecorp
13.simplecurve
14.simpleelegance03
15.simpleevent
16.SimpleMin
17.simplepagedesign
18.simplepassage
19.simplepicture
20.simples
21.simplescheme-magazine
22.simpletex
23.simpleton
24.simpletwocolumn
25.simplex
26.simplified