theharvest
<!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" lang="en">
<head>
<title>The Harvest</title>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<style type='text/css'>
/* The Harvest First Light Web Design 2007 */
body {background: #677C2F url(theharvest-images/background.jpg) repeat;
color: #6C6C6C;
font-size: 12px;
font-family: "palatino linotype", "trebuchet ms", "times new roman";
margin: 0;
padding: 0;
text-align: center;} /* Needed to center layout in old IE browsers. */
acronym, abbr {cursor: help;
border-bottom: 1px dotted;}
h1, h2, h3, h4, h5, h6 {margin: 0 0 25px 0;
padding: 0 0 2px 0;
color: #8BA11D;
background-color: #FFF;
font-weight: normal;}
.bottom-border {border-bottom: 1px solid #E0E0E0;}
.headline {margin: 0 0 5px 0;
padding: 0;
font-size: 12px;}
ul {list-style-type: square;}
p {padding: 0;
margin: 0 0 25px 0;
line-height: 160%;}
p.clear-left {clear: left;}
img {border: 0;
margin: 0 0 25px 0;}
h1 {font-size: 24px;}
h2 {font-size: 22px;}
h3 {font-size: 20px;}
h4 {font-size: 18px;}
h5 {font-size: 16px;}
h6 {font-size: 14px;}
a {color: #8BA11D; text-decoration: none; background-color: #FFF;}
a:link {color: #8BA11D; background-color: #FFF;}
a:visited {color: #677C2F; background-color: #FFF;}
a:hover {color: #CC6633; background-color: #FFF;}
#container {width: 760px;
background-color: #FFF;
color: #6C6C6C;
text-align: left;
padding: 0;
margin: 10px auto;}
#header {width: 100%;
background: #3D3D3D;
color: #EEE;}
#header h1 {margin: 0;
background: #3D3D3D;
color: #EEE;
padding: 0;}
#logo {display: block;
margin: 0;}
#sub-header {width: 760px;
height: 218px;
background: #FFF url(theharvest-images/wheat_field.jpg) no-repeat;
color: #6C6C6C;}
/* Begin main navigation menu. */
#menu {width: 100%;
height: 52px;
margin: 0;
padding: 0;
background: #FFF url(theharvest-images/menu_background.jpg) repeat-x;
color: #333;
position: relative;
display: block;}
#menu-right {position: absolute;
width: 13px;
height: 52px;
right: 0;
top: 0;
background: #FFF url(theharvest-images/menu_right.jpg) no-repeat;
color: #333;}
#menu-left {position: absolute;
width: 13px;
height: 52px;
left: 0;
top: 0;
background: #FFF url(theharvest-images/menu_left.jpg) no-repeat;
color: #333;}
#menu ul {list-style-type: none;
margin: 0;
padding: 12px 0 0;
text-align: center;}
#menu ul li {display: inline;
margin: 10px 0 0 10px;
padding: 0;
font-weight: bold;}
#menu ul li#first {margin: 0;}
#menu ul li a {text-decoration: none;
text-transform: uppercase;
color: #525252;
background-color: #FFF;
font-size: 14px;}
#menu ul li a:hover {color: #000;
background-color: #FFF;}
.access-key {color: #8BA11D;
font-size: 18px;
background-color: #FFF;
font-weight: normal;}
/* End main navigation menu. */
#content {padding: 0 20px;
background: #FFF url(theharvest-images/content_top.jpg) no-repeat;
color: #6C6C6C;}
/* The right-column division is your main content division. */
#right-column {width: 468px;
float: right;
min-height: 350px;}
#left-column {width: 216px;
padding: 0;
margin-right: 504px;}
#footer {width: 760px;
height: 78px;
clear: both;
margin: 0;
padding: 0;
background: #FFF url(theharvest-images/footer_background.jpg) no-repeat;
color: #6C6C6C;}
#footer-content {padding: 51px 20px 0;}
#footer-right {float: right;
margin: 0;}
#footer p {margin: 0;}
.news {margin: 0 0 40px 0;}
.date {color: #8BA11D;
background-color: #FFF;
font-style: italic;
float: right;}
.left {float: left;
margin: 3px 5px 0 0;}
.right {float: right;}
.justify {text-align: justify;}
.clear {clear: both;}
/* Begin recent clients list. */
#recent-clients {margin-bottom: 25px;
padding: 0;}
#recent-clients ul {margin: 0;
padding: 0;
list-style-type: none;}
#recent-clients li {display: inline;
padding: 0 1px 0 0;}
#recent-clients li a img {padding: 0;
margin: 0;
border: 2px solid #E0E0E0;}
#recent-clients li a:hover img {border: 2px solid #677C2F;}
/* End recent clients list. */
/* Begin style for the featured services. */
#featured-wrapper {width: 468px;
background: #FFF url(theharvest-images/featured_background.png) repeat-y;
color: #6C6C6C;}
#featured-top {width: 468px;
height: 48px;
background: #FFF url(theharvest-images/featured_top.png) no-repeat;
color: #6C6C6C;}
#featured-bottom {width: 468px;
height: 15px;
background: #FFF url(theharvest-images/featured_bottom.png) no-repeat;
color: #6C6C6C;}
#featured-content {margin: -20px 15px 0;
padding: 0 10px 10px 10px;}
.featured {width: 100%;
clear: both;
padding-bottom: 25px;}
.featured h3 {margin: 0;
padding: 8px 0 0 0;
background: transparent;
font-size: 16px;}
.number {font-size: 72px;
line-height: 72px;
float: left;
margin: 0 10px 0 0;
color: #8BA11D;
padding: 0;}
/* End style for featured services. */
</style>
<!--[if IE]>
<link rel="stylesheet" href="iefixes.css" type="text/css" />
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="http://www.free-css.com/"><img id="logo" style="width: 760px; height: 112px;" alt="" src="theharvest-images/header.png" /></a></h1>
</div>
<div id="sub-header"></div>
<div id="menu">
<div id="menu-left"></div>
<div id="menu-right"></div>
<ul>
<li id="first"><span class="access-key">01.</span> <a accesskey="1" href="http://www.free-css.com/">Home</a></li>
<li><span class="access-key">02.</span> <a accesskey="2" href="http://www.free-css.com/">About</a></li>
<li><span class="access-key">03.</span> <a accesskey="3" href="http://www.free-css.com/">News</a></li>
<li><span class="access-key">04.</span> <a accesskey="4" href="http://www.free-css.com/">Portfolio</a></li>
<li><span class="access-key">05.</span> <a accesskey="5" href="http://www.free-css.com/">Services</a></li>
<li><span class="access-key">06.</span> <a accesskey="6" href="http://www.free-css.com/">Contact Us</a></li>
</ul>
</div>
<div id="content">
<div id="right-column">
<h2 class="bottom-border">The Harvest</h2>
<p class="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse arcu enim, commodo id, auctor id, aliquet sit amet, erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque id elit a risus imperdiet luctus. Vestibulum vitae enim sed sapien elementum blandit. Vestibulum vel quam. Morbi tincidunt suscipit.<br />
<span class="right"><a href="http://www.free-css.com/">» Learn More</a></span></p>
<h2 class="bottom-border">Our Featured Services</h2>
<div id="featured-wrapper">
<div id="featured-top"></div>
<div id="featured-content">
<div class="featured">
<div class="number">01</div>
<h3><strong>Featured Service One</strong></h3>
<p class="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse arcu enim, commodo id, auctor id . . .<br />
<span class="right"><a href="http://www.free-css.com/">» Learn More</a></span></p>
</div>
<div class="featured">
<div class="number">02</div>
<h3><strong>Featured Service Two</strong></h3>
<p class="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse arcu enim, commodo id, auctor id . . .<br />
<span class="right"><a href="http://www.free-css.com/">» Learn More</a></span></p>
</div>
<div class="featured">
<div class="number">03</div>
<h3><strong>Featured Service Three</strong></h3>
<p class="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse arcu enim, commodo id, auctor id . . .<br />
<span class="right"><a href="http://www.free-css.com/">» Learn More</a></span></p>
</div>
</div>
<div id="featured-bottom"></div>
</div>
</div>
<div id="left-column">
<h2 class="bottom-border">Recent Clients</h2>
<div id="recent-clients">
<ul>
<li><a href="http://www.free-css.com/"><img style="width: 64px; height: 64px;" alt="" src="theharvest-images/client_thumb_1.jpg" /></a></li>
<li><a href="http://www.free-css.com/"><img style="width: 64px; height: 64px;" alt="" src="theharvest-images/client_thumb_2.jpg" /></a></li>
<li><a href="http://www.free-css.com/"><img style="width: 64px; height: 64px;" alt="" src="theharvest-images/client_thumb_3.jpg" /></a></li>
<li><a href="http://www.free-css.com/"><img style="width: 64px; height: 64px;" alt="" src="theharvest-images/client_thumb_4.jpg" /></a></li>
<li><a href="http://www.free-css.com/"><img style="width: 64px; height: 64px;" alt="" src="theharvest-images/client_thumb_5.jpg" /></a></li>
<li><a href="http://www.free-css.com/"><img style="width: 64px; height: 64px;" alt="" src="theharvest-images/client_thumb_6.jpg" /></a></li>
<li><a href="http://www.free-css.com/"><img style="width: 64px; height: 64px;" alt="" src="theharvest-images/client_thumb_7.jpg" /></a></li>
<li><a href="http://www.free-css.com/"><img style="width: 64px; height: 64px;" alt="" src="theharvest-images/client_thumb_8.jpg" /></a></li>
<li><a href="http://www.free-css.com/"><img style="width: 64px; height: 64px;" alt="" src="theharvest-images/client_thumb_9.jpg" /></a></li>
</ul>
</div>
<h2 class="bottom-border">Recent News</h2>
<h3 class="headline"><span class="date">11 <abbr title="June">JUN</abbr> 07</span>Headline</h3>
<p class="news">Vestibulum vitae enim sed sapien elementum blandit. Vestibulum vel quam. Morbi tincidunt suscipit . . .<br />
<span class="right"><a href="http://www.free-css.com/">» Read More</a></span></p>
<p><a href="http://www.free-css.com/"><img class="left" style="width: 32px; height: 32px;" alt="" src="theharvest-images/rss.png" /></a>Subscribe to the regularly updated <acronym title="Really Simple Syndication">RSS</acronym> news feed.</p>
</div>
</div>
<div id="footer">
<div id="footer-content">
<div id="footer-right"><a href="http://www.free-css.com/" accesskey="t">Terms of Use </a>· <a href="http://www.free-css.com/" accesskey="p">Privacy Policy </a>· <a href="http://www.free-css.com/" accesskey="s">Sitemap </a>· Design by <a href="http://www.firstlightwebdesign.com">First Light</a></div>
<p>Copyright © 2007 Your Site. All rights reserved.</p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category