metamorph_imaginary
<!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: underline;}
#right a{
color: #074959;
text-decoration: underline;
}
#right a:hover{
text-decoration: none;
color: #C80909;
text-decoration: underline;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background: url(metamorph_imaginary-images/bg.jpg) center top no-repeat #074959;
margin: 31px 0px 33px 0px;
line-height: 20px;
}
#main {
width: 1014px;
margin-left: 0px;
background: url(metamorph_imaginary-images/top.gif) top no-repeat ;
padding: 5px 5px 0px 5px;
}
#main_bot {
width: 1024px;
background: url(metamorph_imaginary-images/bottom.gif) bottom no-repeat #FFFFFF;
margin: 0px auto;
}
#header {
width:1024px;
padding: 0px 0px 0px 0px;
background: url(metamorph_imaginary-images/big.jpg) left top no-repeat;
}
#logo { font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:18px;
font-style:italic;
padding: 88px 0px 0px 460px;
background: url(metamorph_imaginary-images/big_img.jpg) left top no-repeat;
height: 192px;
}
#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: 1014px;
background: url(metamorph_imaginary-images/bg_but.jpg) left top no-repeat;
text-align:center;
padding-left:20px;
padding-top: 0px;
height: 55px;
}
#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: 60px;
text-align: left;
width: 140px;
background: url(metamorph_imaginary-images/but.gif) 30px 20px no-repeat;
}
#buttons a:hover {
text-decoration: none;
background: url(metamorph_imaginary-images/over.jpg) 30px 20px no-repeat;
font-size: 20px;
}
#content{
width: 1016px;
padding: 0px 0px 0px 0px;
background: url(metamorph_imaginary-images/content.gif) left repeat-y;
margin: 0px 0px 0px 0px;
}
#content_top{
width: 1016px;
padding: 0px 0px 0px 0px;
background: url(metamorph_imaginary-images/left_top.gif) left top no-repeat;
margin: 0px 0px 0px 0px;
}
#content_bot{
width: 1016px;
padding: 0px 0px 0px 0px;
background: url(metamorph_imaginary-images/left_bot.gif) left bottom no-repeat;
margin: 0px 0px 0px 0px;
}
#right{
width: 663px;
margin: 0px 0px 0px 0px;
float: right;
color:#000000;
}
.right_b { background: url(metamorph_imaginary-images/fish.png) 0px 8px no-repeat;
padding-left: 22px;
padding-top: 5px;
padding-right: 5px;
}
.text{
padding: 10px 0px 0px 5px;
}
.img { float:left;
margin: 0px 16px 3px 0px;
}
#right span { color:#074959;
font-weight:bold;
}
#left span { color:#074959;
font-weight:bold;
}
#right H1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #074959;
text-align:left;
padding: 15px 0px 4px 0px;
}
#left H2{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #074959;
padding-top: 12px;
padding-left: 0px;
text-align: left;
padding: 15px 0px 4px 0px;
}
.read{
text-align:right;
padding-right:10px;
padding-top: 5px;
font-weight:bold;
text-decoration:none;
}
#left{
float: left;
width: 330px;
margin-left: 0px;
padding: 0px 8px 0px 8px;
}
.tit_bot { background: url(metamorph_imaginary-images/right_bg.jpg) left top no-repeat;
padding: 0px 15px 0px 14px;}
.col_l { width: 295px;
float:left;}
.col_r { width: 298px;
float:left;
margin-left: 22px}
#footer{
height: 53px;
width: 100%;
font-size: 12px;
color: #FFFFFF;
text-align: center;
clear:both;
padding: 12px 0px 0px 0px;
background: url(metamorph_imaginary-images/footer.jpg) 0px 5px 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_bot">
<div id="main">
<!-- header begins -->
<div id="header">
<div id="buttons">
<div ><a href="#" class="but" title="">Home</a></div>
<div ><a href="#" class="but" title="">Blog</a></div>
<div><a href="#" class="but" title="">Gallery</a></div>
<div><a href="#" class="but" title="">About us</a></div>
<div ><a href="#" class="but" title="">Contact us</a></div>
</div>
<div id="logo"><a href="#">metamorph_imaginary</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="content_top">
<div id="content_bot">
<div id="right">
<div class="tit_bot">
<h1>Metamorphosis Design</h1>
<div class="right_b"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac tellus vel dui iaculis rutrum sed at nisi. Vestibulum consectetur accumsan volutpat. </span><br />
<br />
Aliquam ut enim in nibh porta faucibus. Cras at libero sed massa pretium ullamcorper. Nunc posuere eros et <br /><img src="metamorph_imaginary-images/img.jpg" width="152" height="114" class="img" alt="" />
vitae tortor eget velit malesuada commodo. Donec eu tempus mi. Curabitur nec justo eget ligula tristique rhoncus id id turpis. Nulla vel felis vitae dolor facilisis convallis at sed neque. Duis sed eros ligula. Praesent vestibulum cursus elementum. Nunc congue orci neque. Mauris ipsum dolor, viverra vel ornare in, mollis eu erat. Praesent in elit dui, id ultrices dui. Phasellus ultricies nulla et erat scelerisque nec auctor nisl viverra. Vivamus non nisl at ligula. <br />
<span>Donec eu tempus mi. Curabitur nec justo eget ligula tristique rhoncus id id turpis. Nulla vel felis vitae. </span>
</div>
</div><br />
<div class="tit_bot">
<h1>Free Website Templates</h1>
<div class="col_l">
<div class="right_b"><span class="col_b">Vestibulum quis leo sem, ac fringilla tortor. Morbi semper, ligula vitae rutrum egestas, mauris.</span><br />
Metus imperdiet nisi, nec pharetra felis lectus quis tortor. Etiam tempus elementum tellus, ac facilisis orci porta eu. Etiam mattis, augue a varius consequat, ante erat egestas diam, scelerisque pretium lectus libero quis mauris. Curabitur lacus tellus, varius ac fermentum eget, mattis et felis. Aenean felis nulla, rhoncus ut... </div>
<div class="read"><a href="#">read more</a></div>
</div>
<div class="col_r">
<div class="right_b"><span class="col_b">Ut a laoreet mi. Duis fringilla rutrum tellus. Integer vulputate convallis massa, sit amet cursus erat posuere nec.</span><br />
Fusce et imperdiet est. Sed viverra mauris eget lacus mollis fermentum. Curabitur laoreet mattis iaculis. Nulla ultricies egestas ornare. Nullam vulputate lobortis cursus. Cras elit enim, condimentum eu vestibulum ac, tristique et eros. Nulla adipiscing scelerisque quam sit amet viverra. Integer sed elit non odio mattis... </div>
<div class="read"><a href="#">read more</a></div>
</div>
<div style="clear: both"><img src="metamorph_imaginary-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
</div>
<div id="left">
<h2>Company News</h2>
<div class="right_b"><span class="col_b">Nam non urna a sapien auctor pretium. Ut fringilla odio condimentum orci aliquet tempor. </span><br />
Aliquam quam tellus, dictum nec varius vel, viverra eu massa. Vestibulum non metus sed nisl consequat consequat eget ac nulla. Donec et velit nisl. Donec eget nunc risus. Curabitur nibh lectus, congue et egestas ac, hendrerit non eros. Pellentesque ut pharetra nunc. Duis eget ante sed nisi luctus hendrerit condimentum eget. </div>
<div class="read"><a href="#"><img src="metamorph_imaginary-images/b_read.gif" alt="" /></a></div><br />
<div class="right_b"><span class="col_b">Nam non urna a sapien auctor pretium. Ut fringilla odio condimentum orci aliquet tempor. </span><br />
Aliquam quam tellus, dictum nec varius vel, viverra eu massa. Vestibulum non metus sed nisl consequat consequat eget ac nulla. Donec et velit nisl. Donec eget nunc risus. Curabitur nibh lectus, congue et egestas ac, hendrerit non eros. Pellentesque ut pharetra nunc. Duis eget ante sed nisi luctus hendrerit condimentum eget. </div>
<div class="read"><a href="#"><img src="metamorph_imaginary-images/b_read.gif" alt="" /></a></div><br />
</div>
<br />
<div style="clear: both"><img src="metamorph_imaginary-images/spaser.gif" alt="" width="1" height="1" /></div>
<div class="bot"></div>
</div>
</div>
</div>
<!-- content ends -->
<!-- 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>
</div>
</body>
</html>
Related examples in the same category