Jan002
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Jan 002</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
/*==
Jan002 a.k.a. 32 Not Out
by Payal Dhar (http://writeside.net)
24 January 2008
Feel free to use, but please retain credit.
*/
*{
margin:0;
padding:0;
}
body{
background:url(Jan002-images/body.jpg) center repeat-y;
color:#707070;
font:0.9em 'Trebuchet MS', Arial, sans-serif;
}
#wrapper{
width:770px;
margin:10px auto;
}
#title{
height:50px;
background:#fff;
font-size:2.2em;
color:#3a4a3f;
text-align:right;
}
#title .menu{
float:left;
font-size:0.4em;
}
#title .menu ul li{
float:left;
list-style:none;
padding:7px 5px;
}
#title .menu a{
background:none;
color:#cfc9bd;
padding:0 3px;
text-decoration:none;
}
#title .menu a:hover, a:active{
color:#3a4a3f;
background:#cfc9bd;
text-decoration:none;
}
#header{
clear:both;
height:232px;
width:515px;
float:left;
}
.nav1 ul{
float:left;
list-style:none;
width:250px;
}
.nav1 ul li{
margin:5px 0;
padding-left:20px;
text-align:right;
}
.nav1 a{
color:#cfc9bd;
border-bottom:1px solid #cfc9bd;
display:block;
width:94%;
height:22px;
padding:5px;
text-decoration:none;
background:url(Jan002-images/menu.jpg) left no-repeat;
}
.nav1 a:active, a:hover{
color:#3a4a3f;
background:url(Jan002-images/menu-roll.jpg) left no-repeat;
}
#content{
clear:both;
border:1px solid #3a4a3f;
margin:5px;
padding:10px;
}
h1, h2, h3{
color:#3a4a3f;
}
h1{
font-size:1.2em;
font-variant:small-caps;
padding:0 0 5px;
}
h2{
font-size:1em;
padding:5px;
}
h3{
font-size:0.9em;
padding:5px;
}
p{
padding:5px;
line-height:1.3em;
}
p.ref{
text-align:right;
font-size:0.8em;
}
#content a{
background:none;
color:#cfc9bd;
padding:0 3px;
text-decoration:none;
}
#content a:hover, a:active{
color:#3a4a3f;
background:#cfc9bd;
text-decoration:none;
}
blockquote{
padding:7px 15px 0 25px;
margin:7px 15px;
background:#f0f0f0 url(Jan002-images/blockquote.jpg) bottom left no-repeat;
}
#content ul, ol{
padding:5px 10px 5px 40px;
}
#content ul{
list-style:circle;
}
#content ol{
list-style:lower-roman;
}
input, textarea{
border:1px solid #f0f0f0;
color:#707070;
padding:3px;
}
input:hover, input:focus, textarea:hover, textarea:focus{
border:1px solid #707070;
}
#footer{
margin:5px 5px 0;
text-align:center;
font-size:0.8em;
}
#footer a{
color:#3a4a3f;
text-decoration:underline;
background:none;
}
#footer a:hover, a:active{
color:#707070;
text-decoration:none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="title">
<div class="menu">
<ul>
<li><a href="#" title="#">Home</a></li>
<li><a href="#" title="#">Login</a></li>
<li><a href="#" title="#">Contact us</a></li>
<li><a href="#" title="#">Sitemap</a></li>
</ul>
</div>
Jan 002 <small>{<em><small>also known as</small></em> 32 not out}</small>
</div>
<div id="header">
<img src="Jan002-images/banner2.jpg" alt="Jan 02 banner" />
</div>
<div class="nav1">
<ul>
<li><a href="#" title="#">There are more things</a></li>
<li><a href="#" title="#">In heaven and earth</a></li>
<li><a href="#" title="#">Than are dreamt of</a></li>
<li><a href="#" title="#">In your philosophy</a></li>
<li><a href="#" title="#">To be or not to be</a></li>
<li><a href="#" title="#">That is the question</a></li>
</ul>
</div>
<div id="content">
<h1>Why "32 not out"?</h1>
<p>Well, I have a little tradition of my own, where I make a special template every year on my birthday. Not that there's anything special about this — and I must admit to it being a little childish — apart from being released on my birthday...</p>
<p>Anyhow, thank you for downloading this template. You are free to use it as you wish. All I ask is for a link back to me (you don't <em>have</em> to, but it will make me feel warm and fuzzy inside if you do). Do drop me a mail if you like this or use it, or have any suggestions about improving it.</p>
<p class="ref">(24 January 2008)</p>
<h2>This is an h2 heading</h2>
<h3>And this an h3</h3>
<p>And now for some styles. <a href="#" title="#">This is a link.</a> The following is a blockquote:</p>
<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam posuere risus eget eros gravida egestas. Sed vulputate interdum nisl. Fusce nibh ligula, ultricies a, ultricies sit amet, bibendum vitae, orci. Vestibulum vulputate. Pellentesque vel turpis et justo tristique porta. Aliquam convallis. Aenean sit amet justo eget leo tincidunt interdum. Aliquam bibendum, mi et faucibus scelerisque, lorem augue porta arcu, sed imperdiet justo leo eget arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi purus erat, dignissim eu, laoreet cursus, semper a, libero.</blockquote>
<p>Some lists:</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Maecenas placerat tellus vitae eros.</li>
<li>Fusce ut pede ac pede consectetuer gravida.</li>
<li>Duis fringilla est quis lacus.</li>
</ul>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Maecenas placerat tellus vitae eros.</li>
<li>Fusce ut pede ac pede consectetuer gravida.</li>
<li>Duis fringilla est quis lacus.</li>
</ol>
<p>And to round things off, a form:</p>
<form method="post" action="#">
<p>Name:<br />
<input id="name" name="name" /></p>
<p>E-mail ID:<br />
<input id="email_address" name="email_address" /></p>
<p>Comments:<br />
<textarea id="comments" name="comments" rows="5" cols="85"></textarea></p>
<p><input type="submit" value="Submit" alt="Click here to submit" /> <input type="reset" value="Clear" alt="Click here to start over" /></p>
</form>
</div>
<div id="footer">
<p>© You :: Design by <a href="http://writeside.net/" title="Payal Dhar">Payal Dhar {Janpd24}</a> :: <a href="http://validator.w3.org/check?uri=referer" title="Valid XHTML">Valid XHTML</a> :: <a href="http://free-templates.ru" title="Free-Templates.Ru">Free-Templates.ru</a> :: <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS">Valid CSS</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category