sunset2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Sunset</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*Sunset by Payal Dhar (http://writeside.net/), 2006
Feel free to use or modify, but please retain credits.*/
*{
padding:0;
margin:0;
outline:0;
}
body{
background:#000 url(sunset2-img/sunset.jpg) top left no-repeat;
font:0.8em 'Trebuchet MS', Arial, sans-serif;
line-height:1.5em;
color:#898989;
}
a{
color:#B07A34;
text-decoration:none;
}
a:hover, a:active{
color:#898989;
text-decoration:underline;
}
#header{
float:left;
width:240px;
margin:15px;
background:url(sunset2-img/header.gif) top left no-repeat;
}
#header .main{
font-size:1.5em;
border-bottom:1px solid #B07A34;
padding:10px 10px 10px 2px;
}
#header .subtitle{
font-size:1em;
font-variant:small-caps;
padding:2px;
}
#wrapper{
margin:15px auto 0 300px;
width:460px;
background:#FFFED5;
}
#toplinks{
margin:5px auto 0 300px;
}
#toplinks ul li{
list-style:none;
display:inline;
padding:2px 12px 2px 2px;
}
#toplinks ul li a:hover, a:active{
background:url(sunset2-img/links-hover.gif) left no-repeat;
}
#toplinks form{
display:inline;
}
input{
border:1px solid #B07A34;
padding:2px;
color:#B07A34;
}
input:hover{
border: 1px solid #898989;
}
#text{
min-height:460px;
padding:10px;
}
#text p{
padding:5px;
}
h1, h2, h3{
padding:5px;
color:#B07A34;
}
h1{
font-size:1.2em;
font-variant:small-caps;
border-bottom:1px solid #B07A34;
text-align:center;
}
h2{
font-size:1.05em;
}
h3{
font-size:1em;
}
#text ul, ol{
padding-left:12px;
margin-left:12px;
}
blockquote{
margin:2px 15px;
border-left:3px double #B07A34;
padding-left:5px;
}
.meta{
text-align:right;
color:#B07A34;
font-size:0.79em;
}
.meta a{
text-decoration:underline;
}
#footer{
font-size:0.79em;
text-align:center;
margin:10px;
height:25px;
line-height:25px;
border-top:1px solid #B07A34;
}
#footer a{
text-decoration:underline;
}
</style>
</head>
<body>
<div id="header">
<!--Header start -->
<div class="main">Title...</div>
<div class="subtitle">Your Subtitle Comes Here</div>
</div>
<!--Header end -->
<div id="toplinks">
<!--Links div -->
<ul>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Categories</a></li>
<li><a href="http://www.free-css.com/">Archives</a></li>
<li>
<form method="post" action="#">
<input type="text" id="search" />
<input type="submit" id="submit" value="Search" />
</form>
</li>
</ul>
</div>
<!-- Links div ends -->
<div id="wrapper">
<!--Start of Wrapper div -->
<div id="text">
<!--Start of Text div -->
<h1> <a href="http://www.free-css.com/">About the template</a></h1>
<div class="meta">Posted by <a href="http://www.free-css.com/">Jan</a>, 23 Dec. 2006</div>
<p>Sunset is a simple one-column blog template. This is released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>.</p>
<p>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.</p>
<h1> <a href="http://www.free-css.com/">An H1 heading</a></h1>
<div class="meta">Posted by <a href="http://www.free-css.com/">Jan</a>, 13 Nov. 2006</div>
<p>Quisque quam risus, varius ut, consectetuer id, posuere sit amet, lacus. Quisque porttitor. Fusce nonummy gravida nibh. Nullam in massa. In a nisl. In dolor. Suspendisse molestie porttitor ligula. Praesent in sapien non neque eleifend facilisis. Donec at erat et nunc sagittis mattis. Integer nunc lectus, tempor in, egestas semper, lobortis vitae, metus.</p>
<h2>An H2 heading (with an unordered list):</h2>
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
<h3>An H3 heading (with an ordered list):</h3>
<ol>
<li>Item one</li>
<li>Item three</li>
</ol>
<p>Here's a blockquote</p>
<blockquote>Quisque quam risus, varius ut, consectetuer id, posuere sit amet, lacus. Quisque porttitor. Fusce nonummy gravida nibh. Nullam in massa. In a nisl. In dolor. </blockquote>
</div>
<!--End of Text div -->
<div id="footer">
<!-- Footer start -->
© Name | Design by <a href="http://writeside.net">Payal Dhar</a> | <a href="http://validator.w3.org/check?uri=referer" title="Valid XHTML">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS">CSS</a> | Photo from SXC.hu | OpenDesigns.org </div>
<!-- Footer ends -->
</div>
<!-- Wrapper ends -->
</body>
</html>
Related examples in the same category