metamorph_greenland : Green « Templates « HTML / CSS






metamorph_greenland

     

<!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>Metamorphosis Design Free Css Templates</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
*/

*
{
border: 0;
margin: 0;
}

img
{
border: 0px;
}


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

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


body{
  font: 12px Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  line-height:20px;
  background: url(metamorph_greenland-images/bg.jpg) top left repeat-x #055701;
  }
  
.bg_foot {
background: url(metamorph_greenland-images/footer.jpg) bottom repeat-x;}


#main{
  width: 1014px;
  margin: 0px auto;
  padding: 0px 0px 0px 0px;
}


#header { width:1014px;
padding: 0px 0px 0px 0px;
height: 193px;
background: url(metamorph_greenland-images/head.jpg) 197px 0px no-repeat ;
}

#buttons{
  width: 1000px;
  background: url(metamorph_greenland-images/menu.jpg) left top repeat-x;
  text-align:center;
  height:38px;
  margin-right:0px;
  padding-left:3px;
}


#buttons a {
  font-family: Georgia, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight:bold;
  display: block;
  float: left;
  width: 142px;
  height: 28px;
  text-decoration: none;
  color: #FFFFFF;
  padding-top: 10px;
  text-align: center;
}

.razd_but {
background:url(metamorph_greenland-images/razd_b.gif) right top no-repeat;
padding-right: 0px;
width: 144px;
height: 38px;
float:left;}

#buttons a:hover {
  text-decoration: underline;
  background: url(metamorph_greenland-images/but_ov.gif) left top repeat-x;
  color:#FFFFFF;
  margin-right: 0px;
}

#logo{
  background: url(metamorph_greenland-images/logo.jpg) center top no-repeat;
  height: 100px;
  padding: 55px 0px 0px 0px;
}

#logo a {
  font-family:Georgia, "Times New Roman", Times, serif;
  text-decoration: none;
  font-size: 14px;
  color: #FFFFFF;
  font-weight: bold;
  font-style:italic;
}


#logo H3 a{
  font-size: 12px;
  background:none;
  font-family:Georgia, "Times New Roman", Times, serif;
  font-style:italic;
}

#bg_top {
  background: url(metamorph_greenland-images/bg_top.jpg) left top no-repeat;  
  height:304px;
  width:317px;
  float:left;}
  
#text_top {
  color:#000000;
  width:234px;
  margin: 11px 0px 0px 19px;}

#content{
  width: 1014px;
  padding: 0px 0px 0px 0px;
}

#left{
  width: 700px;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  float:left;
  background: url(metamorph_greenland-images/left.jpg) top repeat-x;
  min-height: 590px;
}

.left1 {
padding: 0px 20px 0px 15px;
}

.razd_l {
height:2px;
width: 100%;
background:url(metamorph_greenland-images/razd_l.gif) bottom repeat-x;}

.tit_bot {  background: url(metamorph_greenland-images/tit_bot.png) center top no-repeat;
      padding: 7px 5px 0px 0px;
}

.text{
  padding: 0px 20px 0px 15px;
}

.img {  float:left;
    margin: 6px 17px 5px 0px;
}

.img_t {  float:left;
    margin: 0px 10px 0px 0px;
}
.free {
padding: 0px 0px 0px 10px;}

span {  color:#7FFE79;
    font-weight:bold;
}

.color { color:#3774A0;}

.dat { text-decoration:underline;}

#right H1{
  font-family: Georgia, Arial, Helvetica, sans-serif;
  font-size:18px;
  font-weight:normal;
  color: #7FFE79;
  height: 29px;
  padding-left: 0px;
  padding-top: 16px;
  text-align: left;
}

#left H2{
  font-family: Georgia, Arial, Helvetica, sans-serif;
  font-size:18px;
  font-weight:normal;
  color: #7FFE79;
  padding-bottom: 15px;
  padding-left: 27px;
  padding-top: 16px;
  text-align:left;
  background: url(metamorph_greenland-images/tit_l.gif) 0px 17px  no-repeat;
}

.read{
  text-align:right;
  padding-right:5px;
  padding-top: 15px;
}

.read_r{
  text-align:right;
  padding-right:5px;
  padding-top: 8px;
}

#right{
  float:right;
  width: 295px;
  margin-right: 3px;
  background: url(metamorph_greenland-images/right.jpg) top repeat-x;
}



