Nature_Green : Natural « Templates « HTML / CSS

Nature_Green
   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Alicia A Jasmine
http://www.100webhosting.com
Released for free under a Creative Commons Attribution 3.0 License

Name       : Nature Green   
Description: A two-column, fixed-width design with green color scheme.
Version    : 1.0
Released   : 23-08-2010

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Nature Green by 100 Web Hosting</title>
<style type='text/css'>

/*
Design by Alicia A Jasmine
http://www.100webhosting.com
Released for free under a Creative Commons Attribution 3.0 License
*/

body {
  margin: 0;
  padding: 0;
  background: #FFFFFF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #616161;
}

h1, h2, h3 {
  margin: 0;
  padding: 0;
  font-weight: normal;
  color: #3E3530;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 2.8em;
}

h3 {
  font-size: 1.6em;
}

p, ul, ol {
  margin-top: 0;
  line-height: 180%;
}

ul, ol {
}

a {
  text-decoration: none;
  color: #00970e;
}

a:hover {
  text-decoration: underline;
  color: #05590d;
}


#wrapper {
  margin: 0 auto;
  padding: 0;
}

/* Header */

#header-wrapper {
  height: 100px;
  background: #44900c;
  border-bottom: 10px solid #76b746;
}

#header {
  width: 950px;
  margin: 0 auto;
  padding: 0px 0px 0px 30px;
}

/* Logo */

#logo {
  float: left;
  width: 450px;
  margin: 0;
  padding: 0;
  color: #000000;
  background: url(Nature_Green-images/logo.png) no-repeat left 15px;
}

#logo h1, #logo p {
}

#logo h1 {
  margin-left: 60px;
  padding: 40p 0px 0px 80px;
  letter-spacing: -1px;
  font-size: 3.8em;
  background: redc;
}

#logo p {
  margin: 0;
  padding: 0px 0 0 62px;
  font: normal 14px Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  color: #FFFFFF;
} 

#logo a {
  border: none;
  background: none;
  text-decoration: none;
  color: #FFFFFF;
}

/* Search */

#search {
  float: right;
  width: 280px;
  height: 60px;
  padding: 20px 0px 0px 0px;
}

#search form {
  height: 41px;
  margin: 0;
  padding: 10px 0 0 20px;
}

#search fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

#search-text {
  width: 170px;
  padding: 6px 5px 2px 5px;
  border: 1px solid #DEDEDE;
  background: #FFFFFF;
  text-transform: lowercase;
  font: normal 11px Arial, Helvetica, sans-serif;
  color: #5D781D;
}

#search-submit {
  width: 50px;
  height: 22px;
  border: none;
  background: #B9B9B9;
  color: #000000;
}

/* Menu */

#menu {
  float: right;
  width: 450px;
  height: 90px;
  margin: 0 auto;
  padding: 0;
}

#menu ul {
  margin: 0;
  padding: 60px 0px 0px 0px;
  list-style: none;
  line-height: normal;
}

#menu li {
  float: left;
}

#menu a {
  display: block;
  margin-right: 1px;
  padding: 10px 15px 15px 15px;
  text-decoration: none;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #FFFFFF;
  border: none;
}

#menu a:hover, #menu .current_page_item a {
  background: #76b746;
  text-decoration: none;
}

#menu .current_page_item a {
}

/* Page */

#page {
  width: 980px;
  margin: 0 auto;
  padding: 0px 0px 0px 0px;
}

#page-bgtop {
  padding: 20px 0px;
}
/* Content */

#content {
  float: left;
  width: 650px;
  padding: 0px 0px 0px 0px;
}

.post {
  margin-bottom: 20px;
  border-bottom: 1px dotted #E7E2DC;
}

.post .title {
  height: 41px;
  padding: 7px 0px 0px 30px;
  letter-spacing: -.5px;
}

.post .title a {
  color: #53180f;
  border: none;
}

.post .title a:hover {
  color: #9b3728;
}

.post .meta {
  margin-bottom: 30px;
  padding: 0px 30px 0px 30px;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
  font-style: italic;
}

.post .meta .date {
  float: left;
}

.post .meta {
  float: right;
}

.post .meta a {
}

.post .entry {
  padding: 0px 30px 20px 30px;
  padding-bottom: 20px;
  text-align: justify;
}


/* Sidebar */

#sidebar {
  float: right;
  width: 280px;
  margin: 0px;
  padding: 0px 20px 0px 0px;
  color: #787878;
}

#sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#sidebar li {
  margin: 0;
  padding: 0;
}

#sidebar li ul {
  margin: 0px 0px;
  padding-bottom: 30px;
}

#sidebar li li {
  line-height: 35px;
  border-bottom: 1px dotted #E7E2DC;
  margin: 0px 30px;
  border-left: none;
}

#sidebar li li span {
  display: block;
  margin-top: -20px;
  padding: 0;
  font-size: 11px;
  font-style: italic;
}

#sidebar li li a {
  padding: 0px 0px 0px 15px;
  background: url(Nature_Green-images/icon.jpg) no-repeat left 5px;
}

