ecologyportal
<!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>Ecology Portal</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
/*
A portal template - let me know what ya use it for! collingrasley@gmail.com
*/
body {
color: #303030;
background:#fff url(ecologyportal-images/bg.gif) repeat-x;
font: .72em Arial, Verdana, sans-serif;
text-align: center;
line-height: 1.6em;
margin: 0 auto;
}
/* --------------All The Pretty Things------------------------------*/
a {
color: #01492a;
font-weight:bold;
text-decoration:none;
background: inherit;
}
a:hover {
color: #000;
background: inherit;
}
h2 {
font-size: 1.1em;
margin-left: 4px;
color: #5e5e5e;
text-transform:uppercase;
}
ul {
margin: .6em 0;
padding: 0;
}
.highlight {
color: #1f5301;
font-size:14px;
font-weight: bolder;
}
.highlighttwo {
color: #3c7c1d;
font-size:16px;
font-weight: bolder;
}
.image {
float: left;
clear: left;
background: #eee;
color: #000;
margin: 0 12px 10px 0;
}
.big {
float:left;
color:#5e5e5e;
font-size:50px;
line-height:30px;
padding: 4px 4px;
font-family: "Times New Roman", times, Sans-Sherif;
background:inherit;
}
/* --------------The Main Content------------------------------*/
#wrapper {
width: 850px;
background: #fff;
margin: 0 auto;
padding:4px;
text-align: left;
border-left: 1px solid #666;
border-right: 1px solid #666;
}
#header-{
width: 850px;
height: 50px;
margin: 0 0 4px 0;
background:url(ecologyportal-images/header.jpg) no-repeat;
border-bottom: 1px dotted #DCDBD5;
}
#header-h1 {
float: left;
color: #fff;
margin: 15px 0 0 55px;
padding: 0;
font-size: 1.6em;
}
#pic{
margin-bottom: 6px;
width: 850px;
height: 250px;
background:#fff url(ecologyportal-images/pic.jpg) no-repeat;
}
#quote {
float: right;
margin: 4px 22px 8px 8px;
color: #5e5e5e;
font: 17px Georgia, "Times New Roman", Times, serif;
}
/* -----BOTH MENUES START HERE------------------------------*/
/* --------------Top Left Vertical Menu------------------------------*/
#leftmenu {
position: relative;
width: 300px;
height: 250px;
float: left;
clear:both;
}
#nav {
width: 300px;
padding: 0;
margin-bottom: 0px;
font-size: 10px;
font-family: Verdana;
color: #333;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#nav li {
border-bottom: 1px solid #fff;
margin: 0;
width: auto;
}
#nav li a {
display: block;
padding: 3px 0px 2px 15px;
color: #fff;
text-transform:uppercase;
font-weight:bold;
text-decoration: none;
width: auto;
background:#5e5e5e url(ecologyportal-images/menuarrow.gif) no-repeat center left;
}
#nav li a:hover {
color: #fff;
padding: 3px 0px 2px 30px;
background: #999 url(ecologyportal-images/menuarrowhover.gif) no-repeat center left;;
font-weight:bold;
}
/* --------------Horizontal Menu Starts Here------------------------------*/
#menu {
clear: both;
margin: 0 0 10px 0;
padding: 7px 0 7px 10px;
border-top: 1px dotted #DCDBD5;
}
#menu li {
display: inline;
}
#menu a {
padding: 3px 3px;
margin: 0 3px 0 3px;
text-decoration: none;
color: #5e5e5e;
font-weight: bold;
border-bottom: 4px solid #5e5e5e;
}
#menu a:hover {
border-bottom: 4px solid #01492a;
color: #444;
}
/* --------------The Meat And Potatoes------------------------------*/
.clear {
clear: both;
margin: 0 0 2px 0;
}
.box {
float: left;
width: 30%;
margin: 2px 0 0 14px;
background: #fff;
color: #303030;
padding: 2px 2px 0 4px;
border: #eee 1px solid;
}
.box h1 {
margin: 2px 0;
padding: 0;
color: #5e5e5e;
background: inherit;
font-size: 1.1em;
text-transform:uppercase;
}
.contentbox {
float: left;
width: 47%;
margin: 7px 7px;
background: #fff;
color: #303030;
border: #eee 1px solid;
padding: 4px 4px;
}
.link {
border-top: 1px solid #eee;
padding: 2px 0;
}
.data {
background: #fff;
color: #808080;
padding: 2px 5px;
margin: 8px 8px;
border: #eee 1px solid;
}
#resources {
clear: both;
background: #fff;
padding: 5px 5px;
margin: 0 0 5px 0;
color: #000;
}
.resources {
float: left;
margin: 2px 0 0 12px;
width: 28%;
padding: 0 0px 0 25px;
border: #eee 1px solid;
}
#footer {
margin: 20px 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>ECOLOGY PORTAL</h1>
</div>
<div id="pic">
<div id="leftmenu">
<div id="nav">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Global Warming?</a></li>
<li><a href="http://www.free-css.com/">Water: Renewable Resource?</a></li>
<li><a href="http://www.free-css.com/">Composting 101</a></li>
<li><a href="http://www.free-css.com/">Recycling 101</a></li>
<li><a href="http://www.free-css.com/">Rain Barrels</a></li>
<li><a href="http://www.free-css.com/">A Pesticide Free Home</a></li>
<li><a href="http://www.free-css.com/">Wind Power</a></li>
<li><a href="http://www.free-css.com/">Solar Power</a></li>
<li><a href="http://www.free-css.com/">Public Transit: How We All Benefit</a></li>
</ul>
</div>
</div>
</div>
<p id="quote">"There is something fundamentally wrong with treating the earth as if it were a business in liquidation."
~ Herman Daly</p>
<ul id="menu">
<li><a href="http://www.free-css.com/">01. HOME</a></li>
<li><a href="http://www.free-css.com/">02. ABOUT US</a></li>
<li><a href="http://www.free-css.com/">03. PROGRAMS</a></li>
<li><a href="http://www.free-css.com/">04. E-LEARNING</a></li>
<li><a href="http://www.free-css.com/">05. RESOURCES</a></li>
<li><a href="http://www.free-css.com/">06. CONTACT US</a></li>
<li><a href="http://www.free-css.com/">07. SITE MAP</a></li>
</ul>
<div class="data">
<p> <span class="big">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit,<span class="highlight"> sed diam nonummy nibh euismod tincidunt</span> ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit<span class="highlighttwo"> praesent luptatum zzril delenit augue duis</span> dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>
<div class="box">
<h1>Make Your Own Composter</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea <a href="http://www.free-css.com/">commodo consequat</a></p>
</div>
<div class="box">
<h1>Buy Bulk - Reduce waste</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea <a href="http://www.free-css.com/">commodo consequat</a></p>
</div>
<div class="box">
<h1>Preserving Your Neighbourhood eco-system</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut <a href="http://www.free-css.com/">aliquip ex ea</a></p>
</div>
<div class="clear"></div>
<div class="contentbox">
<h2>Reduce Your Trash!</h2>
<p> <img src="ecologyportal-images/01.jpg" alt="" width="159" height="200" class="" /><span class="big">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<span class="highlighttwo"> praesent luptatum zzril delenit augue duis</span> velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
<p class="link"> <a href="http://www.free-css.com/">Further Reading</a> >></p>
</div>
<div class="contentbox">
<h2>save our wetlands</h2>
<p> <img src="ecologyportal-images/02.jpg" alt="" width="159" height="200" class="" /><span class="big">C</span>onsectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<span class="highlight"> praesent luptatum zzril </span> velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
<p class="link"> <a href="http://www.free-css.com/">Further Reading</a> >></p>
</div>
<div class="clear"></div>
<div id="resources">
<div class="resources">
<ul>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
</ul>
</div>
<div class="resources">
<ul>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
</ul>
</div>
<div class="resources">
<ul>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div id="footer">
<p> © Copyright Ecology Portal - <a href="http://www.openDesigns.org/">TODC</a><br />
<a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">About Us</a> | <a href="http://www.free-css.com/">Programs</a> | <a href="http://www.free-css.com/">e-Learning</a> | <a href="http://www.free-css.com/">Contact Us</a> | <a href="mailto:collingrasley@gmail.com">Coll23</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category