metamorph_lightful
<!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: #264FA4;
text-decoration:none;
}
a:hover{
text-decoration: underline;
color: #264FA4;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background: url(metamorph_lightful-images/bg.jpg);
line-height:20px;
}
#main{
width: 999px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
background: #B2B3B3;
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
}
#header { width:999px;
padding: 0px 0px 0px 0px;
height: 428px;
background:url(metamorph_lightful-images/header.jpg) left top no-repeat;
}
#logo {
padding: 28px 0px 0px 704px;
height: 328px;
text-align: center
}
#logo H1
{
font-family:Georgia, "Times New Roman", Times, serif;
color:#FFFFFF;
font-size:18px;
font-style:italic;
text-decoration: none;
background: none;
padding: 0px;
margin: 0px;
}
#logo H2 a
{
font-family:Georgia, "Times New Roman", Times, serif;
color:#FFFFFF;
font-size:14px;
font-style:italic;
text-decoration: none;
background: none;
}
#logo H2
{
background: none;
padding: 0px;
margin: 0px;
}
#buttons{
width: 983px;
height: 64px;
background: url(metamorph_lightful-images/menu.jpg) left top no-repeat;
text-align:center;
margin-left: 8px;
}
#buttons ul {
padding-left: 20px;
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: 170px;
height: 42px;
text-decoration: none;
color: #FFFFFF;
padding-top: 22px;
padding-left: 0px;
margin-left: 15px;
text-align: center;
background:url(metamorph_lightful-images/fish_but.gif) 0px 19px no-repeat;
}
#buttons a:hover {
text-decoration: underline;
background: url(metamorph_lightful-images/but_over.png) 0px 2px repeat-x;
}
#content{
width: 983px;
padding: 0px 0px 0px 0px;
background: url(metamorph_lightful-images/bg_cont.gif) left repeat-y;
margin: 0px 8px 0px 8px;
}
#cont_top { background: url(metamorph_lightful-images/top.gif) top repeat;
width: 983px;
height:10px;
margin-left: 8px;}
#cont_bot { background: url(metamorph_lightful-images/bot.gif) bottom repeat;
width: 983px;
height:10px;
margin-left: 8px;}
#left{
width: 697px;
margin: 0px 0px 0px 8px;
float: left;
}
.text{
padding: 10px 0px 0px 0px;
}
.img { float:left;
margin: 5px 18px 5px 9px;
}
span { color:#1380BA;
font-weight:bold;
}
.dat { text-decoration:underline;}
#col_l {float:left;
width:342px;}
#col_r {float: left;
width:345px;
margin-left:10px}
H1{
font-family: Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-weight:normal;
color: #1380BA;
padding-bottom: 5px;
text-align:center;
background: url(metamorph_lightful-images/tit.gif) bottom repeat-x;
}
H2{
font-family: Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-weight:normal;
color: #1380BA;
padding-bottom: 4px;
padding-left: 4px;
text-align: left;
background: url(metamorph_lightful-images/tit.gif) bottom repeat-x;
}
.read{
text-align:right;
padding-right:10px;
padding-top: 5px;
font-weight:bold;
}
.read_pap{
text-align:right;
padding-right:0px;
font-weight:bold;
}
#right{
float:right;
width: 231px;
background: url(metamorph_lightful-images/bg_left.jpg) left 25px repeat-x;
margin-left: 8px;
padding: 0px 18px 0px 10px;
}
#right ul
{
list-style: none;
padding-left:0px;
padding-top:0px;
margin: 0px;
display:block;
padding-bottom: 0px;
}
#right li{
padding-top: 9px;
background: url(metamorph_lightful-images/fish.gif) 3px 16px no-repeat;
padding-left: 43px;
}
#footer{
height: 56px;
width: 1000px;
font-size: 10px;
color: #FFFFFF;
padding-top: 8px;
text-align: center;
clear:both;
padding: 17px 0px 0px 0px;
background: url(metamorph_lightful-images/footer.jpg) center no-repeat;
}
#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="main">
<!-- header begins -->
<div id="header">
<div id="logo">
<h1>metamorph_lightful</h1>
<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="#" title="">About Us</a></li>
<li><a href="#" title="">Contact Us</a></li>
</ul>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="cont_top"></div>
<div id="content">
<div id="left">
<h2>Metamorphosis Design</h2>
<div class="text">
<img src="metamorph_lightful-images/img1.jpg" width="127" height="95" class="img" alt="" />
<span>Mauris sed mi urna, non rutrum risus.</span> <br />
Aliquam non pulvinar ante. Donec rutrum dui eget ante laoreet fermentum. Proin ac lorem nisl. Sed semper vulputate ipsum, sed iaculis libero congue sit amet. Aliquam in sodales neque. Donec vitae leo purus. Nunc sed tellus suscipit lacus congue ultricies ac ut ipsum. Donec placerat leo quis turpis imperdiet suscipit. Donec pellentesque elementum orci, vel tristique arcu varius vel. Pellentesque vitae ante eget ipsum interdum posuere. Cras a nisl arcu, at dignissim...</div>
<div class="read"><a href="#"><img src="metamorph_lightful-images/but_read.gif" alt="" /></a></div><br />
<div>
<h2>Free Website Templates</h2>
<div id="col_l">
<div class="text">
<img src="metamorph_lightful-images/img2.jpg" width="127" height="95" class="img" alt="" />
<span>Nulla facilisi. </span> <br />
Quisque placerat volutpat imperdiet. Vestibulum lorem eros, consectetur quis vehicula nec, bibendum eget ante. Sed sodales ligula ac ante fringilla nec laoreet
risus ornare. Etiam feugiat eros nec magna mollis vel laoreet justo suscipit. Vivamus pretium tincidunt nunc, eget pharetra enim aliquet nec. Praesent dictum metus ut nulla aliquam ultrices. In hac habitasse platea dictumst. Nullam id lectus euismod tellus malesuada facilisis. Suspendisse vel...
<div class="read"><a href="#"><img src="metamorph_lightful-images/but_read.gif" alt="" /></a></div><br />
</div>
</div>
<div id="col_r">
<div class="text">
<img src="metamorph_lightful-images/img3.jpg" width="127" height="95" class="img" alt="" />
<span>Nullam et risus velit. </span> <br />
Praesent pharetra molestie lectus, rhoncus luctus tortor rutrum et. Morbi a risus ut felis tristique iacu- lis. Suspendisse fermentum, eros at tempus blandit, augue turpis ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce aliquam, elit non sodales scelerisque, velit ipsum sodales elit, quis laoreet magna dui id dolor. Mauris non arcu dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin ultricies
<div class="read"><a href="#"><img src="metamorph_lightful-images/but_read.gif" alt="" /></a></div><br />
</div>
</div>
</div>
</div>
<div id="right">
<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. Nunc tempor lacus sed enim bibendum porttitor. Integer a purus vel mi pulvinar gravida id non urna. Etiam imperdiet elementum quam tempus aliquam. Nam id lorem elit, ac feugiat elit. In nec mauris...
<div class="read"><a href="#"><img src="metamorph_lightful-images/but_read.gif" alt="" /></a></div><br />
</li>
<li><span class="dat">05-11-2009 </span><br /><span>Lorem ipsum dolor sit amet.</span><br />
Consectetur adipiscing elit. Nunc tempor lacus sed enim bibendum porttitor. Integer a purus vel mi pulvinar gravida id non urna. Etiam imperdiet elementum quam tempus aliquam. Nam id lorem elit, ac feugiat elit. In nec mauris...
<div class="read"><a href="#"><img src="metamorph_lightful-images/but_read.gif" alt="" /></a></div>
</li>
</ul>
<br />
</div>
<div style="clear: both"><img src="metamorph_lightful-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
<!-- content ends -->
<div id="cont_bot"></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>
</body>
</html>
Related examples in the same category