metamorph_colorwaves
<!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: #711419;
text-decoration:none;
}
a:hover{
text-decoration: underline;
color: #000000;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background: #A8270F;
line-height:20px;
}
#bg{
width: 1027px;
margin: 0px auto;
background:url(metamorph_colorwaves-images/bg.gif) repeat-y;
}
#main{
width: 999px;
margin: 0px auto;
background:#FFFFFF;
background: url(metamorph_colorwaves-images/top.jpg) top no-repeat #FFFFFF;
}
#bot { background:url(metamorph_colorwaves-images/bottom.jpg) bottom no-repeat;
padding: 10px 10px 0px 10px;
width: 979px;
}
#header { width:979px;
padding: 0px 0px 0px 0px;
height: 302px;
}
#logo{
font-family:Georgia, "Times New Roman", Times, serif;
color: #000000;
font-style:italic;
font-weight: bold;
font-size: 18px;
padding: 57px 0px 0px 678px
}
#logo H1{
font-family:Georgia, "Times New Roman", Times, serif;
color: #000000;
font-style:italic;
font-weight: bold;
font-size: 18px;
}
#logo H2{
font-family:Georgia, "Times New Roman", Times, serif;
color: #000000;
font-style:italic;
font-weight: bold;
font-size: 14px;
}
#buttons{
width: 979px;
height: 48px;
background: url(metamorph_colorwaves-images/menu.png) left top no-repeat;
text-align:center;
}
#buttons ul {
padding-left: 0px;
margin: 0px;
}
#buttons li {
display: inline;
}
#buttons a {
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight:normal;
display: block;
float: left;
width: 146px;
height: 35px;
text-decoration: none;
color: #FFFFFF;
padding-top: 13px;
margin-left: 42px;
text-align: center;
}
#buttons a:hover {
text-decoration: underline;
background:url(metamorph_colorwaves-images/bg_but.jpg) 0px 2px repeat-x;
}
#content{
width: 977px;
padding: 0px 0px 0px 0px;
background: url(metamorph_colorwaves-images/cont_bg.jpg) left top repeat-x #CE492D;
margin: 0px 1px 0px 1px;
}
#conttop{
background: url(metamorph_colorwaves-images/cont_top.gif) 0px 0px no-repeat;
width: 977px;
height: 8px;
margin: 0px 1px 0px 1px;
}
#contbot{
background: url(metamorph_colorwaves-images/cont_bot.gif) 0px bottom no-repeat;
width: 977px;
height: 8px;
margin: 0px 1px 0px 1px;
}
#razd {
background: url(metamorph_colorwaves-images/razd.gif) 476px repeat-y;
width: 952px;
min-height: 602px;
padding: 0px 14px 0px 12px;
}
#left{
width: 455px;
padding: 0px 0px 0px 0px;
margin: 0px;
float:left;
}
#center{float:left;
padding: 0px 0px 0px 21px;
width:228px;
}
.text{
padding: 8px 0px 0px 0px;
}
.img { float:left;
margin: 10px 12px 5px 0px;
}
.img_l {margin: 15px 0px 0px 19px;}
span { color:#ffffff;
font-weight:bold;
}
.red { color:#8A0000;}
.col_l {
float: left;
width:200px;
}
.col_r {
float: right;
width:210px;
margin-right: 20px;
}
.img_b { float:none;}
H1{
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:normal;
color: #FFFFFF;
padding-bottom: 5px;
padding-left: 0px;
background:url(metamorph_colorwaves-images/tit_bg.gif) bottom repeat-x;
}
.read{
text-align:right;
padding-right:0px;
padding-top: 8px;
}
.view{
text-align:right;
padding-right:0px;
padding-top: 5px;
}
#right{
float:right;
width: 222px;
background: url(metamorph_colorwaves-images/right_bg.gif) left repeat-y;
padding-right: 0px;
margin-left: 21px;
}
#center ul
{
list-style: none;
padding-left:0px;
padding-top:10px;
margin: 0px;
display:block;
padding-bottom: 0px;
}
#center li{
padding-top: 5px;
background: url(metamorph_colorwaves-images/fish_cent.png) 0px 12px no-repeat;
padding-left: 32px;
}
#footer{
height: 40px;
width: 586px;
font-size: 10px;
color: #000000;
padding-top: 8px;
text-align: center;
clear:both;
padding: 15px 5px 15px 5px;
}
#footer a{
color: #000000;
font-size: 10px;
text-decoration: none;
}
#footer a:hover{
color: #000000;
font-size: 10px;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="bg">
<div id="main">
<div id="bot">
<!-- header begins -->
<div id="header">
<div id="buttons">
<ul>
<li class="first"><a href="#" title="">Home</a></li>
<li><a href="#" title="">Blog</a></li>
<li><a href="#" title="">Gallery</a></li>
<li><a href="#" title="">About Us</a></li>
<li><a href="#" title="">Contact Us</a></li>
</ul>
</div>
<div id="logo">
<h1><a href="#">metamorph_colorwaves</a></h1>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
</div>
</div>
<!-- header ends -->
<div id="conttop"><img src="metamorph_colorwaves-images/spaser.gif" alt="" width="1" height="1" /></div>
<!-- content begins -->
<div id="content">
<div id="razd">
<div id="left">
<h1>Metamorphosis Design</h1>
<div class="text">
<img src="metamorph_colorwaves-images/img1.jpg" class="img" alt="" />
<span>Lorem ipsum dolor sit amet.</span> <br />
Consectetur adipiscing elit. Vestibulum eget pulvinar turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque aliquam viverra mi at porta. Cras posuere, enim eu ornare aliquet, lectus nibh vulputate risus, ut ullamcorper dui
purus non eros. Nullam sollicitudin fringilla pharetra. Praesent sit amet lectus a justo viverra luctus. Sed est eros, ultrices vitae malesuada ac, rutrum non nisl. Vivamus a elit mi. Integer accumsan euismod accumsan. Vivamus quis massa eu leo varius venenatis sed et augue. Cras faucibus diam ac mi facilisis...
</div>
<div class="read"><a href="#"><img src="metamorph_colorwaves-images/but_read.png" alt="" /></a></div><br />
<h1>Free Website Templetes</h1>
<div class="text">
<div class="col_l">
<img src="metamorph_colorwaves-images/img2.jpg" alt="" width="178" height="116" /><br />
<div class="text">
<span>Lorem ipsum dolor sit amet.</span><br />
Mauris venenatis nunc vestibulum felis porttitor sagittis. Donec nec arcu tempus dui pretium varius et...
<div class="read"><a href="#"><img src="metamorph_colorwaves-images/but_read.png" alt="" /></a></div>
</div>
<br />
</div>
<div class="col_r">
<img src="metamorph_colorwaves-images/img3.jpg" alt="" width="178" height="116" /><br />
<div class="text">
<span>Sed eget eros et mi.</span><br />Fringilla commodo adipiscing quis dolor. Nam at turpis augue, ac porta turpis. Nunc sodales lacus eu urna...
<div class="read"><a href="#"><img src="metamorph_colorwaves-images/but_read.png" alt="" /></a></div><br />
</div>
</div>
</div>
</div>
<div id="center">
<h1>Free Website Templates</h1>
<ul>
<li><span class="dat">05-11-2009 </span><br />
<span class="red">Lorem ipsum dolor sit amet. </span><br />
Consectetur adipiscing elit. Aliquam in sapien lorem. Morbi in nunc in ligula malesuada faucibus sit amet at leo. Donec sollicitudin nulla porta quam adipiscing nec suscipit sapien mattis. Fusce dignissim, elit et fringilla convallis, turpis felis tincidunt mi, vel auctor nisl risus eu quam. Aenean...
<div class="read"><a href="#"><img src="metamorph_colorwaves-images/but_read.png" alt="" /></a></div><br />
</li>
<li><span class="dat">05-11-2009 </span><br />
<span class="red">Lorem ipsum dolor sit amet. </span><br />
Consectetur adipiscing elit. Aliquam in sapien lorem. Morbi in nunc in ligula malesuada faucibus sit amet at leo. Donec sollicitudin nulla porta quam adipiscing nec suscipit sapien mattis. Fusce dignissim, elit et fringilla convallis, turpis felis tincidunt mi, vel auctor nisl risus eu quam. Aenean...
<div class="read"><a href="#"><img src="metamorph_colorwaves-images/but_read.png" alt="" /></a></div><br />
</li>
</ul>
</div>
<div id="right">
<h1>Latest Photos</h1>
<img src="metamorph_colorwaves-images/img4.jpg" height="116" width="178" class="img_l" alt="" /><br />
<img src="metamorph_colorwaves-images/img5.jpg" height="116" width="178" class="img_l" alt="" /><br />
<img src="metamorph_colorwaves-images/img6.jpg" height="116" width="178" class="img_l" alt="" /><br />
<img src="metamorph_colorwaves-images/img7.jpg" height="116" width="178" class="img_l" alt="" /><br />
<div class="read"><a href="#"><img src="metamorph_colorwaves-images/but_view.png" alt="" /></a></div>
</div>
<div style="clear: both"><img src="metamorph_colorwaves-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
</div>
<!-- content ends -->
<div id="contbot"><img src="metamorph_colorwaves-images/spaser.gif" alt="" /></div>
<!-- footer begins -->
<div id="footer">
Copyright 2009. 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>
</div>
</body>
</html>
Related examples in the same category