WonderfulGreen
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Wonderful Green</title>
<style type='text/css'>
body {
text-align:center;
}
a {
text-decoration:none;
}
a:hover{
text-decoration:underline}
#wrap {
width:800px;
text-align:left;
margin:0 auto;
}
#header {
height:155px;
background:url(WonderfulGreen-images/header_bg.gif) no-repeat;
}
#header a {
color:#FFF;
font-weight:700;
}
#header h1 {font-size:38px;padding-top: 32px; padding-left: 80px;}
#header h1 span{font-size:16px}
#logo {
padding-left:60px;
padding-top:22px;
}
ul#nav {
padding-left:80px;
padding-top:18px;
overflow:hidden;
}
ul#nav li {
float:left;
height:50px;
}
ul#nav li a{
height:50px;
padding:0px 35px;
line-height:32px
}
ul#nav li a:hover{
background:url(WonderfulGreen-images/nav_hover.gif) no-repeat;
height:40px;
padding:8px 35px;
line-height:32px
}
#content {
padding:0 30px;
}
#content #left {
width:510px;
float:left;
font-size:13px;
}
#content #left h2 {
font-size:30px;
padding-bottom:20px;
}
#content #right {
width:181px;
float:right;
padding-bottom:30px;
}
#gallery {
background:url(WonderfulGreen-images/gallery_bg.gif) no-repeat;
height:259px;
padding-bottom:20px;
}
#section {
background:url(WonderfulGreen-images/section_bg.gif) no-repeat;
height:189px;
}
#section ul {
padding-left:40px;
padding-top:18px;
}
#section li a {
line-height:20px;
text-decoration:underline;
color:#ef9e06;
}
#section li a:hover {
text-decoration:none;
color:#9D6F4F;
}
#footer {
clear:both;
height:138px;
background:url(WonderfulGreen-images/footer.jpg) no-repeat;
text-align:center;
}
#footer #ftlink {
padding-top:70px;
}
#ftlink, #copyright {
padding-bottom:8px;
}
#copyright a {color:#000000}
#copyright a:hover {
text-decoration: underline;
}
#ftlink, #ftlink a {
color:#ef9e06;
}
#ftlink a:hover {
text-decoration: underline;
color:#9D6F4F;
}
#blog {
height:226px;
background:url(WonderfulGreen-images/content_blog.gif) no-repeat;
margin-top:55px;
}
#blog h2 {
color:#f5c715;
}
#blog .quote {
color:#8a6f00;
}
#blog .first {
padding:25px 30px 0;
}
.blog {
width:190px;
float:left;
padding:25px 20px 0;
}
#right h2 {
font-size:24px;
padding:10px 0 0 15px;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE]>
<style>
ul#nav {
padding-top:17px;
}
</style> <![endif]-->
</head>
<body>
<div id="wrap">
<div id="header">
<h1>Wonderful Green <span>short slogan here</span></h1>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Production</a></li>
<li><a href="#">Submission</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
<div id="left">
<h2>How Green is it ?</h2>
<p> This is Wonderful Green, a free, fully standards-compliant CSS template designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>.
This free template is released under a Creative Commons Attributions 2.5 license, so you?re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :) </p>
<div id="blog">
<div class="blog first">
<h2>Blog #1</h2>
<p class="quote">Lorem Ipsum is not text It has roots in of classical </p>
<p>This is Wonderful Green, a free, fully standards-compliant CSS template designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>... </p>
</div>
<div class="blog ">
<h2>Blog #1</h2>
<p class="quote">Lorem Ipsum is not text It has roots in of classical </p>
<p>This free template is released under a Creative Commons Attributions 2.5 license, so you?re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :) </p>
</div>
</div>
</div>
<div id="right">
<div id="gallery">
<h2>Gallery</h2>
</div>
<div id="section">
<h2>Sections</h2>
<ul>
<li><a href="#">LINKS</a></li>
<li><a href="#">LINKS</a></li>
<li><a href="#">LINKS</a></li>
<li><a href="#">LINKS</a></li>
<li><a href="#">LINKS</a></li>
<li><a href="#">LINKS</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<div id="ftlink"> <a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Production</a> | <a href="#">Submission</a> | <a href="#">Contact</a> </div>
<div id="copyright"> 2008. All Rights Reserved. <br/> <a href="http://www.templatesold.com/" target="_blank">Website Templates</a> by <a href="http://www.free-css-templates.com/" target="_blank">Free CSS Templates</a></div>
<div id="xhtml"><img src="WonderfulGreen-images/xhtml.jpg" alt=" xhtml vaild" /> <img src="WonderfulGreen-images/css.jpg" alt="css vaild" /></div>
</div>
</div>
</body>
</html>
Related examples in the same category