ftdgreenature : Natural « Templates « HTML / CSS

ftdgreenature
    

<!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>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>FlashTemplatesDesign.com free CSS template</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
<style type='text/css'>
/*
Design by Metamorphosis Design
http://www.metamorphozis.com
Released for free under a Creative Commons Attribution 2.5 License
*/

html{
  height: 100%;
}
*{
    margin: 0px;
    padding: 0px;
}

img, fieldset{
    padding: 0px;
    border: none;
}

a{
    color: #666666;
    text-decoration: none;
  font-weight: bold;
}

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

#bg_top{
  position: absolute;
  height: 485px;
  background: url(ftdgreenature-images/bg1.jpg) repeat-x top;
  width: 100%;
}

#wrap{
  position: relative;
  background: url(ftdgreenature-images/bg3.png) repeat-x bottom;
  min-height: 100%;
}

body {  
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 17px;
    color: #000000;
    background: url(ftdgreenature-images/bg2.jpg);
  height: 100%;
}

h2{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: #578f0e;
  font-weight: normal;
  padding: 0px 0px 10px 10px;
}

h3{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: #ffffff;
  font-weight: normal;
  padding: 0px 0px 10px 30px;
}

.clear{
  clear: both;  
}

.read{
  text-align: right;
  padding: 5px 10px 0px 0px;
}

.read a{
  color: #d84005;
  font-weight: normal;
}

/*logo*/

#logo{
  height: 45px;
  padding-top: 6px;
  padding-left: 40px;
  float: left;
}

#logo h1 a{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
}

#logo a small{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
}

/*
  menu
*/
#menu{
  width: 1000px;
  height: 51px;
  margin: 0 auto;
}

#menu ul{
  padding-left: 0px;
    list-style: none;
  float: right;
}

#menu ul li{
  display: inline;
}

#menu ul li a{
  font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #ffffff;
  text-align: left;
    font-weight: normal;
    text-decoration: none;
    display: block;
    float: left;
  padding: 0px 40px 0px 12px;     
    height: 51px;
  line-height: 51px;
  
}

#menu ul li a:hover,  #menu ul li .active{
  color: #6fefc9;
  background: url(ftdgreenature-images/ls1.gif) no-repeat left center;
}

/*
  content
*/

#content{
  width: 980px;
  background: #ffffff;
  margin: 0 auto;
}

#content p{
  color: #666666;
  padding-left: 10px;
  padding-right: 10px;
}

.content_pad{
  padding: 10px;
}

.con_bor{
  border-top: 1px solid #578f0e;
  height: 10px;
  margin-top: 10px;
}

/*
  header
*/

#header{
  background: url(ftdgreenature-images/header.jpg) no-repeat;
  width: 980px;
  height: 246px;
}

/*
  column box
*/

.column_box{
  background: url(ftdgreenature-images/box_one_bg.jpg) repeat-x top;
  min-height: 135px;
  padding-top: 20px;
  margin-top: 10px;
}

.column_razd{
  background: url(ftdgreenature-images/column_razd.png) repeat-y center;  
}

.column1, .column2, .column3{
  float: left;
  width: 33.3%;
}

.img_column{
  float: left;
  padding: 0px 10px 0px 30px;
}

.text_column1, .text_column2, .text_column3{
  float: left;
  width: 298px;
}

.text_column1{
  padding: 0px 0px 0px 10px;
}

.text_column2{
  padding: 0px 33px 0px 33px;
}

#content .text_column1 p, #content .text_column2 p, #content .text_column3 p{
  padding-left: 5px;
}

#content .text_column1 h2, #content .text_column2 h2, #content .text_column3 h2{
  padding-left: 0px;
  text-align: center;
}

/*
  footer
*/

#footer_top{
  width: 841px;
  margin: 0 auto;
  background: url(ftdgreenature-images/footer_top_border.png) no-repeat bottom;
  padding-top: 30px;
}

#footer_top h3{
  padding-bottom: 5px;
}

#footer_top a{
  color: #ffffff;
  font-weight: bold;
}

#footer_top a:hover{
  color: #578f0e;
}

#footer_top p{
  color: #ffffff;
}

#footer_column1, #footer_column2, #footer_column3{
  width: 226px;
  float: left;
}

.footer_text{
  background: url(ftdgreenature-images/footer_top_border.png) no-repeat top left;
  width: 226px;
  padding: 10px 0px 10px 0px;
}

#footer_column2{
  padding: 0px 87px 0px 75px;
}

.foot_pad{
    padding-left: 45px;
  padding-top: 10px;
}

.link1{
    background: url(ftdgreenature-images/link1.png) no-repeat 0px 2px;
    padding-left: 30px;
    min-height: 18px;
    padding-bottom: 10px;
}

.link2{
    background: url(ftdgreenature-images/link2.png) no-repeat 0px 2px;
    padding-left: 30px;
    min-height: 18px;
    padding-bottom: 10px;
}

