cultivated
<!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>Cultivated</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 {
margin-top: 20px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #666666;
}
h1, h2, h3 {
text-transform: uppercase;
}
h1 {
}
h2 {
}
h3 {
}
p, blockquote, ul, ol {
}
a {
color: #C90404;
}
a:hover {
text-decoration: none;
}
img {
border: none;
}
img.left {
float: left;
margin: 0 15px 0 0;
}
img.right {
float: right;
float: 0 0 0 15px;
}
/* Header */
#header {
width: 770px;
height: 100px;
margin: 0 auto;
padding: 0 0 0 0;
background: url(cultivated-images/img1.jpg);
}
#header h1, #header h2 {
float: left;
font-weight: normal;
}
#header h1 {
padding: 14px 0 0 180px;
letter-spacing: 4px;
font-size: 30px;
}
#header h2 {
padding: 31px 0 0 10px;
letter-spacing: 3px;
font-size: 12px;
}
#header a {
text-decoration: none;
color: #90210A;
}
/* Page */
#page {
width: 770px;
margin: 0 auto;
background: url(cultivated-images/img2.gif) repeat-y;
}
/* Content */
#content {
float: right;
width: 380px;
padding: 0 20px;
background: url(cultivated-images/img4.gif) no-repeat;
}
#content .post {
}
#content .post h2 {
margin-bottom: 1em;
text-transform: none;
font-weight: normal;
color: #333333;
}
#content .post h3 {
margin-bottom: 1em;
font-size: 100%;
}
#content .post p, #content .post ul, #content .post ol {
margin-bottom: 1em;
line-height: 1.5em;
}
#content .post blockquote, #content .post ul, #content .post ol {
margin-left: 3em;
}
/* Ad Space */
#adspace {
float: right;
width: 120px;
padding: 15px 25px;
background: url(cultivated-images/img5.gif) no-repeat;
}
/* Sidebar */
#sidebar {
float: left;
width: 150px;
padding: 15px;
background: url(cultivated-images/img3.gif) no-repeat;
}
.boxed {
}
.boxed h2 {
margin: 15px 0;
padding-left: 20px;
background: url(cultivated-images/img6.gif) no-repeat left bottom;
font-size: 92%;
color: #3A2403;
}
.boxed .list {
background: url(cultivated-images/img7.gif) repeat-x;
list-style: none;
}
.boxed .list li {
padding: 10px 0 15px 0;
background: url(cultivated-images/img7.gif) repeat-x left bottom;
}
.boxed .list h3 {
font-size: 77%;
}
/* Menu */
#menu {
}
#menu ul {
list-style: none;
background: url(cultivated-images/img7.gif) repeat-x;
}
#menu li {
padding: 5px 0;
background: url(cultivated-images/img7.gif) repeat-x left bottom;
}
#menu a {
text-decoration: none;
}
#menu a:hover {
text-decoration: underline;
}
/* Footer */
#footer {
width: 140px;
height: 100px;
margin: 0 auto;
padding: 20px 610px 0 20px;
background: url(cultivated-images/img8.gif) no-repeat;
font-size: 77%;
}
#footer p {
margin-bottom: 1em;
line-height: normal;
}
</style>
</head>
<body>
<div id="header">
<h1><a href="http://www.free-css.com/">Cultivated</a></h1>
<h2><a href="http://www.free-css.com/">Free CSS Templates</a></h2>
</div>
<div id="page">
<div id="adspace"><a href="http://www.free-css.com/"><img src="cultivated-images/ad120x600.jpg" alt="" width="120" height="600" /></a></div>
<div id="content">
<div class="post">
<h2>Welcome to Cultivated!</h2>
<p><strong>“Cultivated</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 photo is from PDPhoto.org. 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>
</div>
<div class="post">
<h2>Praesent mattis condimentum nisl</h2>
<p>Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum:</p>
<blockquote>
<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. Curabitur sem urna, consequat vel, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet.”</p>
</blockquote>
<h3>Nulla luctus eleifend purus</h3>
<ol>
<li><a href="http://www.free-css.com/">Integer sit amet pede vel arcu aliquet pretium.</a></li>
<li><a href="http://www.free-css.com/">Pellentesque quis elit non lectus gravida blandit.</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
<li><a href="http://www.free-css.com/">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
<li><a href="http://www.free-css.com/">Cras vitae metus aliquam risus pellentesque pharetra.</a></li>
<li><a href="http://www.free-css.com/">Maecenas vitae orci vitae tellus feugiat eleifend.</a></li>
<li><a href="http://www.free-css.com/">Duis non ante in metus commodo euismod lobortis.</a></li>
</ol>
</div>
</div>
<div id="sidebar">
<div id="menu" class="boxed">
<h2>Pages</h2>
<ul>
<li><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/">Clients</a></li>
<li><a href="http://www.free-css.com/">Support</a></li>
</ul>
</div>
<div class="boxed">
<h2>Integer Gravid</h2>
<ul class="list">
<li>
<h3>May 14th</h3>
<a href="http://www.free-css.com/">In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula…</a></li>
<li>
<h3>May 9th</h3>
<a href="http://www.free-css.com/">Donec leo, vivamus fermentum nibh in augue praesent a lacus…</a></li>
<li>
<h3>May 3rd</h3>
<a href="http://www.free-css.com/">Quisque dictum integer nisl risus sagittis convallis rutrum id congue…</a></li>
</ul>
</div>
</div>
<div style="clear: both;"> </div>
</div>
<div id="footer">
<p id="legal">Copyright © 2007 Cultivated. 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/">Home</a> | <a href="http://www.free-css.com/">Terms of Use</a></p>
</div>
</body>
</html>
Related examples in the same category