metamorph_thames
<!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:none;
color:#FFFFFF;
}
a:hover{
text-decoration: underline;
color:#FFFFFF;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #FFFFFF;
line-height:20px;
background: url(metamorph_thames-images/bg.jpg) 0px 182px repeat-x #078E80;
}
.bg_foot {
background: url(metamorph_thames-images/foot.jpg) bottom repeat-x;}
#main{
width: 1014px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
}
#header { width:1014px;
padding: 0px 0px 0px 0px;
height: 254px;
background: url(metamorph_thames-images/head.jpg) 197px 0px no-repeat ;
}
#buttons{
width: 1014px;
background: url(metamorph_thames-images/menu.jpg) left top repeat-x;
text-align:center;
height:58px;
margin-right:0px;
padding-left:0px;
}
#buttons a {
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight:bold;
display: block;
float: left;
width: 202px;
height: 40px;
text-decoration: none;
color: #00312C;
padding-top: 18px;
text-align: center;
}
#buttons a:hover {
background: url(metamorph_thames-images/but_ov.jpg) center top no-repeat;
color:#00312C;
margin-right: 0px;
}
#logo{
background: url(metamorph_thames-images/logo.jpg) center top no-repeat;
height: 115px;
padding: 70px 0px 0px 27px;
}
#logo a {
font-family:Georgia, "Times New Roman", Times, serif;
text-decoration: none;
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
font-style:italic;
}
#logo H3 a{
font-size: 12px;
background:none;
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic;
}
#text_top {
color:#000000;
width:234px;
margin: 11px 0px 0px 19px;}
#content{
width: 1014px;
padding: 0px 0px 0px 0px;
background: url(metamorph_thames-images/razd.gif) 687px 0px repeat-y;
}
#left{
width: 678px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
float:left;
background: url(metamorph_thames-images/left.jpg) top repeat-x;
}
.text{
padding: 10px 20px 0px 3px;
}
.img { float:left;
margin: 6px 17px 5px 0px;
}
span { color:#003731;
font-weight:bold;
}
.dat { text-decoration:underline;}
#right H1{
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:normal;
color: #003731;
padding-left: 23px;
padding-top: 17px;
padding-bottom: 8px;
text-align: left;
background: url(metamorph_thames-images/tit.gif) bottom repeat-x;
}
#left H2{
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:normal;
color: #003731;
padding-bottom: 8px;
padding-left: 3px;
padding-top: 17px;
text-align:left;
background: url(metamorph_thames-images/tit.gif) bottom repeat-x;
}
.read{
text-align:right;
padding-right:5px;
padding-top: 5px;
}
.read_r{
text-align:right;
padding-right:5px;
padding-top: 8px;
}
#right{
float:right;
width: 314px;
margin-right: 3px;
background: url(metamorph_thames-images/right.jpg) top repeat-x;
}
#right ul
{
list-style: none;
padding-left:0px;
padding-top:5px;
margin: 0px;
display:block;
padding-bottom: 0px;
background:url(metamorph_thames-images/ul_bg.gif) left repeat-y;
}
#right li{
padding-top: 5px;
padding-bottom: 5px;
background:url(metamorph_thames-images/fish.gif) 22px 13px no-repeat;
}
#right a {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 54px;
}
#right .list
{
list-style: none;
padding-left: 56px;
padding-top: 5px;
padding-bottom: 10px;
margin: 0px;
display:block;
background: url(metamorph_thames-images/fish.gif) 23px 13px no-repeat;
}
#footer{
height: 48px;
width: 1014px;
font-size: 12px;
color: #003731;
text-align: center;
clear:both;
padding: 10px 0px 0px 0px;
}
#footer a{
color: #003731;
font-size: 12px;
text-decoration: none;
}
#footer a:hover{
color: #003731;
font-size: 12px;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="bg_foot">
<div id="main">
<!-- header begins -->
<div id="header">
<div id="logo"><a href="#">metamorph_thames</a>
<h3><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h3>
</div>
<div id="buttons">
<div class="razd_but"><a href="#" title="">Home</a></div>
<div class="razd_but"><a href="#" title="">Blog</a></div>
<div class="razd_but" ><a href="#" title="">Gallery</a></div>
<div class="razd_but" ><a href="#" title="">About Us</a></div>
<div ><a href="#" title="">Contact Us</a></div>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="content">
<div id="left">
<h2>Metamorphosis Design</h2>
<div class="text">
<img src="metamorph_thames-images/img.jpg" width="162" height="115" class="img" alt="" /><span >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> <br />
Morbi sodales commodo dui, in varius est mattis eu. In hac habitasse platea dictumst. Duis tempor facilisis diam, ac auctor dui dapibus porta. Suspendisse potenti. Vestibulum molestie adipiscing libero nec sollicitudin. Fusce ac arcu in turpis venenatis accumsan. Sed eleifend turpis ac risus rhoncus facilisis sed eu massa. Proin nibh sem, feugiat id semper a, vestibulum sed libero. Ut auctor lorem et neque mollis quis tristique ipsum porta. Pellentesque euismod nunc nec turpis ultrices <br />
sit amet, consectetur adipiscing elit. Morbi sodales commodo dui, in varius est mattis eu. In hac habitasse platea dictumst. Duis tempor facilisis diam, ac auctor dui dapibus porta. Suspendisse potenti. Vestibulum molestie adipiscing libero nec sollicitudin. Fusce ac arcu in turpis venenatis accumsan. Sed eleifend turpis ac risus rhoncus facilisis sed eu massa. Proin nibh sem, feugiat id semper a, vestibulum sed libero. Ut auctor lorem et neque mollis quis tristique ipsum porta. Pellentesque euismod nunc nec turpis ultrices ornare. Ut vel nunc massa, non dignissim.
<div class="read"><a href="#"><img src="metamorph_thames-images/b_read.gif" alt="" /></a></div>
</div>
<br />
<h2>Free Website Templates</h2>
<div class="text">
<ol>
<li><a href="http://www.metamorphozis.com/free_templates/free_templates.php">Free Website Templates</a></li>
<li><a href="http://www.metamorphozis.com/shop/flash_templates.php">Flash Templates</a></li>
<li><a href="http://www.metamorphozis.com/website_hosting/index.php">Top Hosting Providers</a></li>
<li><a href="http://www.metamorphozis.com/contact/contact.php">Support For Free Website Templates</a></li>
</ol>
<span>Cras sapien erat, aliquet at convallis sit amet, malesuada ut turpis. </span> <br />
Morbi id mauris lorem, id malesuada diam. Praesent sed accumsan turpis. Donec orci lectus, interdum luctus egestas in, blandit eget odio. Praesent congue tortor non augue mollis volutpat mattis eget enim. Aliquam quis justo vitae metus tincidunt tristique ac at tellus. <br /><br />
<span>Ut mollis nulla id sapien convallis eu tempor velit aliquam. </span> <br />
Nunc pretium ultricies orci ac mollis. Proin at diam quam. Vestibulum facilisis lacus in magna malesuada et fermentum. turpis sollicitudin. Vestibulum vel. pulvinar elit. In adipiscing commodo lorem sit amet commodo. Donec posuere cursus purus, eu posuere metus mattis ut. Fusce nulla lectus, interdum ut cursus eu, cursus id metus. Nulla facilisis.<br />
</div>
</div>
<div id="right">
<h1>Categories</h1>
<div class="tit_bot">
<ul>
<li><a href="">Lorem ipsum</a></li>
<li><a href="">Morbi sodales</a></li>
<li><a href="">Suspendisse potenti</a></li>
<li><a href="">Vestibulum molestie </a></li>
<li><a href="">Fusce fringilla</a></li>
<li><a href="">Praesent in malesuada</a></li>
</ul>
</div>
<h1>Company News</h1>
<div class="tit_bot">
<div class="list"><span class="dat">05-01-2010</span><br />
<span>Sed id augue nunc.</span><br />
Praesent in malesuada enim. Fusce non risus turpis, quis porta libero. Aenean mattis dolor a nibh tempus laoreet. Nullam vulputate...
<div class="read_r"><a href="#"><img src="metamorph_thames-images/b_read.gif" alt="" /></a></div>
</div>
<div class="list"><span class="dat">05-01-2010</span><br />
<span>Sed id augue nunc.</span><br />
Praesent in malesuada enim. Fusce non risus turpis, quis porta libero. Aenean mattis dolor a nibh tempus laoreet. Nullam vulputate...
<div class="read_r"><a href="#"><img src="metamorph_thames-images/b_read.gif" alt="" /></a></div>
</div>
<div class="list"><span class="dat">05-01-2010</span><br />
<span>Sed id augue nunc.</span><br />
Praesent in malesuada enim. Fusce non risus turpis, quis porta libero. Aenean mattis dolor a nibh tempus laoreet. Nullam vulputate...
<div class="read_r"><a href="#"><img src="metamorph_thames-images/b_read.gif" alt="" /></a></div>
</div>
</div>
</div>
<div style="clear: both;"><img src="metamorph_thames-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
<!-- content ends --><br />
<!-- footer begins -->
<div id="footer">
<p>Copyright 2010. <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></p>
<p>Design by <a href="http://www.metamorphozis.com/" title="Free Website Templates">Free Website Templates</a> for <a href="http://www.flashtemplatesdesign.com/" title="Flash Templates">Flash Templates</a>
</p>
</div>
<!-- footer ends -->
</div>
</div>
</body>
</html>
Related examples in the same category