green-solutions
<!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>Green Solutions</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body
{
background: #F2F2F2 url('green-solutions-images/bg.gif') repeat-x;
margin: 0px;
padding: 0px;
}
.input{
width:140px;
height:15px;
font-size:12px;
color: #666666;
}
p{
clear:both;
width:auto;
color:#042254;
padding:0px;
text-align:justify;
}
img.pic{
float:left;
padding:10px;
margin:10px 0 10px 0;
border:1px #CCCCCC solid;
}
.title{
color: #042254;
font-size:18px;
padding:15px 10px 5px 40px;
border-bottom:1px #CCCCCC dashed;
margin-top:10px;
text-decoration:none;
line-height:15px;
}
.more{
clear:both;
padding:2px;
}
#main_container{
width:800px;
height:800px;
margin:auto;
background: none;
font-size:12px;
color:#042254;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#top_banner{
width:800px;
height:120px;
margin:auto;
}
#logo{
width:auto;
float:left;
padding-left:20px;
}
/*-------------menu--------------*/
.navigation{
padding-left:140px;
margin:auto;
}
.navigation ul
{
font-family: "trebuchet ms";
font-size: 11px;
text-decoration: none;
margin: 0px;
padding:0px;
list-style: none;
}
.navigation li
{
text-align:center;
display: inline;
text-align: center;
padding: 0px;
float: left;
}
.navigation li a
{
width:85px;
height:30px;
color: #333333;
float: left;
margin: 0px;
padding:5px 0 0 0;
text-decoration: none;
background:url(green-solutions-images/bt.gif) no-repeat center;
background-position:0px 0px;
}
.navigation li a:hover
{
color: #153700;
background:url(green-solutions-images/bt_a.gif) no-repeat center;
background-position:0px 0px;
}
.navigation li.current a
{
color: #153700;
float: left;
margin: 0px;
padding:5px 0 0 0;
text-decoration: none;
background:url(green-solutions-images/bt_a.gif) no-repeat center;
background-position:0px 0px;
}
#center_content{
clear:both;
width:800px;
height:auto;
background-color:#f2f2f2;
}
#left_content{
width:380px;
float:left;
height:auto;
padding:15px;
font-size:11px;
color:#333333;
padding-bottom:50px;
border-right:1px #CCCCCC dashed;
}
#right_content{
width:350px;
float:left;
height:auto;
padding:15px;
font-size:11px;
color:#333333;
padding-bottom:50px;
}
.right_box{
width:330px;
height:auto;
border:1px #9db52b solid;
background:url(green-solutions-images/badget.gif) no-repeat top left #FDFDFD;
background-position:8px 8px;
padding:70px 0 0 10px;
}
/*-------------list------------*/
.list {
color:#042254;
font-weight:bold;
}
.list li span{
color:#9c1e2a;
}
.list ul{
padding:0px;
margin:0px;
}
.list li ul li{
font-weight:normal;
padding:5px;
list-style:none;
margin:5px;
}
.list ul li.description{
color: #000;
font-size:10px;
}
.date{
width:50px;
height:50px;
background:url(green-solutions-images/date.gif) no-repeat center;
background-position:0px 0px;
text-align:center;
color:#fff;
font-size:14px;
font-weight:bold;
padding-top:15px;
float:left;
margin-top:10px;
}
.news_content{
width:290px;
padding:5px;
float:left;
text-align:justify;
border-bottom:1px #CCCCCC dashed;
margin:10px 0 10px 0;
}
/*---------services---------*/
ul.services {
list-style-type:none; display:block; width:auto; height: auto;
margin:0px; padding:10px 0 20px 15px;}
ul.services li {
display:inline;}
a.nav_services:link, a.nav_services:visited {
display:block; padding:1px 0 0 14px; margin:2px;width: auto; height: auto; text-align:left; line-height:17px;
text-decoration:none; background:url(green-solutions-images/bullet.png) no-repeat left; color: #9c1e2a;}
a.nav_services:hover {
display:block; padding:1px 0 0 14px; margin:2px;width:auto; height:auto; text-align:left; line-height:17px;
text-decoration:none; background:url(green-solutions-images/bullet_a.png) no-repeat left; color:#000000;}
/*-------------foooter*/
#footer{
clear:both;
width:auto;
background:url(green-solutions-images/bg_footer.jpg) no-repeat left bottom #5A6F6C;
background-position:0px 40px;
color:#CCCCCC;
height:80px;
padding-top:10px;
text-align:center;
}
</style>
</head>
<body>
<div id="main_container">
<div id="top_banner">
<div id="logo"><a href="http://www.free-css.com/"><img src="green-solutions-images/logo.gif" width="248" height="120" border="0" alt="" /></a></div>
</div>
<div id="center_content">
<div class="navigation">
<ul>
<li class="current"><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About Us</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>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
</ul>
</div>
<div id="left_content">
<div class="title">WELCOME<br />
<span style="color:#9db52b; font-size:14px;">to our company</span> </div>
<img src="green-solutions-images/team.gif" border="0" class="pic" alt="" />
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<div class="more"><a href="http://www.free-css.com/"><img src="green-solutions-images/read_more.gif" width="100" height="30" border="0" alt="" /></a></div>
<div class="title">SERVICES<br />
<span style="color:#9db52b; font-size:14px;">our solutions</span> </div>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
<ul class="services">
<li><a href="http://www.free-css.com/" class="nav_services">Sed ut perspiciatis unde omnis iste</a></li>
<li><a href="http://www.free-css.com/" class="nav_services">Neque porro quisquam est, qui dolorem </a></li>
<li><a href="http://www.free-css.com/" class="nav_services">Sed ut perspiciatis unde omnis iste</a></li>
<li><a href="http://www.free-css.com/" class="nav_services">Sed ut perspiciatis unde omnis iste</a></li>
<li><a href="http://www.free-css.com/" class="nav_services">Neque porro quisquam est, qui dolorem </a></li>
<li><a href="http://www.free-css.com/" class="nav_services">Velit esse quam nihil molestiae consequatur</a></li>
<li><a href="http://www.free-css.com/" class="nav_services">Neque porro quisquam est, qui dolorem </a></li>
<li><a href="http://www.free-css.com/" class="nav_services">Velit esse quam nihil molestiae consequatur</a></li>
<li><a href="http://www.free-css.com/" class="nav_services">Neque porro quisquam est, qui dolorem </a></li>
<li><a href="http://www.free-css.com/" class="nav_services">Velit esse quam nihil molestiae consequatur</a></li>
<li><a href="http://www.free-css.com/" class="nav_services">Neque porro quisquam est, qui dolorem </a></li>
</ul>
<div class="more"><a href="http://www.free-css.com/"><img src="green-solutions-images/read_more.gif" width="100" height="30" border="0" alt="" /></a></div>
</div>
<div id="right_content">
<div class="right_box">
<ol class="list">
<li><span>Sed ut perspiciatis unde omnis iste</span>
<ul>
<li class="description">Velit esse quam nihil molestiae consequatur</li>
</ul>
</li>
<li><span>Neque porro quisquam est</span><br />
<ul>
<li class="description">Sed ut perspiciatis unde omnis iste</li>
</ul>
</li>
<li><span>Money Back Guarantee</span><br />
<ul>
<li class="description">Velit esse quam nihil molestiae consequatur</li>
</ul>
</li>
</ol>
</div>
<div class="title">NEWS & EVENTS<br />
<span style="color:#9db52b; font-size:14px;">latest headlines</span> </div>
<div class="date">6</div>
<div class="news_content"> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div>
<div class="date">8</div>
<div class="news_content"> "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim " </div>
<div class="date">12</div>
<div class="news_content"> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo " </div>
<div class="date">15</div>
<div class="news_content"> "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id " </div>
<div class="more"><a href="http://www.free-css.com/"><img src="green-solutions-images/read_more.gif" width="100" height="30" border="0" alt="" /></a></div>
</div>
<div style="clear:both;"> </div>
</div>
</div>
<div id="footer"> Green Solution.© All Rights Reserved 2007 <br />
<a href="http://www.csscreme.com"><img src="green-solutions-images/csscreme.jpg" width="200" height="35" border="0" alt="csscreme" /></a><br />
<a target="_blank" href="http://validator.w3.org/check?uri=referer" style="text-decoration:none; color:#333333;">Xhtml</a> <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer" style="text-decoration:none; color:#333333;">css</a> </div>
</body>
</html>
Related examples in the same category