metamorph_greenisland
<!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{
color: #343F59;
text-decoration: underline;
}
a:hover{
text-decoration: none;
color: #343F59;
text-decoration: none;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background: #343F59;
line-height: 17px;
}
#main {
width: 1014px;
margin-left: 0px;
padding: 0px 0px 0px 0px;
}
#main_bg {
width: 1014px;
background: url(metamorph_greenisland-images/main_bg.gif) repeat-y;
margin: 0px auto;
padding: 0px 13px 0px 13px;
}
#header {
width:1014px;
padding: 0px 0px 0px 0px;
background: url(metamorph_greenisland-images/header.jpg) left top no-repeat;
}
#logo { font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:18px;
font-style:italic;
padding: 155px 0px 0px 743px;
background: url(metamorph_greenisland-images/big_img.jpg) left top no-repeat;
height: 60px;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 18px;
color: #FFFFFF;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-transform: none;
font-weight:100;
}
#buttons{
width: 1000px;
background: url(metamorph_greenisland-images/bg_but.jpg) left top no-repeat;
text-align:center;
padding-left:40px;
padding-top: 0px;
height: 118px;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
display: block;
float: left;
height: 35px;
text-decoration: none;
color: #FFFFFF;
padding-top: 20px;
padding-left: 0px;
text-align: center;
width: 122px;
background: url(metamorph_greenisland-images/but.gif) 30px 20px no-repeat;
text-transform:lowercase;
}
.but1 {
padding-top: 18px;
width: 122px;
float:left;}
.but2 {
padding-top: 8px;
width: 122px;
float:left;}
.but3 {
padding-top: 0px;
width: 122px;
float:left;}
.but4 {
padding-top: 12px;
width: 122px;
float:left;}
.but5 {
padding-top: 27px;
width: 122px;
float:left;}
#buttons a:hover {
text-decoration: underline;
}
#content{
width: 1014px;
padding: 8px 0px 0px 0px;
background: url(metamorph_greenisland-images/cont.jpg) 0px 0px;
margin: 0px 0px 0px 0px;
}
#left{
width: 675px;
margin: 0px 0px 0px 11px;
float: left;
color:#000000;
}
.right_b { background: url(metamorph_greenisland-images/fish.png) 0px 2px no-repeat;
padding-left: 23px;
padding-right: 5px;
}
.text{
padding: 0px 0px 0px 0px;
}
.img { float:left;
margin: 4px 16px 3px 0px;
}
#left span { color:#294D01;
font-weight:bold;
}
#right span { color:#294D01;
font-weight:bold;
text-decoration:underline;
}
#left H1{
font-family: Arial, Helvetica, sans-serif;
font-size:20px;
font-weight: 100;
color: #294D01;
text-align:left;
padding: 15px 0px 15px 0px;
text-transform:lowercase;
}
#right H1{
font-family: Arial, Helvetica, sans-serif;
font-size:20px;
font-weight: 100;
color: #294D01;
padding-top: 12px;
padding-left: 0px;
text-align: left;
padding: 15px 0px 15px 0px;
text-transform:lowercase;
}
.read{
text-align:right;
padding-right:10px;
padding-top: 10px;
font-weight:bold;
text-decoration:none;
}
#right{
float: right;
width: 294px;
margin-right: 16px;
padding: 0px 0px 0px 0px;
}
.tit_bot { background: url(metamorph_greenisland-images/tit_bot.png) left top no-repeat;
padding: 0px 8px 0px 8px;}
#footer{
height: 43px;
width: 100%;
font-size: 12px;
color: #FFFFFF;
text-align: center;
clear:both;
padding: 60px 0px 0px 0px;
background: url(metamorph_greenisland-images/footer.jpg) left bottom no-repeat;
}
#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="main_bg">
<div id="main">
<!-- header begins -->
<div id="header">
<div id="logo"><a href="#">metamorph_greenisland</a>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
</div>
<div id="buttons">
<div class="but1" ><a href="#" class="but" title="">Home</a></div>
<div class="but2" ><a href="#" class="but" title="">Blog</a></div>
<div class="but3" ><a href="#" class="but" title="">Gallery</a></div>
<div class="but4" ><a href="#" class="but" title="">About us</a></div>
<div class="but5" ><a href="#" class="but" title="">Contact us</a></div>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="content">
<div id="right">
<h1>Metamorphosis Design</h1>
<div class="right_b"><span>Proin at dolor quis diam feugiat euismod. Aliquam erat volutpat. </span><br /><br />
Mauris metus justo, accumsan dignissim elementum sit amet, posuere et nibh. Suspend- isse ultricies nunc consectetur ipsum dapibus in tempus odio consequat. Nulla non eros et nibh <br />
<div class="read"><a href="#">read more</a></div><br />
</div>
<div class="right_b"><span>Proin at dolor quis diam feugiat euismod. Aliquam erat volutpat. </span><br /><br />
Mauris metus justo, accumsan dignissim elementum sit amet, posuere et nibh. Suspend- isse ultricies nunc consectetur ipsum dapibus in tempus odio consequat. Nulla non eros et nibh <br />
<div class="read"><a href="#">read more</a></div><br />
</div>
<div class="right_b"><span>Proin at dolor quis diam feugiat euismod. Aliquam erat volutpat. </span><br /><br />
Mauris metus justo, accumsan dignissim elementum sit amet, posuere et nibh. Suspend- isse ultricies nunc consectetur ipsum dapibus in tempus odio consequat. Nulla non eros et nibh <br />
<div class="read"><a href="#">read more</a></div><br />
</div>
<br />
</div>
<div id="left">
<div class="tit_bot">
<h1>Metamorphosis Design</h1>
<div class="text">
<img src="metamorph_greenisland-images/img.jpg" width="120" height="80" class="img" alt="" /><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> <br /><br />
Duis rhoncus nibh et felis facilisis vel consequat ipsum cursus. Etiam consequat turpis at metus euismod sit amet euismod elit malesuada. Maecenas vestibulum nisl quis sem dapi- bus consectetur. Phasellus mattis urna eu eros laoreet condimentum. Cras lectus felis... <br />
<div class="read"><a href="#">read more</a></div><br />
</div>
<div class="text">
<img src="metamorph_greenisland-images/img2.jpg" width="120" height="80" class="img" alt="" /><span>Integer sit amet nulla eu lectus pulvinar volutpat. Phasellus congue leo eget lacus posuere hendrerit. </span> <br />
<br />
Donec id massa purus, ac porta mi. Sed facilisis vestibulum risus ut dapibus. Integer cursus aliquam pellentesque. Vestibulum vestibulum iaculis nibh ut ultricies. Fusce vel sem sit amet metus ornare congue. Nulla laoreet luctus mauris at pharetra. Suspendisse id nulla elit. <br />
<div class="read"><a href="#">read more</a></div><br />
</div>
</div>
<div class="tit_bot">
<h1>Web Design Starter's Guide</h1>
<div class="text"><ol>
<li><a href="http://www.metamorphozis.com/free_templates/free_templates.php">More 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>
<div class="read"><a href="#">read more</a></div><br />
</div>
</div>
<div class="tit_bot">
<h1>free website templates</h1>
<div class="text"><span>Phasellus tellus lorem, vulputate sed tincidunt non, lacinia et odio. Nulla lacinia egestas tortor sed aliquam. Vestibulum felis ligula, lacinia ut malesuada et, rhoncus eget nisl. Fusce venenatis condimentum dolor vitae dictum. </span> <br />
<br />
Pellentesque egestas lacus at dui vulputate posuere tempus nunc vestibulum. In nisl elit, iaculis at volutpat non, mattis sit amet magna. Quisque aliquam eleifend turpis vel viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo placerat hendrerit. Nam rhoncus auctor massa, aliquam porttitor enim commodo consequat. Sed justo <br />
<div class="read"><a href="#">read more</a></div><br />
</div>
</div>
</div>
<br />
<div style="clear: both"><img src="metamorph_greenisland-images/spaser.gif" alt="" width="1" height="1" /></div>
<!-- footer begins -->
<div id="footer">
Copyright 2010. Designed by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash 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>
<!-- content ends -->
</div>
</div>
</body>
</html>
Related examples in the same category