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