greeny
<!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">
<head>
<title>Greeny</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #555a4a;
background: #a0c73f;
}
a:link, a:visited { color: #0683ab; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #0683ab; text-decoration: underline; }
.button_01 a {
display: block;
width: 102px;
height: 23px;
padding: 7px 0 0 0;
background: url(greeny-images/button.png) no-repeat;
color: #333;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
}
.button_01 a:hover {
color: #fff;
background:url(greeny-images/button_hover.png) no-repeat;
}
p { margin: 0px; padding: 0px; }
img { margin: 0px; padding: 0px; border: none; }
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.margin_r10 { margin-right: 10px; }
.float_l { float: left; }
.float_r { float: right; }
#header_wrapper {
width: 100%;
height: 265px;
background: url(greeny-images/header.jpg) no-repeat top center;
}
#header {
position: relative;
width: 980px;
height: 265px;
padding: 0 10px;
margin: 0 auto;
background: url(greeny-images/header.jpg) no-repeat top center;
}
/* site title */
#header #site_title {
float: left;
width: 220px;
padding: 90px 0 0 50px;
}
#site_title h1 {
margin: 0;
padding: 0;
}
#site_title h1 a {
margin: 0px;
padding: 0px;
font-size: 30px;
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
#site_title h1 a:hover {
font-weight: bold;
text-decoration: none;
}
#site_title h1 a span {
display: block;
margin-left: 2px;
font-size: 14px;
color: #416902;
font-weight: bold;
letter-spacing: 2px;
}
/* end of site title */
/* menu */
#menu {
float: right;
padding-top: 70px;
height: 43px;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
padding: 0;
margin: 0;
display: inline;
}
#menu ul li a {
float: left;
display: block;
height: 35px;
width: 125px;
margin: 0;
padding: 8px 0 0 0;
text-align: center;
font-size: 12px;
text-decoration: none;
color: #333333;
font-weight: bold;
outline: none;
}
#menu li a:hover, #menu li .current {
color: #333333;
background: url(greeny-images/menu_hover.png) no-repeat top;
}
/* end of menu */
/* Search */
#header #search_box {
position: absolute;
width: 335px;
height: 72px;
bottom: 30px;
right: 50px;
background: url(greeny-images/search.png)
}
#search_box form {
width: 280px;
height: 27px;
margin: 0;
padding: 25px 0 0 0;
}
#searchfield {
height: 17px;
width: 270px;
padding: 4px 5px 6px 5px;
color: #fff;
font-size: 12px;
font-variant: normal;
line-height: normal;
background: none;
border: none;
}
/* end of search */
/* content */
#content_wrapper {
width: 920px;
margin: 0 auto;
padding: 30px 40px;
background: url(greeny-images/content.jpg) repeat-y;
}
#content_wrapper_bottom {
width: 1000px;
height: 15px;
margin: 0 auto;
background: url(greeny-images/content_bottom.jpg) no-repeat;
}
#content {
float: left;
width: 600px;
}
#content p {
text-align: justify;
margin-bottom: 10px;
}
.content_section {
clear: both;
width: 100%;
}
#content h2 {
color: #3a5909;
font-size: 24px;
padding: 0 0 60px 20px;
background: url(greeny-images/header_bg.png) no-repeat bottom left;
}
.product_box {
float: left;
width: 190px;
padding-bottom: 10px;
border-bottom: 1px dotted #666;
margin-bottom: 20px;
}
.fl_image {
float: left;
margin: 3px 15px 5px 0;
}
#content .product_box p {
padding: 0;
margin: 0 0 5px 0;
}
#content .product_box a {
color: #000000;
font-weight: bold;
}
#content .em_text {
color: #537c11;
}
.price {
color: #C30;
font-size: 14px;
font-weight: bold;
}
.product_box h3 {
background: #63a103;
padding: 3px 10px;
margin: 0 0 10px 0;
color: #ffffff;
font-size: 12px;
}
.product_box img {
width: 180px;
height: 100px;
border: 5px solid #e6e0ce;
margin-bottom: 10px;
}
#sidebar {
float: right;
width: 280px;
padding: 0;
background: url(greeny-images/sidebar.jpg) repeat-y;
}
#sidebar .sidebar_section {
margin-bottom: 30px;
}
#sidebar .sidebar_section_content {
margin:0 0 0 35px;
}
#sidebar h2 {
color: #3a5909;
font-size: 24px;
padding: 0 0 60px 20px;
background: url(greeny-images/header_bg.png) no-repeat bottom left;
}
#sidebar .categories_list {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar .categories_list li {
padding: 0;
margin: 0;
}
.categories_list li a {
display: block;
color: #201f1c;
padding: 5px 0 5px 20px;
background: url(greeny-images/list.png) center left no-repeat;
}
.categories_list li a:hover {
color: #537c11;
text-decoration: none;
}
.sidebar_section label {
display: block;
margin-bottom: 10px;
}
.sidebar_section #input_field {
height: 20px;
width: 233px;
padding: 0 5px;
margin-bottom: 10px;
color: #000000;
font-size: 12px;
font-variant: normal;
line-height: normal;
}
.sidebar_section #submit_btn{
float: right;
height: 30px;
width: 80px;
margin: 0px;
padding: 3px 0 15px 0;
cursor: pointer;
font-size: 12px;
text-align: center;
vertical-align: bottom;
white-space: pre;
outline: none;
}
/* end of content */
/* footer */
#footer {
width: 980px;
margin: 0 auto;
padding: 30px 10px;
text-align: center;
color: #333333;
}
#footer a {
color: #000000;
}
#footer .footer_menu {
margin: 0 0 10px 0;
padding: 0px;
list-style: none;
}
.footer_menu li {
margin: 0px;
padding: 0 20px;
display: inline;
border-right: 1px solid #000000;
}
.footer_menu .last_menu {
border: none;
}
/* end of footer */
</style>
<script language="javascript" type="text/javascript">
function clearText(field) {
if (field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;
}
</script>
</head>
<body>
<div id="header_wrapper">
<div id="header">
<div id="site_title">
<h1><a href="#"> <img src="greeny-images/logo.png" alt="" /> <span>free css templates</span> </a></h1>
</div>
<div id="menu">
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- end of menu -->
<div id="search_box">
<form action="#" method="get">
<input type="text" value="Enter a keyword" name="q" size="10" id="searchfield" onfocus="clearText(this)" onblur="clearText(this)" />
</form>
</div>
<div class="cleaner"></div>
</div>
<!-- end of header -->
</div>
<!-- end of header_wrapper -->
<div id="content_wrapper">
<div id="content">
<div class="content_section">
<h2>Featured Products</h2>
<div class="product_box margin_r10">
<h3>Vestibulum urna ipsum</h3>
<img src="greeny-images/image_02.jpg" alt="" />
<p class="price">Price: $180</p>
<a href="#">Detail</a> | <a href="#">Add to cart</a> </div>
<div class="product_box margin_r10">
<h3>Aliquam sollicitudin</h3>
<img src="greeny-images/image_03.jpg" alt="" />
<p class="price">Price: $240</p>
<a href="#">Detail</a> | <a href="#">Add to cart</a> </div>
<div class="product_box ">
<h3>Pellentesque habitant </h3>
<img src="greeny-images/image_04.jpg" alt="" />
<p class="price">Price: $120</p>
<a href="#">Detail</a> | <a href="#">Add to cart</a> </div>
<div class="cleaner"></div>
<div class="button_01"><a href="#">View All</a></div>
</div>
<div class="cleaner_h40"></div>
<div class="content_section">
<h2>Greeny Website Template</h2>
<img src="greeny-images/image_05.jpg" alt="" class="fl_image" />
<p class="em_text">Greeny Template is a free CSS template provided by TemplateMo.com. You may use this template in your websites. Credit goes to <a href="#">Free Photos</a> for photos and <a href="#">green-eyed-butterfly</a> for brush.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac felis mauris, a fringilla ipsum. Nulla purus purus, tristique vitae tincidunt id, tincidunt in elit. Nulla facilisi. Curabitur nec leo nulla, interdum fermentum tellus.</p>
</div>
</div>
<!-- end of content -->
<div id="sidebar">
<div class="sidebar_section">
<h2>Categories</h2>
<div class="sidebar_section_content">
<ul class="categories_list">
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Phasellus eget lorem</a></li>
<li><a href="#">Sed sit amet sem</a></li>
<li><a href="#">Cras eget est vel</a></li>
<li><a href="#">Quisque in ligula</a></li>
<li><a href="#">Donec a massa dui</a></li>
<li><a href="#">Aenean facilisis</a></li>
<li><a href="#">Etiam vitae consequat</a></li>
<li><a href="#">Aliquam sollicitudin</a></li>
<li><a href="#">Nunc fermentum</a></li>
</ul>
</div>
</div>
<div class="cleaner_h30"></div>
<div class="sidebar_section">
<h2>Newsletter</h2>
<div class="sidebar_section_content">
<form action="#" method="get">
<label>Please enter your email address to subscribe our newsletter.</label>
<input type="text" value="" name="username" size="10" id="input_field" />
<input type="submit" name="login" value="Subscribe" alt="login" id="submit_btn" />
</form>
<div class="cleaner"></div>
</div>
</div>
</div>
<!-- end of sidebar -->
<div class="cleaner"></div>
</div>
<div id="content_wrapper_bottom"></div>
<!-- end of content_wrapper -->
<div id="footer">
<ul class="footer_menu">
<li><a href="#">Home</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Gallery</a></li>
<li class="last_menu"><a href="#">Contact</a></li>
</ul>
Copyright © 2048 <a href="#">Your Company Name</a> | Designed by <a href="http://www.templatemo.com/">Free CSS Templates</a></div>
<!-- end of footer -->
</body>
</html>
Related examples in the same category