evergreen : Green « Templates « HTML / CSS

evergreen

    

<!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>Evergreen</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
  margin: 0;
  padding: 0;
  background: #000000 url(evergreen-images/img1.gif) repeat-x;
  font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #2FCC61;
}

h1, h2, h3, h4, h5, h6 {
  color: #FFFFFF;
}

a {
  color: #00FF51;
}

a:hover {
  text-decoration: none;
  color: #FFFFFF;
}

/* Header */

#header {
  width: 750px;
  height: 200px;
  margin: 0 auto;
  background: url(evergreen-images/img2.jpg) no-repeat center bottom;
}

/* Logo */

#logo {
  float: left;
}

#logo * {
  margin: 0;
  padding: 0;
  text-transform: lowercase;
  color: #FFFFFF;
}

#logo h1 {
  padding: 115px 0 0 0;
  letter-spacing: -3px;
  font-size: 3.5em;
}

#logo h2 {
  letter-spacing: 1px;
  font-size: 1em;
}

/* Menu */

#menu {
  float: right;
}

#menu ul {
  margin: 0;
  padding: 164px 0 0 0;
  list-style: none;
}

#menu li {
  display: inline;
}

#menu a {
  display: block;
  float: left;
  margin-right: 2px;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: lowercase;
  font-size: 1em;
  font-weight: bold;
  color: #FFFFFF;
}

#menu a:hover, #menu .active a {
  background: #000000;
}

/* Content */

#content {
  width: 750px;
  margin: 0 auto;
  padding: 20px 0 0 0;
}

/* Column One */

#colOne {
  float: left;
  width: 500px;
}

#colOne h2 {
  margin-top: 0;
  font-size: 2.2em;
}

#colOne p, #colOne ul, #colOne ol {
  line-height: 160%;
}

#colOne .credits {
  margin-bottom: 20px;
  padding: 5px 0 20px 8px;
  border-bottom: 1px solid #2C2C2C;
}

#colOne .credits p {
  margin: 0;
  padding: 0;
  line-height: normal;
}

/* Column Two */

#colTwo {
  float: right;
  width: 220px;
}

#colTwo ul {
  margin: 0;
  padding: 10px 0 0 0;
  list-style: none;
}

#colTwo li {
  margin-bottom: 20px;
}

#colTwo li li {
  margin-bottom: auto;
}

#colTwo li ul {
  padding-left: 20px;
  list-style: square inside;
}

#colTwo h2 {
  padding-bottom: 5px;
  font-size: 1em;
  color: #FFFFFF;
  padding-left: 20px;
  border-bottom: 1px solid #2C2C2C;
}

#textfield1 {
}

#submit1 {
}

/* Footer */

#footer {
  clear: both;
  width: 750px;
  height: 60px;
  margin: 0 auto;
  padding: 20px 0;
}

#footer p {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: smaller;
}

</style>


</head>
<body>
<div id="header">
  <div id="logo">
    <h1>Evergreen</h1>
    <h2><a href="http://www.free-css.com/">Free CSS Templates</a></h2>
  </div>
  <div id="menu">
    <ul>
      <li class="active"><a href="http://www.free-css.com/">Home</a></li>
      <li><a href="http://www.free-css.com/">My Photos</a></li>
      <li><a href="http://www.free-css.com/">My Friends</a></li>
      <li><a href="http://www.free-css.com/">About Me</a></li>
      <li><a href="http://www.free-css.com/">Contact Me</a></li>
    </ul>
  </div>
