metamorph_greenwood : Green « Templates « HTML / CSS






metamorph_greenwood

     

<!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;
}

body{
  font: 12px Arial, Helvetica, sans-serif;
  color: #000000;
  background: url(metamorph_greenwood-images/bg.jpg);
}


#bg2 {
width: 100%;
height: 100%;
background: url(metamorph_greenwood-images/bg_top.gif)  top repeat-x;}

#header { 
width:963px;
background: url(metamorph_greenwood-images/header.jpg) left top no-repeat;
height: 113px;
}

#logo {  font-family: Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    font-size:18px;
    font-style:italic;
    padding: 54px 0px 0px 732px;
    background: url(metamorph_greenwood-images/big_img.jpg) left top no-repeat;
}

#logo a {
  text-decoration: none;
  text-transform: lowercase;
  font-style: italic;
  font-size: 16px;
  color: #FFFFFF;
}


#logo H2 a{
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: none;
  font-weight:100;
}

#buttons{
  text-align:center;
  height: 232px;
  margin-left: 0px;
  padding-top: 0px;
}

#buttons a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  display: block;
  float: left;
  text-decoration: none;
  color: #FFFFFF;
  text-align: center;
  padding-top: 10px;
  height: 29px;
}

.but {
width: 277px;
background: url(metamorph_greenwood-images/but.png) left top no-repeat;
}
.but:hover { background: url(metamorph_greenwood-images/but_ov.png) center top no-repeat;
text-decoration: none;}

#main {
width: 963px;
margin: 0px auto;}

#content{
  width: 963px;
}

#left{
  width: 277px;
  float: left;
  color:#000000;
}

.left_b {
    padding-right: 15px;
    padding-top: 3px;
    padding-left: 11px;
    font-size: 12px;
    height: 117px;
    line-height: 18px;
}

.box1 { background: url(metamorph_greenwood-images/box1.png) 0px 0px no-repeat;}
.box2 { background: url(metamorph_greenwood-images/box2.png) 0px 0px no-repeat;}
.box3 { background: url(metamorph_greenwood-images/box3.png) 0px 0px no-repeat;}



.text{
  padding: 10px 0px 0px 0px;
  line-height: 18px;
}

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

#right .img {  float:left;
    margin: 3px 15px 3px 0px;
}

#left span {  color:#0C7404;
text-decoration: underline;
font-size:12px;
font-weight:bold;
}

#right span {  color:#0C7404;
text-decoration: underline;
font-size:12px;
font-weight:bold;
}

#left H1{
  font-family: Arial, Helvetica, sans-serif;
  font-size:18px;
  font-weight: 100;
  color: #FFFFFF;
  text-align: center;
  padding: 10px 0px 10px 0px;
}

#right H1{
  font-family: Arial, Helvetica, sans-serif;
  font-size:18px;
  font-weight: 100;
  color: #6A4F2F;
  text-align:left;
  padding: 14px 0px 0px 21px;
  height:30px;
  background: url(metamorph_greenwood-images/right_tit1.gif) 0px 17px no-repeat;
}


.title { background: url(metamorph_greenwood-images/right_tit2.gif) left bottom repeat-x;}

.read{
  text-align:right;
  padding-right:5px;
  padding-top: 0px;
  font-weight:bold;
  font-size:12px;
}

.read a{
color: #0C7404;
text-decoration: underline;
font-style:italic;}

.read a:hover {
text-decoration:none;}

#right{
float: right;
width: 685px;
padding: 0px 0px 0px 0px;
}

#right_bg { background:url(metamorph_greenwood-images/right.png) left repeat-y;}

#right_top {background:url(metamorph_greenwood-images/right_top.gif) left top no-repeat;
padding: 0px 25px 0px 24px;}

#right_bot { background:url(metamorph_greenwood-images/right_bot.png) left top no-repeat;
width: 686px;
height: 20px;}

#all_col {
width: 100%;
line-height: 18px;}

.col_left {
float: left;
width:303px;
}

.col_right {
float: right;
width: 307px;}

#footer{
  height: 50px;
  width: 686px;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  clear:both;
  padding: 10px 0px 0px 0px;
  background: url(metamorph_greenwood-images/footer.jpg) 0px 0px  no-repeat;
  float:right;
}

#footer a{
  color: #ffffff;
  font-size: 12px;
  text-decoration: none;
}

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

</style>


</head>
<body>


<div id="bg2">
<div id="main">
<!-- header begins -->
<div id="header">
  
  <div id="logo"><a href="#">metamorph_greenwood</a>
      <h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
    </div>
   
