metamorph_wavesinblue
<!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: #FFFFFF;
text-decoration:none;
}
a:hover{
text-decoration: underline;
color: #FFFFFF;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
line-height:20px;
background: #000000;
}
#main_bg{
width: 1032px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
background: url(metamorph_wavesinblue-images/bg.gif) #000000;
}
#main {
width: 1014px;
margin-left: 9px;
}
#header {
width:1014px;
padding: 0px 0px 0px 0px;
height: 385px;
background: url(metamorph_wavesinblue-images/big.jpg) left top no-repeat;
}
#logo { font-family:Georgia, "Times New Roman", Times, serif;
color:#FFFFFF;
font-size:18px;
font-style:italic;
padding: 28px 0px 0px 704px;
height: 295px;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 16px;
color: #ffffff;
font-weight: bold;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-transform: none;
}
#buttons{
width: 991px;
height: 51px;
background: url(metamorph_wavesinblue-images/but_bg.jpg) top repeat-x;
text-align:center;
margin-left: 0px;
float:right;
padding-left: 23px
}
#buttons ul {
padding-left: 0px;
margin: 0px;
}
#buttons li {
display: inline;
}
#buttons a {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight:normal;
display: block;
float: left;
width: 194px;
height: 34px;
text-decoration: none;
color: #FFFFFF;
padding-top: 17px;
text-align: center;
background:url(metamorph_wavesinblue-images/fish_b.gif) 0px 23px no-repeat;
}
#buttons a:hover {
text-decoration: underline;
background: url(metamorph_wavesinblue-images/but_over.jpg) repeat-x;
}
#content{
width: 991px;
padding: 0px 0px 0px 0px;
background: url(metamorph_wavesinblue-images/cont_bg.png);
margin: 0px 0px 0px 10px;
min-height: 580px;
}
#left{
width: 265px;
margin: 0px 0px 0px 0px;
float: left;
color:#C7C8CA;
}
.left_b { background: url(metamorph_wavesinblue-images/fish.jpg) 12px 18px no-repeat;
padding-left: 41px;
padding-top: 15px;
width: 213px;}
.text{
padding: 5px 0px 0px 0px;
}
.img { float:left;
margin: 12px 12px 5px 0px;
}
span { color:#FFFFFF;
font-weight:bold;
}
.dat { text-decoration: underline;
color:#FFFFFF;}
.col_b {color:#FFFFFF;}
#left H1{
font-family: Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-weight: 100;
color: #ffffff;
text-align:center;
background:url(metamorph_wavesinblue-images/tit_l.jpg) left top no-repeat;
height: 32px;
padding-top: 15px;
}
#right H2{
font-family: Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-weight: 100;
color: #08295A;
padding-bottom: 13px;
padding-left: 4px;
text-align: left;
background: url(metamorph_wavesinblue-images/tit_right.jpg) bottom repeat-x;
width: 100%;
}
.read_r{
text-align:right;
padding-right:20px;
padding-top: 5px;
font-weight:bold;
text-decoration:none;
color:#FFFFFF;
}
#right{
float:right;
width: 716px;
background: url(metamorph_wavesinblue-images/bg_left.jpg) left 25px repeat-x;
margin-right: 0px;
padding: 0px 0px 0px 0px;
}
.right_top { background: url(metamorph_wavesinblue-images/r_top.gif) top no-repeat;
height:9px;
width: 716px;
}
.right_bot { background: url(metamorph_wavesinblue-images/r_bot.gif) bottom no-repeat;
height:9px;
width: 716px;}
.right_s { background:#ABABAB;
width: 692px;
padding: 0px 12px 0px 12px;}
.col_l {float:left;
width:250px;
margin-left:0px;
margin-top:5px;
}
.col_r {float: left;
width:425px;
margin-left:15px;
margin-top:5px;
}
.left_r { width: 238px;
float:left;
}
.right_r {
width: 175px;
float:right;
}
#footer{
height: 53px;
width: 100%;
font-size: 12px;
color: #000000;
text-align: center;
clear:both;
padding: 16px 0px 0px 0px;
background: url(metamorph_wavesinblue-images/footer.jpg) 0px 11px repeat-x;
}
#footer a{
color: #000000;
font-size: 12px;
text-decoration: none;
}
#footer a:hover{
color: #000000;
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_wavesinblue</a><h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2></div>
<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="#" class="last_b" title="">About us</a></li>
<li ><a href="#" title="" class="last_b">Contact us</a></li>
</ul>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="content">
<div id="left">
<h1>Company News</h1>
<div class="tit_bot">
<div class="left_b"><span class="dat">05-01-2010</span><br /><span class="col_b">Quisque et mauris turpis, quis imperdiet nibh. </span><br />
Vivamus posuere ligula sed lacus semper vehicula. Aliquam suscipit rhoncus ipsum quis gravida. Pellentesque malesuada quam non dui fermentum tincidunt. Vivamus at nisl augue, non viverra leo. Sed vitae pulvinar sapien. Vestibulum ante ipsum... </div>
<div class="read_r"><a href="#"><img src="metamorph_wavesinblue-images/read.gif" alt="" /></a></div>
<div class="left_b"><span class="dat">05-01-2010</span><br /><span class="col_b">Quisque et mauris turpis, quis imperdiet nibh. </span><br />
Vivamus posuere ligula sed lacus semper vehicula. Aliquam suscipit rhoncus ipsum quis gravida. Pellentesque malesuada quam non dui fermentum tincidunt. Vivamus at nisl augue, non viverra leo. Sed vitae pulvinar sapien. Vestibulum ante ipsum... </div>
<div class="read_r"><a href="#"><img src="metamorph_wavesinblue-images/read.gif" alt="" /></a></div>
</div>
</div>
<div id="right">
<div class="right_top"></div>
<div class="right_s">
<h2>Metamorphosis Design</h2>
<div>
<div class="col_l">
<img src="metamorph_wavesinblue-images/img1.jpg" width="124" height="94" class="img" alt="" />
<span>Lorem ipsum dolor sit amet.</span><br />
Consectetur adipi- scing elit. Mauris tellus lectus, sceler- isque non imperdiet. ac, convallis vitae metus. Fusce a iaculis purus. Vivamus a quam turpis, in ullamcorper lacus. Vestibulum arcu nulla, porttitor ut sollicitudin sed, eleifend sed nibh. Sed laoreet dui nec justo rutrum congue. Aenean quis est arcu, id adipiscing neque. Proin at enim in nisl ultricies venenatis ac id sem. Quisque ut iaculis justo. Nunc ipsum leo, euismod sed suscipit vel, convallis non... <br />
<div class="read_r"><a href="#">read more</a></div>
</div>
<div class="col_r">
<img src="metamorph_wavesinblue-images/img2.jpg" width="124" height="94" class="img" alt="" />
<span>Phasellus et leo sed est porttitor mollis. </span><br />
Etiam lobortis cursus augue ut adipiscing. Fusce fringilla, risus eu tincidunt cursus, lacus lorem ven- enatis augue, ac tristique est turpis id lacus. Aenean ut urna ante, eget mollis nulla. Nulla id vestibulum. <br /><br />
<div class="left_r"><span>Donec aliquam.</span><br />
Diam eget malesuada iaculis, est leo viverra diam, vulputate dapibus nisl erat elementum sapien. Vivamus ac dictum nunc. Sed et elit dui, eu hendrerit felis. Duis mattis commodo nisi volutpat sagittis. Pellentesque et risus ornare erat ultrices eleifend malesuada at mauris. Nunc orci lorem, feugiat non fringilla... <br/>
<div class="read_r"><a href="#">read more</a></div><br />
</div>
<div class="right_r">
<span>Integer ac gravida magna.</span><br />
Quisque adipiscing ultrices ante eget pretium. Vestibulum tellus lacus, dignissim vitae bibendum id, elementum at nulla. Nullam hendrerit aliquam sem, non condimentum nulla iaculis nec. Sed... <br /><br />
<div class="read_r"><a href="#">read more</a></div><br />
</div>
</div>
<div style="clear: both"><img src="metamorph_wavesinblue-images/spaser.gif" alt="" width="1" height="1" /></div><br />
</div>
<h2>Free Website Templates</h2>
<div class="text">
<span>Aenean dapibus felis eu mi sodales varius. </span><br />
Sed vestibulum porta nisi, ut condimentum nisi faucibus eget. Vivamus commodo rutrum est, ac pellentesque leo mollis ut. Fusce dignissim eros a nisl varius eleifend. Praesent eu mi ligula. Suspendisse eget nunc orci. Integer sed tellus vel turpis faucibus malesuada eget id libero. Cras lobortis, enim ac vestibulum eleifend, orci enim pellentesque turpis, id luctus elit... <br />
<div class="read_r"><a href="#">read more</a></div>
</div><br />
<div style="clear: both"><img src="metamorph_wavesinblue-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
<div class="right_bot"></div>
</div>
<div style="clear: both"><img src="metamorph_wavesinblue-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
<!-- content ends -->
<!-- footer begins -->
<div id="footer">
Copyright 2009. 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