</div>
<div id="content">
  <div id="colOne">
    <h2>Welcome to Evergreen!</h2>
    <p><em><strong>Evergreen</strong></em> is a free template from <strong>Free CSS Templates</strong> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The header photo is from PDPhoto.org. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. Enjoy :)</p>
    <h3>Sample Unordered List</h3>
    <ul>
      <li><a href="http://www.free-css.com/">Suspendisse quis gravida massa felis.</a></li>
      <li><a href="http://www.free-css.com/">Vivamus sagittis bibendum erat.</a></li>
      <li><a href="http://www.free-css.com/">Nullam et orci in erat viverra ornare.</a></li>
      <li><a href="http://www.free-css.com/">Suspendisse quis gravida massa felis.</a></li>
      <li><a href="http://www.free-css.com/">Curabitur malesuada turpis nec ante.</a></li>
    </ul>
    <div class="credits">
      <p class="file"><small>January 4th, 2007  by Author</small></p>
      <p class="posted">Posted in <a href="http://www.free-css.com/">Suspendisse iaculis</a> | <a href="http://www.free-css.com/">Edit</a> | <a href="http://www.free-css.com/">23 Comment &raquo;</a></p>
    </div>
    <h3>An Older Post Example</h3>
    <p>Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue:</p>
    <ol>
      <li><a href="http://www.free-css.com/">Suspendisse quis gravida massa felis.</a></li>
      <li><a href="http://www.free-css.com/">Vivamus sagittis bibendum erat.</a></li>
      <li><a href="http://www.free-css.com/">Nullam et orci in erat viverra ornare.</a></li>
      <li><a href="http://www.free-css.com/">Suspendisse quis gravida massa felis.</a></li>
      <li><a href="http://www.free-css.com/">Curabitur malesuada turpis nec ante.</a></li>
    </ol>
    <div class="credits">
      <p class="file"><small>January 4th, 2007  by Author</small></p>
      <p class="posted">Posted in <a href="http://www.free-css.com/">Suspendisse iaculis</a> | <a href="http://www.free-css.com/">Edit</a> | <a href="http://www.free-css.com/">23 Comment &raquo;</a></p>
    </div>
  </div>
  <div id="colTwo">
    <ul>
      <li>
        <form method="get" action="http://www.free-css.com/">
          <div>
            <input type="text" id="textfield1" name="textfield1" value="" size="18" />
            <input type="submit" id="submit1" name="submit1" value="Search" />
          </div>
        </form>
      </li>
      <li>
        <h2>Archives</h2>
        <ul>
          <li><a href="http://www.free-css.com/">January 2007</a></li>
          <li><a href="http://www.free-css.com/">December 2006</a></li>
          <li><a href="http://www.free-css.com/">November 2006</a></li>
          <li><a href="http://www.free-css.com/">October 2006</a></li>
          <li><a href="http://www.free-css.com/">September 2006</a></li>
          <li><a href="http://www.free-css.com/">August 2006</a></li>
          <li><a href="http://www.free-css.com/">July 2006</a></li>
          <li><a href="http://www.free-css.com/">June 2006</a></li>
          <li><a href="http://www.free-css.com/">May 2006</a></li>
          <li><a href="http://www.free-css.com/">April 2006</a></li>
          <li><a href="http://www.free-css.com/">March 2006</a></li>
        </ul>
      </li>
      <li>
        <h2>Categories</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Quisque vestibulum</a> (23)</li>
          <li><a href="http://www.free-css.com/">Sed a nisl a lacus</a> (78)</li>
          <li><a href="http://www.free-css.com/">Quisque sagittis</a> (11)</li>
          <li><a href="http://www.free-css.com/">Etiam volutpat</a> (34)</li>
          <li><a href="http://www.free-css.com/">In aliquet hendrerit</a> (65)</li>
          <li><a href="http://www.free-css.com/">Suspendisse iaculis</a> (35)</li>
          <li><a href="http://www.free-css.com/">Nam vel risus at</a> (22)</li>
          <li><a href="http://www.free-css.com/">Praesent sit amet</a> (54)</li>
        </ul>
      </li>
      <li>
        <h2>Blogroll</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Blog-o-friend.com</a></li>
          <li><a href="http://www.free-css.com/">AnotherFriendlySite.net</a></li>
          <li><a href="http://www.free-css.com/">CoolSite.com</a></li>
          <li><a href="http://www.free-css.com/">MyBestFriend.com</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>
<div id="footer">
  <p>Copyright &copy; 2006 Evergreen. Designed by <a href="http://www.freecsstemplates.org/"><strong>Free CSS Templates</strong></a></p>
</div>
</body>
</html>

Related examples in the same category

1.	metamorph_abstractgreen
2.	metamorph_blueandgreen
3.	metamorph_bluegreen
4.	metamorph_green
5.	metamorph_greenfield
6.	metamorph_greenfish
7.	metamorph_greenice
8.	metamorph_greenisland
9.	metamorph_greenland
10.	metamorph_greenlight_lt
11.	metamorph_greenmint
12.	metamorph_greenplanet
13.	metamorph_greenpound
14.	metamorph_greenwood
15.	metamorph_greeny
16.	cleanandgreen
17.	green-day
18.	green-mile
19.	green-solutions
20.	green-stripes
21.	green-web
22.	greenbusiness
23.	greencastle
24.	greencogs
25.	greencommunity
26.	greener
27.	greenery
28.	greenfeeling
29.	greenfest
30.	greenforest
31.	GreenHome
32.	greenlight
33.	greenorange
34.	greenparks
35.	greenpeace
36.	greenpeople
37.	greenpiece
38.	greenred
39.	GreenSpan
40.	greenspark
41.	GreenSquareShadow
42.	greensteps
43.	greenstripes
44.	greenthumb
45.	greenway
46.	greenworld
47.	GreenWOW
48.	greeny
49.	greenybox
50.	greenygrass
51.	greenylife
52.	greenypat
53.	greenzap
54.	curiouslygreen
55.	gogreen
56.	green piece
57.	green-blog
58.	Green 3
59.	green80
60.	GreeNadReD
61.	greenandplain
62.	Green_Corporate_NMK
63.	Green_dream
64.	Green_Feeling
65.	Green_Glass
66.	green_light
67.	green_mile
68.	Green_Template
69.	green_web
70.	simplygreen
71.	wide-green
72.	WonderfulGreen
73.	soft_green
74.	simplegreen
75.	thingreenline
76.	ibex_green
77.	liquidgreen
78.	leafy_green
79.	Green link template
80.	Green background template