sunrise2
<!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>Sunrise</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
/* Sunrise by Payal Dhar (payal@writeside.net) */
*{
padding: 0;
margin: 0;
}
body {
background: #FFFBEF;
color: #9C8B6D;
font: 0.8em Arial, Helvetica, sans-serif;
}
a{
color:#D3BCA1;
text-decoration: none;
}
a:hover, a:active{
color:#9C8B6D;
text-decoration:none;
}
#wrapper{
margin: 0 auto;
width: 750px;
}
#header{
margin: 0;
text-align:right;
height:300px;
background: url(sunrise2-images/header.jpg) top left no-repeat;
}
#header-h1{
color:#EFC79B;
font:5em Garamond, serif;
}
#nav {
float: left;
width: 140px;
}
#nav ul {
list-style-type: none;
padding:0 0 15px 0;
margin:0;
}
#nav a{
font: 1.25em Garamond, serif;
text-decoration: none;
padding-right: 15px;
display:block;
border-bottom:1px solid;
padding:5px 5px 5px 0;
}
#nav a:hover, a:active{
color:#000;
border-bottom: 1px solid;
}
#nav h1{
font-size:1.3em;
padding:8px 0 5px;
}
input, textarea{
padding:5px;
margin:5px 0;
background:#fff;
border:1px solid #D3BCA1;
color:#D3BCA1;
}
#text {
margin-top:-25px;
float:right;
width:550px;
line-height:1.5em;
border-bottom: 1px solid;
background:transparent;
}
#text p {
padding: 7px;
line-height: 1.4em;
}
h1, h2, h3{
color:#D3BCA1;
padding: 5px 5px 10px 5px;
font-family:Garamond, serif;
}
#text h1{
font-size: 1.5em;
font-variant: small-caps;
}
#text h2{
font-size: 1.3em ;
}
#text h3{
font-size:1.19em;
}
#text ol, ul{
padding:0 15px;
margin:0 15px;
}
.meta{
text-align:right;
font-size:0.8em;
background:#FFF5DF;
padding:2px;
margin:5px 7px;
}
blockquote{
background:url(sunrise2-images/block.jpg) top right no-repeat;
margin:5px 25px;
padding:7px 50px 7px 7px;
border-left:1px solid #D3BCA1;
}
#footer{
clear:both;
width: 750px;
text-align: right;
margin-top: 5px;
font-size: 0.8em;
height:30px;
line-height:30px;
}
</style>
</head>
<body>
<div id="wrapper">
<!-- Page wrapper div starts -->
<div id="header">
<!-- header-div starts -->
<h1>Sunrise</h1>
</div>
<!-- header-div ends -->
<div id="nav">
<!-- Navigation div starts -->
<h1>Go to</h1>
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Contact us</a></li>
<li><a href="http://www.free-css.com/">Sitemap</a></li>
</ul>
<h1>Search</h1>
<form method="post" action="#">
<input type="text" id="search" />
<input type="submit" id="submit" value="Search" />
</form>
</div>
<!-- Navigation div ends -->
<div id="text">
<!-- Text div starts -->
<h1> <a href="http://www.free-css.com/">About the template</a></h1>
<p>Sunrise can be used for an ordinary website as well as a blog. I may be converting this to Word Press and/or sNews themes when I find the time, but if anyone specifically wants either, please drop me a mail through my website Writeside.net.</p>
<p>Otherwise, you're pretty much free to do with this as you wish. This is public domain, but if you leave the "Design by" credit line, I'll be very happy, of course. Feel free to write if you need any help with this, or to just tell me how you've used this template.</p>
<div class="meta">Posted by <a href="http://www.free-css.com/">Jan</a>, 1 May 2007</div>
<h1> <a href="http://www.free-css.com/">An H1 heading</a></h1>
<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 class="meta">Posted by <a href="http://www.free-css.com/">Jan</a>, 30 April 2007</div>
</div>
<!--End of Text div -->
<div id="footer">
<!-- Footer div starts -->
© You | Design by <a href="http://writeside.net/">Payal Dhar</a> | Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> </div>
<!-- Footer div ends -->
</div>
<!-- Page wrapper div ends -->
</body>
</html>
Related examples in the same category