</div>
<!-- header ends -->
        <!-- content begins -->
         <div id="content">
            
                    <div id="right">
                        <div id="right_bg">
                          
                          <div id="right_top">
                               <div class="title"><h1>Metamorphosis Design</h1></div>
                                <div class="text"><span>Proin tempus accumsan elementum. In hac habitasse platea dictumst. Maecenas ac massa non purus varius lacinia et sit amet leo.</span></div>
                                 <div class="text">
                  <img src="metamorph_greenwood-images/img4.jpg" class="img" width="122"  height="92" alt="" />Pellentesque eleifend, libero eu gravida tincidunt, lorem mi laoreet orci, quis elementum sem velit eget dolor. Nam quis semper tellus. Phasellus vehicula, est quis mattis accumsan, tortor magna consectetur lacus, in venenatis mauris tortor non massa. Nunc sollicitudin ante laoreet massa consectetur tristique. Aliquam vel lacus vel ligula facilisis egestas quis ac nisl. Praesent cursus, tortor eget pretium fringilla, lorem metus vestibulum felis, vitae pharetra lorem eros pharetra augue. Quisque quis semper eros. <br />
                                    Curabitur facilisis, quam non aliquam convallis, sapien magna gravida mi, eu rhoncus massa dui a urna. Aenean adipiscing est nec felis ultrices tempor vel ac nisi. Quisque arcu nulla, cursus eu ultrices imperdiet, sodales quis 

                                  <div class="read"><a href="#"> read more</a></div><br />
                              </div>
                                <div class="title"><h1>FREE WEBSITE TEMPLATES USEFUL LINKS</h1>
                                </div>
                                <div class="text">
                <ol>
                  <li><a href="http://www.metamorphozis.com/free_templates/free_templates.php">Free Website Templates</a></li>
                  <li><a href="http://www.metamorphozis.com/shop/flash_templates.php">Flash Templates</a></li>
                  <li><a href="http://www.metamorphozis.com/website_hosting/index.php">Top Hosting Providers</a></li>
                  <li><a href="http://www.metamorphozis.com/contact/contact.php">Support For Free Website Templates</a></li>
                </ol>
                                 <span>Pellentesque congue, dolor at pellentesque interdum, turpis elit venenatis tellus, nec ultrices mauris nulla pretium dui. Vestibulum tincidunt mattis augue. </span><br /><br />
                              </div>
                              <div id="all_col">
                                  <div class="col_left"><img src="metamorph_greenwood-images/img5.jpg" class="img"  width="102" height="69" alt="" />Proin tempus accumsan elementum. In hac habitasse platea dictumst. Maecenas ac massa non purus varius lacinia et sit amet leo. Curabitur facilisis, <br />
                                    aliquam convallis, sapien magna gravida mi, eu.<br />
                                    <div class="read"><a href="#"> read more</a></div>    
                                </div>
                                        <div class="col_right"><img src="metamorph_greenwood-images/img6.jpg" class="img"  width="102" height="69" alt="" />Nullam eu porta sem. Donec aliquet blandit accumsan. Aliquam erat volutpat. Nulla rutrum volutpat tellus vitae gravida. Nullam at ornare urna. Sed scelerisque <br />
                                        amet semper odio commodo vestibulum. Quisque 
                                            <div class="read"><a href="#"> read more</a></div>
                                </div>
                                       <div style="clear: both"><img src="metamorph_greenwood-images/spaser.gif" alt="" width="1" height="1" /></div>
                              </div>
                              
                          </div>
                            
                        </div>
                        <div id="right_bot"></div>
                    </div>
                    <div id="left">
                         <div id="buttons">
                          <a href="#" class="but"  title="">Home</a>
                          <a href="#" class="but" title="">Blog</a>
                          <a href="#"  class="but" title="">Gallery</a>
                          <a href="#"  class="but" title="">About us</a>
                          <a href="#" class="but" title="">Contact us</a>
                        </div>
                            <h1>Company News</h1>
                          <div class="box1">
                            <div class="left_b"><img src="metamorph_greenwood-images/img1.jpg" class="img" width="70"  height="53" alt="" /><span class="w">Friday, Apr.10, 2010</span><br />
                                    Nullam eu porta sem. Donec aliquet blandit accumsan. Aliquam erat volutpat. Nulla... 
                              <div class="read"><a href="#"> read more</a></div>
                            </div>
                      </div>
                           <div class="box2">
                            <div class="left_b"><img src="metamorph_greenwood-images/img2.jpg" class="img" width="70"  height="53" alt="" /><span class="w">Saturday, Apr. 11, 2010</span><br />
                                    Nullam eu porta sem. Donec aliquet blandit accumsan. Aliquam erat volutpat. Nulla... 
                              <div class="read"><a href="#"> read more</a></div>
                            </div>
                      </div>
                           <div class="box3">
                            <div class="left_b"><img src="metamorph_greenwood-images/img3.jpg" class="img" width="70"  height="53" alt="" /><span class="w">Sunday, Apr. 12, 2010</span><br />
                                    Nullam eu porta sem. Donec aliquet blandit accumsan. Aliquam erat volutpat. Nulla... 
                              <div class="read"><a href="#"> read more</a></div>
                            </div>
                      </div>
                           
                           
                       </div>
                    <div style="clear: both"><img src="metamorph_greenwood-images/spaser.gif" alt="" width="1" height="1" /></div>
              
        </div>
    <!-- content ends -->
     
<!-- footer begins -->
            <div id="footer">
           
       <p>Copyright  2010. <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> 
  <p>Design by <a href="http://www.metamorphozis.com/" title="Free Website Templates">Free Website Templates</a> for <a href="http://www.flashtemplatesdesign.com/" title="Flash Templates">Flash Templates</a> 
    </p>
       
      </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_greenland
10.metamorph_greenlight_lt
11.metamorph_greenmint
12.metamorph_greenplanet
13.metamorph_greenpound
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