metamorph_sunshore
<!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: underline;
color:#1A5B8F;
}
a:hover{
color:#1A5B8F;
text-decoration:none;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
line-height:20px;
background: url(metamorph_sunshore-images/bg.jpg) top left repeat-x #4FBEDD;
}
.bg_foot {
background: url(metamorph_sunshore-images/footer.jpg) bottom repeat-x;}
#main{
width: 690px;
margin: 0px auto;
padding: 70px 0px 0px 0px;
}
#header { width:690px;
padding: 0px 0px 0px 0px;
height: 325px;
background: url(metamorph_sunshore-images/head.jpg) 197px 0px no-repeat ;
}
#buttons{
width: 690px;
background: url(metamorph_sunshore-images/menu.jpg) left top repeat-x;
text-align:center;
height:52px;
margin-right:0px;
}
#buttons a {
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: 100;
display: block;
float: left;
width: 138px;
height: 39px;
text-decoration: none;
color: #FFFFFF;
padding-top: 13px;
text-align: center;
}
#buttons a:hover {
text-decoration: none;
background:url(metamorph_sunshore-images/but_ov.jpg) center bottom no-repeat;
color:#FFFFFF;
margin-right: 0px;
}
#logo{
background: url(metamorph_sunshore-images/logo.jpg) center top no-repeat;
height: 238px;
padding: 22px 0px 0px 384px;
}
#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;
}
#bg_top {
background: url(metamorph_sunshore-images/bg_top.jpg) left top no-repeat;
height:304px;
width:317px;
float:left;}
#content{
width: 690px;
padding: 7px 0px 0px 0px;
background:#FFFFFF;
}
#left{
width: 443px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 8px;
float:left;
background: url(metamorph_sunshore-images/left.jpg) top repeat-x;
}
.left_b {
padding: 15px 10px 0px 6px;
background:url(metamorph_sunshore-images/tit_lb.jpg) left top no-repeat;
}
.razd_l {
height:2px;
width: 100%;
background:url(metamorph_sunshore-images/razd_l.gif) bottom repeat-x;}
.tit_bot { background: url(metamorph_sunshore-images/tit_rb.jpg) left top no-repeat;
padding: 7px 5px 0px 0px;
}
.text{
padding: 0px 20px 0px 15px;
}
.img { float:left;
margin: 6px 17px 5px 0px;
}
.img_r { float: right;
margin: 10px 0px 0px 15px;
}
.free {
padding: 0px 0px 0px 10px;}
span { color:#0F467E;
font-weight:bold;
}
.dat { text-decoration:underline;}
#right H1{
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:normal;
color: #FFFFFF;
height: 30px;
padding-left: 10px;
padding-top: 4px;
text-align: left;
background: url(metamorph_sunshore-images/tit_r.gif) 0px 0px no-repeat;
}
#left H2{
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:normal;
color: #FFFFFF;
padding-left: 8px;
padding-top: 4px;
height:30px;
text-align:left;
background: url(metamorph_sunshore-images/tit_l.gif) 0px 0px no-repeat;
}
.read{
text-align:right;
padding-right:5px;
padding-top: 5px;
}
.color_r { color:#0F467E;
font-weight:bold;
text-decoration:underline;}
a:hover { text-decoration:none;}
.read_r{
text-align:right;
padding-right:5px;
padding-top: 8px;
}
#right{
float:right;
width: 226px;
margin-right: 7px;
background: url(metamorph_sunshore-images/right.jpg) top repeat-x;
}
#right ul
{
list-style: none;
padding-left:0px;
padding-top:0px;
margin: 0px;
display:block;
padding-bottom: 0px;
}
#right li{
padding-top: 10px;
padding-left: 23px;
background: url(metamorph_sunshore-images/fish.gif) 8px 17px no-repeat;
}
#right .list
{
list-style: none;
padding-left: 23px;
padding-top: 5px;
padding-bottom: 10px;
margin: 0px;
display:block;
background: url(metamorph_sunshore-images/fish.gif) 0px 12px no-repeat;
}
#footer{
height: 50px;
width: 690px;
font-size: 10px;
color: #FFFFFF;
text-align: center;
clear:both;
padding: 10px 0px 0px 0px;
}
#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 class="bg_foot">
<div id="main">
<!-- header begins -->
<div id="header">
<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 id="logo"><a href="#">metamorph_sunshore</a>
<h3><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h3>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="content">
<div id="left">
<h2>Metamorphosis Design</h2>
<div class="left_b">
<img src="metamorph_sunshore-images/img1.jpg" width="102" height="77" class="img" alt="" /><span >Sed sed mi sed arcu tempor porta. </span> <br />
Curabitur sit amet justo massa, ultrices imperdiet justo. Fusce leo neque, tempus quis iaculis at, vestibulum ac eros. Aliquam sed fringilla nisl. Donec fringilla, purus at lacinia tristique, nulla mi posuere lorem, a venenatis <br />
Sed sed mi sed arcu tempor porta. Curabitur sit amet justo massa, ultrices imperdiet justo. Fusce leo neque, tempus quis iaculis at, vestibulum ac eros. Aliquam sed fringilla nisl. Donec fringilla, purus at lacinia tristique, nulla...
<div class="read"><a href="#" class="color_r">read more</a></div>
<br />
</div>
<h2>Free Website Templates</h2>
<div class="left_b">
<img src="metamorph_sunshore-images/img2.jpg" width="102" height="77" class="img_r" alt="" /><span>Proin vitae orci odio, at consectetur libero. </span> <br />
Nam pretium imperdiet lacus quis pharetra. Aliquam sem odio, laoreet ac hendrerit ac, facilisis in erat. Nulla varius tincidunt commodo. Etiam fringilla felis nec nisi iaculis bibendum. Mauris mauris mi, volutpat blandit<br />
Mauris ornare nisi vitae dui ullamcorper imperdiet. Nam pretium imperdiet...
<div class="read"><a href="#" class="color_r">read more</a></div><br />
</div>
</div>
<div id="right">
<h1>Categories</h1>
<div class="tit_bot">
<ul>
<li><a href="">Curabitur dolor augue</a></li>
<li><a href="">Proin justo elit</a></li>
<li><a href="">Pellentesque eu eros est</a></li>
<li><a href="">Sed vel erat in quam</a></li>
<li><a href="">Curabitur sed erat</a></li>
<li><a href="">Suspendisse eu dui</a></li>
</ul>
<br />
</div>
<h1>Company News</h1>
<div class="tit_bot">
<ul>
<li><a href="">Lorem ipsum dolor</a></li>
<li><a href="">Sed eget tellus</a></li>
<li><a href="">Donec fringilla</a></li>
<li><a href="">Nullam in consequat augue</a></li>
</ul>
<br />
</div>
</div>
<div style="clear: both;"><img src="metamorph_sunshore-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
<!-- content ends -->
<!-- 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>
</div>
</body>
</html>
Related examples in the same category