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