#sidebar h2 {
  height: 38px;
  padding-left: 30px;
  letter-spacing: -.5px;
  font-size: 1.8em;
}

#sidebar p {
  margin: 0 0px;
  padding: 0px 30px 20px 30px;
  text-align: justify;
}

#sidebar a {
  border: none;
  color: #00970e;
}

#sidebar a:hover {
  text-decoration: underline;
  color: #05590d;
}

/* Calendar */

#calendar {
}

#calendar_wrap {
  padding: 20px;
}

#calendar table {
  width: 100%;
}

#calendar tbody td {
  text-align: center;
}

#calendar #next {
  text-align: right;
}

/* Footer */

#footer {
  height: 50px;
  margin: 0 auto;
  padding: 0px 0 15px 0;
  background: #376a11;
  border-top: 1px solid #1c3c04;
  font-family: Arial, Helvetica, sans-serif;
}

#footer p {
  margin: 0;
  padding-top: 20px;
  line-height: normal;
  font-size: 12px;
  text-align: center;
  color: #FFFFFF;
}

#footer a {
  color: #FFFFFF;
}

</style>


</head>
<body>
<div id="wrapper">
  <div id="header-wrapper">
    <div id="header">
      <div id="logo">
        <h1><a href="#">Nature Green</a></h1>
        <p> designed by 100 Web Hosting</p>
      </div>
      <div id="menu">
        <ul>
          <li class="current_page_item"><a href="#">Home</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- end #header -->
  <div id="page">
    <div id="page-bgtop">
      <div id="page-bgbtm">
        <div id="content">
          <div class="post">
            <h2 class="title"><a href="#">Welcome to Nature Green</a></h2>
            <div style="clear: both;">&nbsp;</div>
            <div class="entry">
              <img src="Nature_Green-images/nature-green.jpg" alt="Nature Green" />
              <br /><br />
              <p>This is <strong>Nature Green</strong>, a standards-compliant CSS template designed by <a href="http://www.100webhosting.com/">100 Web Hosting</a>. This web template is released under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0</a> license, so you are free to use it for your website (even use it commercially) provided you keep the links in the footer intact. Other than that, you can customize it freely.</p>
              <p>If you plan to get a web hosting plan, make sure you check out <a href="http://www.100webhosting.com">100 Web Hosting</a> - an independent web hosting reviews, ratings and comparison resource.</p>
            </div>
          </div>
          <div class="post">
            <h2 class="title"><a href="#">Lorem ipsum sed aliquam</a></h2>
            <div style="clear: both;">&nbsp;</div>
            <div class="entry">
              <p>Etiam vehicula, augue eu ultricies dictum, orci nisi suscipit sem, nec sollicitudin neque est ac massa. Phasellus elementum nibh vel odio. Proin orci nulla, viverra tempus, pharetra ut, varius nec, justo. Donec euismod molestie erat. Nulla lobortis bibendum magna. Nulla adipiscing justo eu erat.</p>
              <p>Phasellus elementum nibh vel odio. Proin orci nulla, viverra tempus, pharetra ut, varius nec, justo. Donec euismod molestie erat.</p>
            </div>
          </div>
          <div style="clear: both;">&nbsp;</div>
        </div>
        <!-- end #content -->
        <div id="sidebar">
          <ul>
            <li>
              <div id="search" >
                <form method="get" action="#">
                  <div>
                    <input type="text" name="s" id="search-text" value="" />
                    <input type="submit" id="search-submit" value="GO" />
                  </div>
                </form>
              </div>
              <div style="clear: both;">&nbsp;</div>
            </li>
            <li>
              <h2>About Us</h2>
              <p>We provide corporate and government agencies with top customer support, dedicated and customised solutions coupled with up-to-date technologies.</p>
            </li>
            <li>
              <h2>Our Services</h2>
              <ul>
                <li><a href="#">Starter Web Hosting</a></li>
                <li><a href="#">Business Web Hosting</a></li>
                <li><a href="#">VPS Servers</a></li>
                <li><a href="#">Dedicated Servers</a></li>
                <li><a href="#">Templated Web Design</a></li>
                <li><a href="#">Custom Web Design</a></li>
              </ul>
            </li>
            <li>
              <h2>Latest Clients</h2>
              <ul>
                <li><a href="#">Top 100 Web Hosting</a></li>
                <li><a href="#">Free Web Templates</a></li>
                <li><a href="#">WordPress Themes</a></li>
                <li><a href="#">Company Name</a></li>
                <li><a href="#">Another Company Name</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <!-- end #sidebar -->
        <div style="clear: both;">&nbsp;</div>
      </div>
    </div>
  </div>
  <!-- end #page -->
</div>
<div id="footer">
  <!-- Please leave the link to http://www.100webhosting.com intact -->
  <p>Copyright &copy; 2010 <a href="#"><strong>YourSite.com</strong></a> | Design by <a href="http://www.100webhosting.com/"><strong>100 Web Hosting</strong></a>.</p>
</div>
<!-- end #footer -->
</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.	countryside
45.	environment-brand
46.	EcoMania
47.	eco-design
48.	ecologyportal
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