greenpeople
<!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">
<head>
<title>Green People</title>
<style type='text/css'>
* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #666666;
background-color: #FFFFFF;
font-size: 12px;
}
.wrapper {
width: 783px;
margin: 0 auto;
}
/* -------------- Start Navigation Bar ------------- */
.navbar {
margin: 0px 5px 0px 5px;
}
#nav-left {
display: inline; /* IE Hack */
width: 500px;
float: left;
padding: 12px 0px 12px 0px;
}
#nav-right {
margin: 0px 0px 0px 0px;
display: inline; /* IE Hack */
padding: 12px 0px 12px 0px;
width: 258px;
float: left;
text-align: right;
}
/* -------------- End Navigation Bar ------------- */
/* -------------- Start Header ------------- */
#header {
margin: 0px 5px 0px 5px;
text-align: right;
color: #fff;
padding: 8px 18px 0px 5px;
height: 24px;
background-image: url(greenpeople-images/top-header.jpg);
background-repeat: no-repeat;
}
/* -------------- End Header ------------- */
/* -------------- Start Columns ------------- */
#leftcolumn { /* Parent Wrapper for inside boxes */
margin: 10px 0px 0px 5px;
display: inline; /* IE Hack */
width: 321px;
float: left;
}
#centercolumn { /* Parent Wrapper for inside boxes */
margin: 10px 0px 0px 0px;
display: inline; /* IE Hack */
float: left;
width: 263px;
text-align: right;
}
#rightcolumn {
margin: 10px 5px 0px 15px;
display: inline; /* IE Hack */
float: left;
background-image: url(greenpeople-images/daily-links.jpg);
background-repeat: no-repeat;
width: 143px;
min-height: 152px;
padding: 10px 10px 0px 12px;
}
* html #rightcolumn {height: 155px} /* IE Min-Height Hack */
#bottomcolumn {
margin: 10px 0px 20px 31px;
min-height: 23px;
display: inline; /* IE Hack */
float: left;
width: 377px;
text-align: right;
padding-top: 117px;
padding-right: 43px;
background-image: url(greenpeople-images/banner.jpg);
background-repeat: no-repeat;
}
* html #bottomcolumn {height: 23px} /* IE Min-Height Hack */
#leftcontent { /* Parent Wrapper for inside boxes */
margin: 0px 0px 0px 5px;
display: inline; /* IE Hack */
padding: 4px;
width: 500px;
float: left;
min-height: 300px;
}
* html #leftcontent {height:300px} /* IE Min-Height Hack */
#rightcontent {
margin: 0 5px 0px 0px;
padding: 4px;
display: inline; /* IE Hack */
width: 243px;
float: left;
min-height: 300px;
}
* html #rightcontent {height:300px} /* IE Min-Height Hack */
/* -------------- End Columns ------------- */
/* -------------- Start Footer ------------- */
#footer {
background-image:url(greenpeople-images/footer.jpg);
margin: 0px 5px 5px 5px;
display: inline; /* IE Hack */
padding: 17px;
float: left;
color: #fff;
font-weight: bold;
width: 97.7%;
min-height: 44px;
background-repeat: no-repeat;
}
* html #footer {height: 44px} /* IE Min-Height Hack */
/* -------------- End Footer ------------- */
/* -------------- Start Lists ------------- */
ul#utility-links li {
display: inline;
margin-left: 10px;
}
ul#daily-links li {
list-style: none;
margin-left: 2px;
}
ul#nav-links li {
display: inline;
margin-left: 0px;
padding-left: 12px;
}
/* -------------- End Lists ------------- */
/* -------------- Start Links ------------- */
ul#utility-links li a:link{
color: #fff;
text-decoration: none;
}
ul#utility-links li a:visited{
color: #fff;
text-decoration: none;
}
ul#utility-links li a:hover{
color: #fff;
text-decoration: underline;
}
h2 a:link {
font-size: 15px;
text-decoration: none;
color: #12938f;
}
h2 a:visited {
font-size: 15px;
text-decoration: none;
color: #12938f;
}
ul#daily-links li a:link{
color: #333;
text-decoration: none;
font-weight: bold;
}
ul#daily-links li a:visited{
color: #333;
text-decoration: none;
font-weight: bold;
}
ul#daily-links li a:hover{
color: #999;
text-decoration: none;
font-weight: bold;
}
/* -------------- End Links ------------- */
/* -------------- Start Headings ------------- */
h1 {
font-size: 21px;
color: #12938f;
}
h2 {
font-size: 15px;
display: inline;
color: #12938f;
}
/* -------------- End Headings ------------- */
/* -------------- Start Misc ------------- */
img {
border: none;
}
.text {
margin: 0px 5px 0px 5px;
}
#search {
border: 1px solid #999;
}
/* -------------- End Misc ------------- */
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>
<div class="wrapper">
<!-- Start header -->
<div id="header">
<ul id="utility-links">
<li><a href="http://www.free-css.com/">about</a></li>
<li><a href="http://www.free-css.com/">contact</a></li>
<li><a href="http://www.free-css.com/">sitemap</a></li>
</ul>
</div>
<!-- End Header -->
<!-- Start Navigation -->
<div class="navbar">
<div id="nav-left">
<ul id="nav-links">
<li>
<h2><a href="http://www.free-css.com/">Home</a></h2>
</li>
<li>
<h2><a href="http://www.free-css.com/">Services</a></h2>
</li>
<li>
<h2><a href="http://www.free-css.com/">Portfolio</a></h2>
</li>
<li>
<h2><a href="http://www.free-css.com/">Our Team</a></h2>
</li>
<li>
<h2><a href="http://www.free-css.com/">Location</a></h2>
</li>
</ul>
</div>
<div id="nav-right">
<form action="#" method="post">
<p>Search
<input name="search" id="search" />
</p>
</form>
</div>
</div>
<!-- End Navigation -->
<!-- Start Shadow -->
<div class="navbar"> <img src="greenpeople-images/top-diag-stripes.jpg" alt="" /> </div>
<!-- End Shadow -->
<div id="leftcolumn"> <img src="greenpeople-images/people-logo.jpg" alt="Logo and People Artwork" width="321" height="306" /></div>
<div id="centercolumn"> <img src="greenpeople-images/yellow-bubble.jpg" alt="Speech Bubble Area" width="249" /> </div>
<div id="rightcolumn">
<h1>Daily Links</h1>
<ul id="daily-links">
<li><a href="http://www.free-css.com/">Link</a></li>
<li><a href="http://www.free-css.com/">Link</a></li>
<li><a href="http://www.free-css.com/">Wicked Fire</a></li>
<li><a href="http://www.free-css.com/">Code Sucks</a></li>
<li><a href="http://www.free-css.com/">Link</a></li>
<li><a href="http://www.free-css.com/">Link</a></li>
<li><a href="http://www.free-css.com/">CSS Beauty</a></li>
</ul>
</div>
<div id="bottomcolumn"><a href="http://www.free-css.com/"><img src="greenpeople-images/btn-more.gif" alt="" width="40" height="15" /></a>
<!-- put more image here -->
</div>
<!-- Start Main Content Area -->
<div class="wrapper">
<div class="navbar"> <img src="greenpeople-images/mid-shadow.jpg" alt="" /> </div>
<div id="leftcontent">
<div class="text">
<h1>What We Do?</h1>
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>
<br />
<div class="text">
<h1>Why We Do It?</h1>
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>
<br />
<div class="text">
<h1>How We Do It?</h1>
<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>
</div>
<div id="rightcontent">
<h1>In the News</h1>
<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>
<p> </p>
<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</p>
<br />
<p> <a href="http://jigsaw.w3.org/css-validator/"> <img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/greenpeople-images/vcss"
alt="Valid CSS!" /> </a> <a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" height="31" width="88" /> </a> </p>
</div>
</div>
<!-- End Main Content Area -->
<div id="footer">© Copyright with Company.com 2006</div>
</div>
</body>
</html>
Related examples in the same category