ecologyportal : Natural « Templates « HTML / CSS






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> &gt;&gt;</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> &gt;&gt;</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> &copy; 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

1.metamorph_fullmoon
2.metamorph_leaf
3.metamorph_island
4.metamorph_lake
5.metamorph_landscape
6.metamorph_orchid
7.metamorph_orchids
8.metamorph_naturalistic
9.metamorph_naturefield
10.metamorph_grass
11.metamorph_farm
12.metamorph_earth
13.metamorph_planet
14.metamorph_aftertherain
15.metamorph_bythelake
16.metamorph_bamboo
17.alaskan-lake
18.metamorph_valley
19.metamorph_vanillasky_lt
20.metamorph_mountain
21.metamorph_hills
22.metamorph_garden
23.bamboo
24.metamorph_dropsongrass
25.metamorph_shiningearth
26.metamorph_spring
27.metamorph_smallake
28.metamorph_japanesegarden
29.barnyard
30.dawntodark
31.design-garden
32.grass
33.grasse
34.grassy
35.freecss_natural
36.ftdgalaxy
37.ftdgreenature
38.natural-blues
39.naturalbeauties
40.natural_blues
41.nature-theme
42.nature
43.naturescharm
44.Nature_Green
45.countryside
46.environment-brand
47.EcoMania
48.eco-design
49.a_leaf
50.plantation
51.ocean
52.Oceanic
53.oceanlife
54.organic-beauty
55.organic-moss
56.OrganicFruits2
57.organicrhythm
58.snowcrystals
59.thewild
60.thewildwest
61.landscape
62.leaf
63.leafaroma