contemplate
<!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>Contemplate</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
* {
margin: 0;
padding: 0;
}
body {
background: #232903;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #8B985F;
}
h1, h2, h3 {
margin-bottom: 15px;
text-transform: lowercase;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #CEEA70;
}
h1 {
letter-spacing: -1px;
font-size: 197%;
}
h2 {
letter-spacing: -1px;
}
h3 {
}
p, ol, ul {
margin-bottom: 1.5em;
line-height: 1.5em;
}
ul, ol {
margin-left: 3em;
}
blockquote {
padding: 0 3em;
background: url(contemplate-images/img05.gif) no-repeat 1em 0;
font-style: italic;
}
a:link {
text-decoration: none;
color: #CEEA70;
}
a:hover, a:active {
text-decoration: none;
color: #FFFFFF;
}
a:visited {
color: #8B985F;
}
img {
border: none;
}
img.left {
float: left;
margin: 0 15px 0 0;
}
img.right {
float: right;
margin: 0 0 0 15px;
}
/* Header */
#header {
width: 710px;
height: 305px;
margin: 0 auto;
padding: 0 25px 10px 25px;
background: #34160C url(contemplate-images/img01.jpg) no-repeat center top;
}
#header h1 {
margin: 0;
padding: 200px 0 0 40px;
letter-spacing: -2px;
font-size: 40px;
}
#header h1 a {
color: #FFFFFF;
}
#header h2 {
margin: -10px 0 0 0;
padding: 0 0 0 175px;
letter-spacing: normal;
font: bold 10px Arial, Helvetica, sans-serif;
}
#header h2 a {
color: #CAF368;
}
#header a {
text-decoration: none;
}
/* Page */
#page {
width: 710px;
margin: 0 auto;
padding: 0 25px;
background: #34160C url(contemplate-images/img02.gif) repeat-y center top;
}
/* Content */
#content {
float: left;
width: 460px;
padding: 5px 0 0 5px;
background: url(contemplate-images/img03.gif) no-repeat;
}
.post {
width: 420px;
padding: 20px 0 0 20px;
}
.post h1, .post h2, .post h3 {
}
.post .title {
padding: 0 0 5px 0;
background: url(contemplate-images/img08.gif) repeat-x left bottom;
}
.post .title span {
padding-right: 30px;
background: url(contemplate-images/img06.gif) no-repeat right center;
}
/* Sidebar */
#sidebar {
float: right;
width: 240px;
padding: 5px 5px 0 0;
background: url(contemplate-images/img04.gif) no-repeat;
}
.box {
width: 239px;
padding-left: 1px;
}
.box .title {
height: 33px;
margin: 0;
padding: 10px 0 0 20px;
background: url(contemplate-images/img09.gif) repeat-x;
font-size: 18px;
}
.box ul {
margin: 20px;
padding: 0;
list-style: none;
}
.box li {
padding: 5px 0;
background: url(contemplate-images/img10.gif) repeat-x;
}
.box li.first {
background: none;
}
.box h3 {
margin: 0;
font-size: 85%;
font-weight: bold;
color: #8B985F;
}
.box p {
margin: 0;
line-height: normal;
}
.box a {
padding-left: 10px;
background: url(contemplate-images/img11.gif) no-repeat 0 5px;
}
/* Footer */
#footer {
width: 710px;
height: 45px;
margin: 0 auto;
padding: 0 25px 25px 25px;
background: #34160C url(contemplate-images/img12.gif) no-repeat center top;
}
#footer p {
margin: 0;
padding: 14px 20px;
line-height: normal;
font-size: 77%;
color: #565736;
}
#footer a {
color: #565736;
}
#footer a:hover {
text-decoration: underline;
}
#legal {
float: left;
}
#links {
float: right;
}
</style>
</head>
<body>
<div id="header">
<h1><a href="http://www.free-css.com/">Contemplate</a></h1>
<h2><a href="http://www.free-css.com/">By Free CSS Templates</a></h2>
</div>
<!-- end #header -->
<div id="page">
<div id="content">
<div class="post">
<h1 class="title"><span>Welcome to Contemplate!</span></h1>
<img src="contemplate-images/img07.jpg" alt="" width="120" height="120" class="left" />
<p><strong>Contemplate</strong> is a free template from Free CSS Templates released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The photos are from <a href="http://www.free-css.com/">PDPhoto.org</a>. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. <em>Enjoy :)</em></p>
<p>An ordered list example:</p>
<ol>
<li>List item number one</li>
<li>List item number two</li>
<li>List item number thre</li>
</ol>
</div>
<div class="post">
<h2 class="title"><span>Lorem Ipsum Dolor</span></h2>
<p>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus.</p>
<h3>Curabitur Sem Urna</h3>
<p>Vel consequat, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdie:</p>
<blockquote>
<p>“In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula.Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh.”</p>
</blockquote>
</div>
</div>
<!-- end #content -->
<div id="sidebar">
<div id="menu" class="box">
<h2 class="title">Pages</h2>
<ul>
<li class="first"><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Products</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Forums</a></li>
<li><a href="http://www.free-css.com/">Support</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
<!-- end #menu -->
<div id="updates" class="box">
<h2 class="title">Recent Updates</h2>
<ul>
<li class="first">
<h3>May 31, 2007</h3>
<p><a href="http://www.free-css.com/">In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula…</a></p>
</li>
<li>
<h3>May 26, 2007</h3>
<p><a href="http://www.free-css.com/">Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh…</a></p>
</li>
<li>
<h3>May 22, 2007</h3>
<p><a href="http://www.free-css.com/">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum…</a></p>
</li>
<li>
<h3>May 17, 2007</h3>
<p><a href="http://www.free-css.com/">Nam pede erat, porta eu, lobortis eget, tempus et, tellus. Etiam nequea…</a></p>
</li>
<li>
<h3>May 14, 2007</h3>
<p><a href="http://www.free-css.com/">Vivamus fermentum nibh in augue. Praesent a lacus at urna congue rutrum. Nulla enim eros…</a></p>
</li>
</ul>
</div>
<!-- end #updates -->
</div>
<!-- end #sidebar -->
<div style="clear: both;"> </div>
</div>
<!-- end #page -->
<div id="footer">
<p id="legal">Copyright © 2007 Red Avenue. All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
<p id="links"><a href="http://www.free-css.com/">Privacy Policy</a> | <a href="http://www.free-css.com/">Terms of Use</a></p>
</div>
<!-- end #footer -->
</body>
</html>
Related examples in the same category