grassy : Natural « Templates « HTML / CSS

grassy

    

<!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>Grassy</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/*
Author:    Donny Burnside
Website:  http://www.ginger-ninja.net/
*/

/* Misc. */

* {
  margin:0;
  padding:0;
  }
body {
  font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
  font-size:12px;
  background-color:#2D302C;
  background-image:url(grassy-images/bg-body.gif);
  color:#222222;
  }
a {
  color:#222222;
  text-decoration:none;
  }
a:hover {
  color:#CCDE8D;
  }
img {
  border:0;
  }
p {
  margin-bottom:20px;
  line-height:20px;
  }

/* Structure */

#wrapper {
  margin:0 auto;
  width:780px;
  background-color:#454943;
  background-image:url(grassy-images/bg-wrapper.gif);
  background-repeat:repeat-y;
  background-position:right;
  border-left:1px solid #CCDE8D;
  border-right:1px solid #CCDE8D;
  }
#header {
  height:120px;
  background-image:url(grassy-images/header.jpg);
  background-repeat:no-repeat;
  padding:0 10px;
  }
#nav {
  height:35px;
  line-height:35px;
  background-image:url(grassy-images/bg-navigation-bar.gif);
  background-repeat:repeat-x;
  padding:0 10px;
  }
#sidebar {
  float:right;
  width:180px;
  background-color:#ffffff;
  min-height:450px;
  border:1px solid #2D302C;
  margin:10px;
  padding:5px;
  min-height:400px;
  }
#content {
  width:520px;
  float:left;
  background-color:#ffffff;
  min-height:450px;
  border:1px solid #2D302C;
  margin:10px;
  padding:5px;
  }
#footer {
  clear:both;
  text-align:right;
  padding:10px;
  margin-top:-10px;
  color:#ffffff;
  font-size:11px;
  line-height:15px;
  }
#footer-links {
  float:left;
  line-height:30px;
  }

/* Navigation */

#nav ul {
  list-style-type:none;
  }
#nav li {
  float:left;
  text-align:center;
  margin-right:10px;
  text-transform:uppercase;
  }
#nav li a {
  display:block;
  padding:0 15px;
  font-size:10px;
  color:#ffffff;
  text-decoration:none;
  }
#nav li a:hover {
  background-image:url(grassy-images/bg-navigation-bar-hover.gif);
  background-position:center;
  background-repeat:no-repeat;
  color:#222222;
  }

/* Sidebar */

#sidebar ul {
  list-style-type:none;
  margin-bottom:20px;
  }
#sidebar li {
  
  }

/* Headings */

h1 a {
  color:#A6C639;
  text-decoration:none;
  font-weight:normal;
  font-size:24px;
  }
h2 {
  color:#A6C639;
  text-decoration:none;
  font-weight:normal;
  font-size:20px;
  }
h3 a {
  font-size:30px;
  font-weight:normal;
  letter-spacing:-1px;
  color:#ffffff;
  text-decoration:none;
  }

/* Extra's */

.title1 {
  color:#ffffff;
  }
.title2 {
  color:#222222;
  font-style:italic;
  }
.description {
  font-size:12px;
  font-style:italic;
  color:#ffffff;
  padding-left:20px;
  }
.meta {
  color:#777777;
  border-bottom:1px dashed #777777;
  padding-bottom:2px;
  margin-bottom:8px;
  }
.comments {
  margin-top:-10px;
  text-align:right;
  margin-bottom:20px;
  }
.comments a {
  text-decoration:underline;
  }
#footer-links a {
  color:#ffffff;
  text-decoration:none;
  font-weight:bold;
  }
#footer-links a:hover {
  color:#CCDE8D;
  }

</style>


</head>
<body>
<div id="wrapper">
  <div id="header">
    <div style="padding-top:35px;">
      <h3><a href="http://www.free-css.com/"><span class="title1">Ginger</span><span class="title2">Ninja!</span></a></h3>
    </div>
    <div class="description">Web design &amp; Development</div>
  </div>
  <div id="nav">
    <ul>
      <li><a href="http://www.free-css.com/">Home</a></li>
      <li><a href="http://www.free-css.com/">Templates</a></li>
      <li><a href="http://www.free-css.com/">Tutorials</a></li>
      <li><a href="http://www.free-css.com/">About</a></li>
      <li><a href="http://www.free-css.com/">Contact</a></li>
    </ul>
  </div>
  <div id="sidebar">
    <h2>Recent Entries</h2>
    <ul>
      <li><a href="http://www.free-css.com/">New design</a></li>
      <li><a href="http://www.free-css.com/">New design</a></li>
      <li><a href="http://www.free-css.com/">New design</a></li>
      <li><a href="http://www.free-css.com/">New design</a></li>
    </ul>
  </div>
  <div id="content">
    <div class="entry">
      <h1><a href="http://www.free-css.com/">New design</a></h1>
      <div class="meta"> Posted on 1st September 2006</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. 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="comments"> <a href="http://www.free-css.com/">3 comments</a> &middot; <a href="http://www.free-css.com/">Templates</a></div>
    </div>
    <div class="entry">
      <h1><a href="http://www.free-css.com/">New design</a></h1>
      <div class="meta"> Posted on 1st September 2006</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. 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="comments"> <a href="http://www.free-css.com/">3 comments</a> &middot; <a href="http://www.free-css.com/">Templates</a></div>
    </div>
  </div>
  <div id="footer">
    <div id="footer-links"> <a href="http://www.free-css.com/">Home</a> &middot; <a href="http://www.free-css.com/">Templates</a> &middot; <a href="http://www.free-css.com/">Tutorials</a> &middot; <a href="http://www.free-css.com/">About</a> &middot; <a href="http://www.free-css.com/">Contact</a></div>
    &copy; 2006 Your-Website.com | <a href="http://www.free-css.com/">XHTML</a><br />
    Design by <a href="http://www.ginger-ninja.net/">Ginger Ninja!</a></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.	freecss_natural
35.	ftdgalaxy
36.	ftdgreenature
37.	natural-blues
38.	naturalbeauties
39.	natural_blues
40.	nature-theme
41.	nature
42.	naturescharm
43.	Nature_Green
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