greenzap
<!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>GreenZap | About</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
@charset "utf-8";
body {
margin:0;
padding:0;
width:100%;
background:#fcf6ee;
}
html {
padding:0;
margin:0;
}
li.bg, .bg {
clear:both;
border-bottom:1px dashed #818181;
padding:0;
margin:10px 0;
background:none;
list-style:none;
}
p.clr, .clr {
clear:both;
padding:0;
margin:0;
}
.main {
margin:0 auto;
padding:0;
}
.header_resize {
margin:0 auto;
padding:0;
width:970px;
}
.header {
margin:0;
padding:0;
background:#fcf6ee url(greenzap-images/header_bg.gif) top repeat-x;
}
.logo {
margin:0;
}
h1 {
margin:0;
padding:38px 0 36px 32px;
color:#5c5c5c;
font:bold 40px/1.2em Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing:-3px;
}
h1 a, h1 a:hover {
color:#5c5c5c;
text-decoration:none;
}
h1 span {
font-weight:bold;
color:#8fc400;
}
h1 small {
font:normal 13px/1.2em Arial, Helvetica, sans-serif;
color:#888;
letter-spacing:normal;
}
.menu {
padding:4px 0 0 0;
margin:0;
width:410px;
float:left;
}
.menu ul {
padding:0;
margin:0;
list-style:none;
border:0;
float:left;
}
.menu ul li {
float:left;
margin:0;
padding:0 5px;
border:0;
}
.menu ul li a {
float:left;
margin:0;
padding:20px 0;
color:#fff;
font:normal 12px Arial, Helvetica, sans-serif;
text-decoration:none;
}
.menu ul li a span {
padding:20px 10px;
background:none;
}
.menu ul li a:hover {
color:#8bbe43;
background:url(greenzap-images/r_menu.gif) no-repeat right;
}
.menu ul li a:hover span {
color:#8bbe43;
background:url(greenzap-images/l_menu.gif) no-repeat left;
}
.menu ul li a.active {
color:#8bbe43;
background:url(greenzap-images/r_menu.gif) no-repeat right;
}
.menu ul li a.active span {
color:#8bbe43;
background:url(greenzap-images/l_menu.gif) no-repeat left;
}
.search {
padding:10px 0 0 0;
margin:0;
width:320px;
float:right;
}
.search form {
display:block;
float:right;
padding:0;
}
.search span {
display:block;
float:left;
background:url(greenzap-images/search_bg.gif) left top no-repeat;
width:151px;
padding:0 5px 0 0;
height:33px;
}
.search form .keywords {
line-height:14px;
height:17px;
float:left;
background:url(greenzap-images/search_bg.gif) left top no-repeat;
border:0;
padding:5px 5px;
margin:0;
font:normal 12px Arial, Helvetica, sans-serif;
color:#000;
}
.search form .button {
float:left;
margin:0;
padding:0;
}
.headert_text_resize {
width:970px;
padding:0;
margin:0 auto;
}
.headert_text_resize img {
float:right;
margin:0;
padding:15px 0;
}
.body_resize {
margin:0 auto;
padding:0;
width:970px;
}
.body {
margin:0;
padding:0;
}
.body h2 {
font:bold 24px Arial, Helvetica, sans-serif;
color:#323a3f;
padding:10px 5px;
margin:5px 0 10px 0;
}
.body h2 span {
color:#959595;
font:normal 12px Arial, Helvetica, sans-serif;
}
.body p {
font:normal 12px Arial, Helvetica, sans-serif;
color:#5f5f5f;
padding:5px;
margin:0;
line-height:1.8em;
}
.body img {
float:left;
margin:5px;
padding:0;
}
.body img.floated {
float:right;
margin:5px 10px 5px 0;
padding:0;
}
.body a {
color:#97c950;
text-decoration:underline;
}
.left {
float:left;
width:614px;
margin:0;
padding:0 25px;
background:url(greenzap-images/l_bg.gif) top center no-repeat;
}
.right {
float:right;
width:255px;
margin:0;
padding:0 25px;
background:url(greenzap-images/r_bg.gif) top center no-repeat;
}
.right ul {
list-style:none;
margin:5px 0;
padding:0;
}
.right li {
background:10px 10px no-repeat;
font:normal 14px Arial, Helvetica, sans-serif;
color:#464646;
padding:5px 0;
margin:3px 0;
}
.right li a {
padding:0 0 0 5px;
margin:0;
font:bold 17px Arial, Helvetica, sans-serif;
color:#97c950;
text-decoration:none;
}
.right li a:hover {
color:#5f5f5f;
text-decoration:none;
}
.right ul.sponsors {
list-style:none;
margin:5px 0;
padding:0;
}
.right li.sponsors {
background:none;
font:normal 12px Arial, Helvetica, sans-serif;
color:#5f5f5f;
padding:8px 0;
}
.right li.sponsors a {
padding:0 0 0 0px;
margin:0;
font:normal 13px Arial, Helvetica, sans-serif;
color:#97c950;
text-decoration:none;
}
.right li.sponsors strong {
color:#97c950;
}
.FBG_resize {
margin:0 auto;
padding:0;
width:970px;
}
.FBG {
margin:0;
padding:0;
border-top:1px solid #dcdad8;
}
.FBG img {
float:left;
margin:5px 10px 5px 0;
padding:0;
}
.FBG h2 {
font:bold 24px Arial, Helvetica, sans-serif;
color:#323a3f;
padding:10px 5px;
margin:5px 0 10px 0;
}
.FBG p {
font:normal 12px Arial, Helvetica, sans-serif;
color:#5f5f5f;
padding:5px;
margin:0;
line-height:1.8em;
}
.FBG a {
color:#97c950;
text-decoration:underline;
}
.FBG ul {
list-style:none;
margin:5px 0;
padding:0;
}
.FBG li {
background:10px 10px no-repeat;
font:normal 14px Arial, Helvetica, sans-serif;
color:#464646;
padding:5px 0;
margin:3px 0;
}
.FBG li a {
padding:0 0 0 5px;
margin:0;
font:normal 13px Arial, Helvetica, sans-serif;
color:#5f5f5f;
text-decoration:none;
}
.FBG li a:hover {
color:#97c950;
text-decoration:none;
}
.FBG .blok {
width:280px;
float:left;
padding:10px 20px;
margin:0;
}
.footer_resize {
margin:0 auto;
padding:25px 15px;
width:940px;
background:#97c950;
color:#fff;
font:normal 12px Arial, Helvetica, sans-serif;
}
.footer {
padding:0;
margin:10px auto;
}
.footer p {
margin:0;
padding:4px 0;
line-height:normal;
color:#fff;
}
.footer a {
color:#fff;
padding:inherit;
text-decoration:underline;
}
.footer a:hover {
text-decoration:none;
}
.footer .lf {
float:left;
}
.footer .rf {
float:right;
}
#contactform {
margin:0;
padding:5px;
}
#contactform * {
color:#F00;
}
#contactform ol {
margin:0;
padding:0;
list-style:none;
}
#contactform li {
margin:0;
padding:0;
background:none;
border:none;
display:block;
clear:both;
}
#contactform li.buttons {
margin:5px 0 5px 0;
}
#contactform label {
margin:0;
width:110px;
display:block;
padding:10px 0;
color:#666;
font:normal 12px Arial, Helvetica, sans-serif;
text-transform:capitalize;
float:left;
}
#contactform label span {
color:#F00;
}
#contactform input.text {
width:480px;
border:1px solid #c0c0c0;
margin:2px 0;
padding:5px 2px;
height:16px;
background:#fff;
float:left;
}
#contactform textarea {
width:480px;
border:1px solid #c0c0c0;
margin:2px 0;
padding:2px;
background:#fff;
float:left;
}
#contactform li.buttons input {
border:1px solid #000;
background:#ea7d1b;
padding:10px;
margin:10px 0 0 0px;
color:#fff;
float:left;
font:normal 12px Arial, Helvetica, sans-serif;
}
p.response {
text-align:center;
color:#F00;
font:normal 11px Georgia, "Times New Roman", Times, serif;
line-height:1.8em;
width:auto;
}
</style>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/arial.js"></script>
<script type="text/javascript" src="js/cuf_run.js"></script>
</head>
<body>
<div class="main">
<div class="header">
<div class="header_resize">
<div class="logo">
<h1><a href="index.html"><span>Green</span>Zap<br />
<small>Put your slogan here</small></a></h1>
</div>
<div class="clr"></div>
<div class="menu">
<ul>
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="services.html"><span>Services</span></a></li>
<li><a href="about.html" class="active"><span>About Us</span></a></li>
<li><a href="contact.html"><span>Contact Us</span></a></li>
</ul>
</div>
<div class="search">
<form id="form1" name="form1" method="post" action="#">
<label><span>
<input name="q" type="text" class="keywords" id="textfield" maxlength="50" value="Search..." />
</span>
<input name="b" type="image" src="greenzap-images/search.gif" class="button" />
</label>
</form>
</div>
<div class="clr"></div>
</div>
<div class="headert_text_resize"> <img src="greenzap-images/img_main.jpg" alt="" width="970" height="338" /> </div>
<div class="clr"></div>
</div>
<div class="body">
<div class="body_resize">
<div class="left">
<h2>About Us<br />
<span> March 16, 2010 | Posted by Owner | Filed under templates, internet</span> </h2>
<div class="clr"></div>
<p><a href="#">Lorem ipsum dolor sit amet, consectetur </a>adipiscing elit. Sed euismod aliquet nunc vel porta. Morbi non mi id diam mattis consequat. Mauris pharetra fermentum tortor quis sagittis. Fusce rutrum ipsum lectus, vel congue velit. Nulla ultrices pretium congue. Mauris metus nibh, pulvinar vel vehicula eu, pharetra id ante. Vivamus tincidunt semper sapien ut fermentum. Nullam facilisis, nulla eu suscipit vulputate, libero nisl pellentesque tellus, ac scelerisque metus mauris ut quam. Nulla facilisi. Quisque rhoncus dolor et dolor lobortis accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse at nulla ante, at hendrerit mi. Aenean in ipsum massa. Pellentesque semper elit quis mauris ultricies ultrices. Sed sit amet felis tellus. Suspendisse potenti.</p>
<p>Pellentesque elementum, felis nec vulputate facilisis, ligula mauris suscipit mi, id imperdiet metus quam sed erat. Mauris lectus ligula, scelerisque quis cursus eu, lacinia eu magna. Donec et orci justo. Donec id quam turpis. Curabitur sit amet fermentum turpis. Etiam blandit accumsan purus ut sodales. Maecenas ante risus, facilisis vel semper a, venenatis ut dui.</p>
<p><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a> Sed euismod aliquet nunc vel porta. Morbi non mi id diam mattis consequat. Mauris pharetra fermentum tortor quis sagittis. Fusce rutrum ipsum lectus, vel congue velit. Nulla ultrices pretium congue. Mauris metus nibh, pulvinar vel vehicula eu, pharetra id ante. Vivamus tincidunt semper sapien ut fermentum. Nullam facilisis, nulla eu suscipit vulputate, libero nisl pellentesque tellus, ac scelerisque metus mauris ut quam. Nulla facilisi. Quisque rhoncus dolor et dolor lobortis accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse at nulla ante, at hendrerit mi. Aenean in ipsum massa. Pellentesque semper elit quis mauris ultricies ultrices. Sed sit amet felis tellus. Suspendisse potenti.</p>
<p><a href="#">Read more | Comments (5)</a></p>
</div>
<div class="right">
<h2>Sidebar Menu</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">TemplateInfo</a></li>
<li><a href="#">Style Demo</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Archives</a></li>
</ul>
</div>
<div class="clr"></div>
</div>
</div>
<div class="FBG">
<div class="FBG_resize">
<div class="blok">
<h2><span>Image</span> Gallery</h2>
<img src="greenzap-images/gallery_1.gif" alt="" width="68" height="68" /><img src="greenzap-images/gallery_2.gif" alt="" width="68" height="68" /><img src="greenzap-images/gallery_3.gif" alt="" width="68" height="68" /><img src="greenzap-images/gallery_4.gif" alt="" width="68" height="68" /><img src="greenzap-images/gallery_5.gif" alt="" width="68" height="68" /><img src="greenzap-images/gallery_6.gif" alt="" width="68" height="68" />
<div class="clr"></div>
<h2>Contact Info </h2>
<p><strong>Phone</strong>: +1234567<br />
<strong>Address</strong>: 123 Put Your Address Here <br />
<strong>E-mail:</strong> me@jungleland.com<br />
<a href="#">contact page</a></p>
</div>
<div class="blok">
<h2><span>Lorem</span> Ipsum</h2>
<p>Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. <br />
Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam.</p>
<ul>
<li><a href="#">? consequat molestie</a></li>
<li><a href="#">? sem justo</a></li>
<li><a href="#">? semper</a></li>
<li><a href="#">? magna sed purus</a></li>
</ul>
</div>
<div class="blok">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. llorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. <a href="#">Learn more...</a></p>
<p><br />
</p>
</div>
<div class="clr"></div>
</div>
</div>
<div class="footer">
<div class="footer_resize">
<p class="lf">© Copyright <a href="#">MyWebSite</a>.</p>
<p class="rf">Layout by Hot <a href="http://www.hotwebsitetemplates.net/">Website Templates</a></p>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
</div>
</body>
</html>
Related examples in the same category