thebigleaf
<!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>
<title>The Leaf</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* CSS Document by Dieter Schneider for www.csstemplateheaven.com 2007*/
* {margin: 0; padding: 0;}
/*-------------------------------------- SITE STRUCTURE -------------------------------*/
body {
background: #fff url(thebigleaf-images/main_bg.jpg) no-repeat;
font-size: 62.5%;
font-family: Georgia, "Times New Roman", Times, serif;
}
#headerwrapper {
width: 505px;
height: 180px;
margin-top: 265px;
margin-left: 120px;
}
#header_left {
width: 255px;
float: left;
}
#header_right {
float: right;
width: 185px;
padding-top: 20px;
font-size: 1.2em;
}
#main_content {
width: 580px;
margin-top: 75px;
clear: both;
margin-left: 100px;
font-size: 1.2em;
}
#footer {
width: 580px;
margin-top: 10px;
clear: both;
margin-left: 100px;
text-align: center;
}
/*-------------------------------------- NAVIGATION -------------------------------*/
#navlist
{
border-bottom: 1px solid #CCCCCC;
width: 175px;
}
#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid #CCCCCC;
}
#navlist li a {
text-decoration: none;
color: #999900;
}
/*-------------------------------------- TEXT FORMATTING -------------------------------*/
p {
margin: 20px;
color: #666666;
}
h1 {
font-size: 3em;
font-style: italic;
color: #CCCCCC;
border-bottom: 1px dotted #CCC;
padding-bottom: 8px;
}
h2 {
margin-left: 20px;
color: #999900;
font-size: 1.2em;
background: url(thebigleaf-images/date.gif) no-repeat;
padding-top: 1px;
padding-left: 5px;
height: 26px;
}
h3 {}
.heading_color {
color: #CCCC99;
font-style: normal;
}
blockquote {
font-size: 1.6em;
font-style: italic;
color: #999999;
background: url(thebigleaf-images/quote.gif) no-repeat;
padding-top: 5px;
padding-left: 5px;
margin-top: 10px;
}
.quote_author {
text-align: right;
font-size: 0.7em;
font-style: italic;
color: #CCCC99;
font-weight: bold;
margin: 0px;
}
.date {
font-size: .6em;
color: #CCCCCC;
}
a:link {color: #999900} /* unvisited link */
a:visited {color: #999900} /* visited link */
a:hover {color: #993300} /* mouse over link */
a:active {color: #999900} /* selected link */
</style>
</head>
<body>
<div id="headerwrapper">
<div id="header_left">
<h1>The <span class="heading_color">BIG</span> Leaf</h1>
<blockquote>
<p>Dreams are renewable. No matter what our age or condition, there are still untapped possibilities within us and new beauty waiting to be born.</p>
<p class="quote_author">-Dale Turner-</p>
</blockquote>
</div>
<div id="header_right">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://www.free-css.com/" id="current">Home</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Blog</a></li>
<li><a href="http://www.free-css.com/">Forum</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
</div>
</div>
<div id="main_content">
<h2>About the template <br />
<span class="date">2007.04.25</span></h2>
<p>Duis suscipit, tellus et sollicitudin pharetra, neque mauris placerat nibh, ultrices porta felis quam sit amet tortor. Nulla eget ipsum ac odio tincidunt volutpat. In iaculis condimentum magna. Sed molestie. Sed libero justo, bibendum ac, sagittis et, imperdiet quis, ante. Vivamus et risus. Etiam a dolor vehicula libero eleifend aliquet. Integer eget ligula quis dui luctus porta. Aliquam nonummy. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse rhoncus molestie nulla. Nullam consectetuer lectus quis pede. Proin viverra pharetra risus. Nam ut nulla non nisl tincidunt venenatis. Suspendisse potenti.</p>
<h2>Integer eget <br />
<span class="date">2007.04.25</span></h2>
<p>Duis suscipit, tellus et sollicitudin pharetra, neque mauris placerat nibh, ultrices porta felis quam sit amet tortor. Nulla eget ipsum ac odio tincidunt volutpat. In iaculis condimentum magna. Sed molestie. Sed libero justo, bibendum ac, sagittis et, imperdiet quis, ante. Vivamus et risus. Etiam a dolor vehicula libero eleifend aliquet. Integer eget ligula quis dui luctus porta. Aliquam nonummy. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse rhoncus molestie nulla. Nullam consectetuer lectus quis pede. Proin viverra pharetra risus. Nam ut nulla non nisl tincidunt venenatis. Suspendisse potenti.</p>
<h2>Maecenas erat <br />
<span class="date">2007.04.25</span></h2>
<p>Mauris in velit quis nisl molestie dictum. Ut ac lacus. Nullam sed orci cursus leo luctus euismod. In mauris eros, ultrices in, auctor nec, porttitor eu, orci. Fusce at quam. Sed ornare posuere lorem. Aliquam erat volutpat. Pellentesque nulla est, auctor eu, molestie vitae, ultrices id, neque. Duis adipiscing sagittis arcu. Maecenas erat diam, volutpat ac, condimentum nec, dictum id, libero. Duis sed lorem eget justo posuere iaculis. Quisque sodales aliquam diam. </p>
</div>
<div id="footer">
<p>Created by <a href="http://www.dieter.no">Dieter Schneider</a> 2007</p>
</div>
</body>
</html>
Related examples in the same category