sunset2 : Sun « Templates « HTML / CSS






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 -->
    &copy; 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

1.metamorph_aliensun
2.metamorph_sunandflower
3.metamorph_sunnybeach
4.metamorph_sunny_lt
5.metamorph_sunparlor
6.metamorph_sunrise
7.metamorph_sunrising_lt
8.metamorph_sunroad
9.metamorph_sunset
10.metamorph_sunshine
11.metamorph_sunshore
12.metamorph_beam
13.beachsunset
14.ftdsunset
15.eclipse
16.Oxford_Sunset
17.Rising_Sun
18.rainbow
19.sunnysky
20.sunrise2
21.sunset-heaven
22.sunset
23.sunshine