.link3{
    background: url(ftdgreenature-images/link3.png) no-repeat 0px 2px;
    padding-left: 30px;
    min-height: 18px;
    padding-bottom: 10px;
}

.link4{
    background: url(ftdgreenature-images/link4.png) no-repeat 0px 2px;
    padding-left: 30px;
    min-height: 18px;
    padding-bottom: 10px;
}

.ls{
    list-style: none;
    padding-left: 0px;
}

.ls li{
    background: url(ftdgreenature-images/ls1.gif) no-repeat 0px 6px;
    margin-bottom: 8px;
    padding-left: 15px;
}

#footer_bot{
  text-align: center;
  padding: 20px;
  font-size: 10px;
}

#footer_bot p, #footer_bot a{
  color: #ffffff;
  font-weight: normal;
  font-size: 10px;
}


/*=*/
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/* http://dev7studios.com
/*=*/


#slider-wrapper {
    background:url(ftdgreenature-images/top.jpg) no-repeat;
    width:980px;
    height: 246px;
    margin:0 auto;
}

#slider {
  position:relative;
    width: 980px;
    height: 246px;
  background:url(ftdgreenature-images/loading.gif) no-repeat 50% 50%;
}
#slider img {
  position:absolute;
  top:0px;
  left:0px;
  display:none;
}
#slider a {
  border:0;
  display:block;
}

.nivo-controlNav {
  position:absolute;
  left:260px;
  bottom:-42px;
  display: none;
}
.nivo-controlNav a {
  display:block;
  width:22px;
  height:22px;
  background:url(ftdgreenature-images/bullets.png) no-repeat;
  text-indent:-9999px;
  border:0;
  margin-right:3px;
  float:left;
}
.nivo-controlNav a.active {
  background-position:0 -22px;
}

.nivo-directionNav a {
  display:block;
  width:30px;
  height:30px;
  background:url(ftdgreenature-images/arrows.png) no-repeat;
  text-indent:-9999px;
  border:0;
}
a.nivo-nextNav {
  background-position:-30px 0;
  right:15px;
}
a.nivo-prevNav {
  left:15px;
}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a { 
    color:#efe9d1;
    text-decoration:underline;
}


</style>


    <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
    </head>
    <body>
      <div id="bg_top">&nbsp;</div>
    <div id="wrap">
      <div id="menu">
        <div id="logo">
          <h1><a href="#">ftdgreenature</a></h1>
          <a href="#"><small>Small Company Slogan Goes Here</small></a>
        </div>
        <ul>
          <li><a href="#" class="active">Home</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Gallery</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
    <div class="clear"></div>
    <div id="content" class="content_pad">
      <div id="header">
      
   <div id="wrapper">
        <div id="slider-wrapper">        
            <div id="slider" class="nivoSlider">
                <img src="ftdgreenature-images/header.jpg" alt="" />
                <img src="ftdgreenature-images/header2.jpg" alt=""/>
                <img src="ftdgreenature-images/header3.jpg" alt="" />
            </div>        
        </div>

</div>

