metamorph_bluewave
<!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: url(metamorph_bluewave-images/all.jpg) top repeat-x #0B4B70;
line-height:20px;
}
#bg { width:1034px;
background: url(metamorph_bluewave-images/bg.gif) repeat-y;
margin: 0px auto;
}
#pol_left { background:url(metamorph_bluewave-images/left_sh.jpg) top no-repeat;
width: 17px;
float:left;
height:996px;
}
#pol_right { background:url(metamorph_bluewave-images/right_sh.jpg) top no-repeat;
width: 17px;
float:left;
height:996px;
}
#main{
width: 1000px;
margin: 0px auto;
padding: 10px 0px 0px 0px;
background: url(metamorph_bluewave-images/bg_b.jpg) top no-repeat;
float:left;
}
#main_g {
background: url(metamorph_bluewave-images/main_g.jpg) 0px 426px repeat-x;
}
#header { width:1000px;
padding: 0px 0px 0px 0px;
height: 295px;
}
#logo{
text-align: right;
padding-top: 180px;
padding-right: 20px;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 16px;
color: #FFFFFF;
font-weight: bold;
}
#logo H2 a{
font-size: 10px;
}
#buttons{
width: 1000px;
height: 51px;
background: url(metamorph_bluewave-images/menu.jpg) left top no-repeat;
text-align:center;
}
#buttons ul {
padding-left: 0px;
margin-left:11px;
}
#buttons li {
display: inline;
}
#buttons a {
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight:normal;
display: block;
float: left;
width: 192px;
height: 34px;
text-decoration: none;
color: #FFFFFF;
padding-top: 15px;
text-align: center;
background:url(metamorph_bluewave-images/but.jpg) 0px 0px no-repeat;
margin-left:3px;
}
#buttons a:hover {
text-decoration: underline;
background:url(metamorph_bluewave-images/but.jpg) 0px 0px no-repeat;
}
#content{
width: 954px;
background: url(metamorph_bluewave-images/bg_png.png) ;
margin: 0px 11px 0px 11px;
padding: 12px 12px 12px 12px;
}
#razd {
background: url(metamorph_bluewave-images/razd.gif) 680px 0px repeat-y;
width: 954px;
min-height: 50px;
}
#left{
width: 667px;
padding: 0px 0px 0px 0px;
margin: 0px;
float:left;
}
#center{float:left;
padding: 0px 0px 0px 11px;
width:315px;
}
.text{
padding: 10px 0px 0px 0px;
}
.img { float:left;
margin: 5px 10px 5px 0px;
}
span { color:#0B4B70;
font-weight:bold;
}
.dat { text-decoration:underline;}
H1{
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:normal;
color: #0B3B57;
padding-bottom: 5px;
padding-left: 0px;
background: url(metamorph_bluewave-images/tit_bg.gif) bottom repeat-x;
}
.read{
text-align:right;
padding-right:20px;
}
#right{
float:right;
width: 260px;
background: url(metamorph_bluewave-images/right_bg.gif) left repeat-y;
}
#right ul
{
list-style: none;
padding-left:0px;
padding-top:10px;
margin: 0px;
display:block;
padding-bottom: 0px;
}
#padding { padding-top: 5px;
background:url(metamorph_bluewave-images/tit_bg.gif) top repeat-x;
}
#right li{
padding-top: 0px;
background: url(metamorph_bluewave-images/fish.png) 0px 9px no-repeat;
padding-left: 26px;
}
.munth { line-height: 25px;
padding-top:10px;
}
.munth li {padding-top:10px;}
#footer{
height: 40px;
width: 986px;
font-size: 10px;
color: #FFFFFF;
padding-top: 8px;
text-align: center;
clear:both;
padding: 15px 5px 15px 5px;
}
#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 id="bg">
<div id="pol_left"></div>
<div id="main">
<div id="main_g">
<!-- header begins -->
<div id="header">
<div id="buttons">
<ul>
<li><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"><a href="#">metamorph_bluewave</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="razd">
<div id="left">
<h1>Metamorphosis Design</h1>
<div class="text">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><br />
Quisque molestie gravida egestas. Morbi tincidunt magna sit amet libero interdum ut consequat ipsum facilisis. Nulla feugiat eleifend augue in fermentum. Vestibulum felis purus, porttitor vitae placerat sit amet, auctor at orci. Mauris nec nunc in enim volutpat gravida. In leo lectus, fringilla nec varius in, pharetra ac arcu. Nunc porttitor pellentesque vestibulum. Sed tristique pulvinar rhoncus. Sed bibendum ante ultrices massa pellentesque ac consequat dolor faucibus. Quisque malesuada, magna et mattis sodales, velit eros convallis turpis, quis aliquet lectus orci sit amet libero.<br /><br />
</div>
<div class="text">
<img src="metamorph_bluewave-images/img1.jpg" class="img" alt="" />
<span>Ut quis magna gravida nibh varius malesuada vitae ac leo.</span> <br />
Proin malesuada, nisi at pretium sollicitudin, purus purus sodales purus, sed scelerisque velit ipsum non mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin turpis lorem, vehicula ut rutrum sit amet, laoreet consequat turpis. Sed non imperdiet mauris. Aenean vitae lectus ipsum. Cras luctus molestie nibh id lobortis. Phasellus egestas risus at ligula
quis magna gravida nibh varius malesuada vitae ac leo. Proin malesuada, nisi at pretium sollicitudin, purus purus sodales purus, sed scelerisque velit ipsum non mauris. Cum sociis natoque penatibus et magnis dis pa mauris. Cum sociis natoque penatibus et magnis dis parturient... <br />
</div>
<div class="read"><a href="#">read more</a></div><br />
<h1>Free Website Templates</h1>
<div class="text">
<img src="metamorph_bluewave-images/img2.jpg" class="img" alt="" />
<span>Suspendisse sit amet dictum justo. </span> <br />
In eu viverra velit. In hac habitasse platea dictumst. Quisque ac nisl felis, ac egestas justo. Pellentesque eu odio et nisi auctor vehicula. Etiam porttitor, ligula vel pharetra blandit, ligula neque imperdiet lectus, vel laoreet ipsum eros eget enim. Sed id dignissim nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer in nisi ante, sed egestas est. Morbi ultrices sagittis odio at porttitor. Ut tincidunt ultricies ante eget porttitor. Donec et diam non diam pellentesque
dapibus. Vestibulum adipiscing varius arcu, interdum facilisis mauris lobortis in. Proin pellentesque quam vitae mi laoreet vestibulum. Suspendisse iaculis, sapien ut egestas tristique, nibh odio ultrices sapien, sit amet congue massa dolor sit...
</div>
<div class="read"><a href="#">read more</a></div>
</div>
<div id="right">
<h1>Categories</h1>
<ul class="munth">
<li>January 2009</li>
<li>February 2009</li>
<li>March 2009</li>
<li>April 2009</li>
<li>May 2009</li>
<li>June 2009</li>
</ul><br />
<h1>Company News</h1>
<ul>
<li><span class="dat">05-11-2009</span> <br /><span>Lorem ipsum dolor sit amet. </span><br />
Consectetur adipiscing elit. Integer ac bibendum lorem. Nunc bibendum scelerisque porta. Curabitur egestas lorem eu sapien lacinia accumsan vulputate dui...
<div class="read"><a href="#">read more</a></div>
<h1 id="padding"></h1>
</li>
<li ><span class="dat">05-11-2009</span> <br /><span>Lorem ipsum dolor sit amet. </span><br />
Consectetur adipiscing elit. Integer ac bibendum lorem. Nunc bibendum scelerisque porta. Curabitur egestas lorem eu sapien lacinia accumsan vulputate dui...
<div class="read"><a href="#">read more</a></div>
</li>
</ul>
</div>
<div style="clear: both"><img src="metamorph_bluewave-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
</div>
<!-- content ends -->
<!-- footer begins -->
<div id="footer">
Copyright 2009. Designed by <a href="http://www.metamorphozis.com/" title="Free Website Templates">Free 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>
<div id="pol_right"></div>
<div style="clear: both"></div>
</div>
</body>
</html>
Related examples in the same category