#right ul 
{
  list-style: none;
  padding-left:0px;
  padding-top:0px;
  margin: 0px;
  display:block;
  padding-bottom: 0px;
  background:url(metamorph_greenland-images/ul_bg.gif) left repeat-y;
}

#right li{
  padding-top: 5px;
  padding-bottom: 5px;
}

#right a {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 23px;
}

#right a:hover {
  background: url(metamorph_greenland-images/li_bg.gif) left repeat-y;
}

#right .list 
{
  list-style: none;
  padding-left: 23px;
  padding-top: 5px;
  padding-bottom: 10px;
  margin: 0px;
  display:block;
  background: url(metamorph_greenland-images/fish.gif) 0px 12px no-repeat;
}

#footer{
  height: 40px;
  width: 1014px;
  font-size: 10px;
  color: #FFFFFF;
  text-align: center;
  clear:both;
  padding: 10px 0px 0px 0px;
}

#footer a{
  color: #FFFFFF;
  font-size: 10px;
  text-decoration: none;
}

#footer a:hover{
  color: #FFFFFF;
  font-size: 10px;
  text-decoration: underline;
}

</style>


</head>
<body>

<div class="bg_foot">
<div id="main">
<!-- header begins -->
<div id="header">
  <div id="logo"><a href="#">metamorph_greenland</a>
    <h3><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h3>
  </div>
<div id="buttons">
      <div  class="razd_but"><a href="#" title="">Home</a></div>
      <div class="razd_but"><a href="#"  title="">Blog</a></div>
      <div  class="razd_but" ><a href="#" title="">Gallery</a></div>
      <div  class="razd_but" ><a href="#" title="">About Us</a></div>
      <div  ><a href="#" title="">Contact Us</a></div>
    </div>
    