<script type="text/javascript" src="lib/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="lib/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>  
      
      </div>
      <div class="column_box">
        <div class="column_razd">
          <div class="column1">
            <h3>Mauris quis sodales faucibus</h3>
            <img src="ftdgreenature-images/column1_img.png" alt="" title="" class="img_column" />
            <p><a href="#">Morbi mi sapien, malesuada</a><br /> 
            nec condimentum id, mattis eu lacus. Sed non dui vel ipsum gravida ultricies. Nulla imperdiet, nibh gravida placerat accumsan, </p>
            <div class="read"><a href="#">read more...</a></div>
          </div>
          <div class="column2">
            <h3>Vestibulum at vehicula</h3>
            <img src="ftdgreenature-images/column2_img.png" alt="" title="" class="img_column" />
            <p><a href="#">Morbi mi sapien, malesuada </a><br />
            nec condimentum id, mattis eu lacus. Sed non dui vel ipsum gravida ultricies. Nulla imperdiet, nibh gravida placerat accumsan, </p>
            <div class="read"><a href="#">read more...</a></div>
          </div>
          <div class="column3">
            <h3>Aliquam erat volutpat</h3>
            <img src="ftdgreenature-images/column3_img.png" alt="" title="" class="img_column" />
            <p><a href="#">Morbi mi sapien, malesuada </a><br />
            nec condimentum id, mattis eu lacus. Sed non dui vel ipsum gravida ultricies. Nulla impiet, gravida placerat accumsan, </p>
            <div class="read"><a href="#">read more...</a></div>
          </div>
          <div class="clear"></div>
        </div>
      </div>
      <div class="text_box">
        <div class="con_bor"></div>
        <h2>Pellentesque commodo, mauris quis sodales faucibus</h2>
        <p>Phasellus tortor metus, ullamcorper a tincidunt quis, fermentum id turpis. Pellentesque commodo, mauris quis sodales faucibus, dui lorem tincidunt purus, non egestas nibh nisi et leo. Donec feugiat tempus nibh vitae aliquam. Curabitur egestas tincidunt lorem eget faucibus. </p>
        <div class="read"><a href="#">read more...</a></div>
      </div>
      
      <div class="text_box">
        <div class="con_bor"></div>
          <div class="text_column1">
            <h2>Mauris quis sodales faucibus</h2>
            <img src="ftdgreenature-images/img1.jpg" alt="" title="" />
            <p>Phasellus tortor metus, ullamcorper a tincidunt quis, fermentum id turpis. Pellentesque commodo, mauris quis sodales faucibus, dui lorem tincidunt purus, non egestas nibh nisi et leo. Donec feugiat tempus</p>
          </div>
          <div class="text_column2">
            <h2>Vestibulum at vehicula</h2>
            <img src="ftdgreenature-images/img2.jpg" alt="" title="" />
            <p>Donec feugiat tempus nibh vitae aliquam. Curabitur egestas tincidunt lorem eget faucibus. Donec feugiat tempus nibh vitae aliquam. Curabitur egestas tincidunt lorem eget faucibus. Tempus nibh vitae aliquam.</p>
          </div>
          <div class="text_column3">
            <h2>Aliquam erat volutpat</h2>
            <img src="ftdgreenature-images/img3.jpg" alt="" title="" />
            <p>Pellentesque commodo, mauris quis sodales faucibus, dui lorem tincidunt purus, non egestas nibh nisi et leo. Donec feugiat tempus nibh vitae aliquam. Curabitur egestas tincidunt lorem eget faucibus. </p>
          </div>
          <div class="clear"></div>
      </div>
      
      <div class="text_box">
        <div class="con_bor"></div>
        <h2>Donec feugiat tempus nibh vitae aliquam. Curabitur egestas tincidunt lorem eget faucibus.</h2>
        <p><a href="#">Phasellus tortor metus, ullamcorper a tincidunt quis, fermentum id turpis.</a><br />
        Pellentesque commodo, mauris quis sodales faucibus, dui lorem tincidunt purus, non egestas nibh nisi et leo.</p>
        <br />
         <p>Donec feugiat tempus nibh vitae aliquam. Curabitur egestas tincidunt lorem eget faucibus. Phasellus tortor metus, ullamcorper a tincidunt quis, fermentum id turpis. Pellentesque commodo, mauris quis sodales faucibus, dui lorem tincidunt purus, non egestas nibh nisi et leo. Donec feugiat tempus nibh vitae aliquam.</p>
        <br />
         <p>Curabitur egestas tincidunt lorem eget faucibus. Phasellus tortor metus, ullamcorper a tincidunt quis, fermentum id turpis. Pellentesque commodo, mauris quis sodales faucibus, dui lorem tincidunt purus, non egestas nibh nisi et leo. Donec feugiat tempus nibh vitae aliquam. Curabitur egestas tincidunt lorem eget faucibus.</p>
      </div>
    </div>
    <div id="footer_top">
      <div id="footer_column1">
        <h3>Recent posts</h3>
        <div class="footer_text">
          <p><a href="#">Suspendisse rutrum interdum lacinia.</a>
          Suspendisse tempus aliquet elit sit amet pellentesque. Donec iaculis pulvinar mauris, ac vulputate justo pretium quis. </p>
          <br />
          <p><a href="#">Quisque luctus, mi ornare malesuada</a>
          Suspendisse tempus aliquet elit sit amet pellentesque. Donec iaculis pulvinar </p>
        </div>
      </div>
      <div id="footer_column2">
        <h3>Share with Others</h3>
        <div class="footer_text">
          <div class="foot_pad">
                       <div class="link1"><a href="#">Subscribe to Blog</a></div>
                        <div class="link2"><a href="#">Be a fan on Facebook</a></div>
                        <div class="link3"><a href="#">RSS Feed</a></div>
                        <div class="link4"><a href="#">Follow us on Twitter</a></div>
                    </div>
        </div>
      </div>
      <div id="footer_column3">
        <h3>Useful Resources</h3>
        <div class="footer_text">
          <div class="foot_pad">
                      <ul class="ls">
                          <li><a href="#">Lorem ipsum dolor</a></li>
                            <li><a href="#">Maecenas in turpis </a></li>
                            <li><a href="#">Morbi fringilla libero</a></li>
                            <li><a href="#">In venenatis metus vel </a></li>
                            <li><a href="#">Donec cursus quam ac </a></li>
                        </ul>
                    </div>
        </div>
      </div>
      <div class="clear"></div>
    </div>
      
    <div id="footer_bot">
      <p>Copyright  2011. <!-- Do not remove -->Designed by <a href="http://www.metamorphozis.com/free_templates/free_templates.php" title="Free Web Templates">Free Web Templates</a>, coded by <a href="http://www.flashtemplatesdesign.com/" title="Free Flash Templates">Free Flash Templates</a><!-- end --></p>
            <p><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></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.	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