</div>
<!-- header ends -->
        <!-- content begins -->
        <div id="content">
            <div id="left">
               <div class="left1">
                 <h2>Metamorphosis Design</h2>
                 <span >Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> <br />
                      Morbi sodales commodo dui, in varius est mattis eu. In hac habitasse platea dictumst. Duis tempor facilisis diam, ac auctor dui dapibus porta. Suspendisse potenti. Vestibulum molestie adipiscing libero nec sollicitudin. Fusce ac arcu in turpis venenatis accumsan. Sed eleifend turpis ac risus rhoncus facilisis sed eu massa. Proin nibh sem, feugiat id 
                
                 <img src="metamorph_greenland-images/img1.jpg" width="162" height="115" class="img" alt=""  />
                    sit amet, consectetur adipiscing elit. Morbi sodales commodo dui, in varius est mattis eu. In hac habitasse platea dictumst. Duis tempor facilisis diam, ac auctor dui dapibus porta. Suspendisse potenti. Vestibulum molestie adipiscing libero nec sollicitudin. Fusce ac arcu in turpis venenatis accumsan. Sed eleifend turpis ac risus rhoncus facilisis sed eu massa. Proin nibh sem, feugiat id semper a, vestibulum sed libero. Ut auctor lorem et neque mollis quis tristique ipsum porta. Pellentesque euismod nunc...
                    <div class="read"><a href="#"><img src="metamorph_greenland-images/b_read.gif" alt="" /></a></div>
                 <br />
              </div>
              <div class="razd_l"></div>
              <div class="left1">
                 <h2>Free Website Templates</h2>
                    <div class="free"><img src="metamorph_greenland-images/img2.jpg" height="82" width="122" class="img_t" alt="" /><img src="metamorph_greenland-images/img3.jpg" height="82" width="122" class="img_t" alt="" /><img src="metamorph_greenland-images/img4.jpg" height="82" width="122" class="img_t" alt="" /><img src="metamorph_greenland-images/img5.jpg" height="82" width="122" class="img_t" alt="" /><img src="metamorph_greenland-images/img6.jpg" height="82" width="122" alt="" /></div>
                  <div class="read"><a href="#"><img src="metamorph_greenland-images/b_view.gif" alt="" /></a></div><br />
              </div>
              <div class="text"><span>Proin vitae orci odio, at consectetur libero. </span> <br />
              Aenean iaculis ligula et nulla sagittis luctus. Proin lacus enim, bibendum id adipiscing in, consectetur a dui. Ut vitae est orci. Nam vel orci quis nisi convallis vehicula et ac sem. Sed ullamcorper odio et risus venenatis pharetra. Fusce quis ante at risus auctor suscipit sit amet nec turpis. <br /><br />
        <span>Cras sapien erat, aliquet at convallis sit amet, malesuada ut turpis. </span> <br />
              Morbi id mauris lorem, id malesuada diam. Praesent sed accumsan turpis. Donec orci lectus, interdum luctus egestas in, blandit eget odio. Praesent congue tortor non augue mollis volutpat mattis eget enim. Aliquam quis justo vitae metus tincidunt tristique ac at tellus. <br /><br />
              <span>Ut mollis nulla id sapien convallis eu tempor velit aliquam. </span> <br />
              Nunc pretium ultricies orci ac mollis. Proin at diam quam. Vestibulum facilisis lacus in magna malesuada et fermentum. <br />
              </div>
            
                   
            </div>
            <div id="right">
              <h1>Categories</h1>
                <div class="tit_bot">
                  <ul>
                    <li><a href="">Lorem ipsum</a></li>
                    <li><a href="">Morbi sodales</a></li>
                    <li><a href="">Suspendisse potenti</a></li>
                    <li><a href="">Vestibulum molestie </a></li>
                    <li><a href="">Fusce fringilla</a></li>
                    <li><a href="">Praesent in malesuada</a></li>
                   </ul>
                  <br />
               </div>
              <h1>Company News</h1>
                <div class="tit_bot">
                <div class="list"><span class="dat">05-01-2010</span><br />
                  <span>Sed id augue nunc.</span><br />
                    Praesent in malesuada enim. Fusce non risus turpis, quis porta libero. Aenean mattis dolor a nibh tempus laoreet. Nullam vulputate... 
                    <div class="read_r"><a href="#"><img src="metamorph_greenland-images/b_read.gif" alt="" /></a></div>
                </div>
                <div class="list"><span class="dat">05-01-2010</span><br />
                  <span>Sed id augue nunc.</span><br />
                    Praesent in malesuada enim. Fusce non risus turpis, quis porta libero. Aenean mattis dolor a nibh tempus laoreet. Nullam vulputate... 
                    <div class="read_r"><a href="#"><img src="metamorph_greenland-images/b_read.gif" alt="" /></a></div>
                </div>
                <div class="list"><span class="dat">05-01-2010</span><br />
                  <span>Sed id augue nunc.</span><br />
                    Praesent in malesuada enim. Fusce non risus turpis, quis porta libero. Aenean mattis dolor a nibh tempus laoreet. Nullam vulputate... 
                    <div class="read_r"><a href="#"><img src="metamorph_greenland-images/b_read.gif" alt="" /></a></div>
                </div>
            </div>
        </div>
         <div style="clear: both;"><img src="metamorph_greenland-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
<!-- content ends -->
 <!-- footer begins -->
<div id="footer">
  Copyright  2010. Designed by <a href="http://www.metamorphozis.com/" title="Website Templates">Website Templates</a><br />
    <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>
</div>
<!-- footer ends -->
</div>
</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_greenlight_lt
10.metamorph_greenmint
11.metamorph_greenplanet
12.metamorph_greenpound
13.metamorph_greenwood
14.metamorph_greeny
15.cleanandgreen
16.green-day
17.green-mile
18.green-solutions
19.green-stripes
20.green-web
21.greenbusiness
22.greencastle
23.greencogs
24.greencommunity
25.greener
26.greenery
27.greenfeeling
28.greenfest
29.greenforest
30.GreenHome
31.greenlight
32.greenorange
33.greenparks
34.greenpeace
35.greenpeople
36.greenpiece
37.greenred
38.GreenSpan
39.greenspark
40.GreenSquareShadow
41.greensteps
42.greenstripes
43.greenthumb
44.greenway
45.greenworld
46.GreenWOW
47.greeny
48.greenybox
49.greenygrass
50.greenylife
51.greenypat
52.greenzap
53.curiouslygreen
54.gogreen
55.green piece
56.green-blog
57.Green 3
58.green80
59.GreeNadReD
60.greenandplain
61.Green_Corporate_NMK
62.Green_dream
63.Green_Feeling
64.Green_Glass
65.green_light
66.green_mile
67.Green_Template
68.green_web
69.evergreen
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