metamorph_sunnybeach
<!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;
line-height:20px;
}
#bg {
background: url(metamorph_sunnybeach-images/bg.jpg) center repeat-y #2C5080;
margin: 0px auto;
}
#main{
width: 994px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
background: url(metamorph_sunnybeach-images/top.jpg) top no-repeat #FBF8C3;
}
#main_bot {
width: 994px;
background: url(metamorph_sunnybeach-images/bot.jpg) bottom no-repeat
}
#header { width:994px;
padding: 0px 0px 0px 0px;
height: 198px;
background:url(metamorph_sunnybeach-images/header.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 4px;
height: 45px;
text-align: right;
}
#logo h1, #logo p {
margin: 0;
line-height: normal;
}
#logo h1 {
padding: 0px;
font-size: 24px;
color: #ffffff;
text-align: right;
padding-right: 30px;
}
#logo h2 {
padding: 0px;
padding-right: 30px;
font-size: 10px;
text-transform: uppercase;
color: #ffffff;
text-align: right;
}
#logo a {
text-decoration: none;
color: #ffffff;
}
#buttons{
width: 900px;
height: 64px;
background: url(metamorph_sunnybeach-images/menu.jpg) left top no-repeat;
text-align:center;
margin-left: 0px;
}
#buttons ul {
padding-left: 0px;
margin: 0px;
}
#buttons li {
display: inline;
}
#buttons a {
font-family: tahoma, Helvetica, sans-serif;
font-size: 18px;
font-weight:normal;
display: block;
float: left;
width: 105px;
height: 42px;
text-decoration: none;
color: #FFFFFF;
padding-top: 22px;
padding-left: 0px;
margin-left: 0px;
margin-right: 30px;
text-align: center;
background:url(metamorph_sunnybeach-images/fish_but.gif) 0px 19px no-repeat;
}
#buttons a:hover {
text-decoration: underline;
background: url(metamorph_sunnybeach-images/but_over.png) 0px 2px repeat-x;
}
#content{
width: 973px;
padding: 0px 0px 0px 0px;
background: url(metamorph_sunnybeach-images/cont_bg.png);
margin: 0px 0px 0px 10px;
min-height: 600px;
}
#razd { background:url(metamorph_sunnybeach-images/razd.gif) 532px repeat-y;
}
#cont_top { background: url(metamorph_sunnybeach-images/cont_top.png) top repeat;
width: 973px;
height:10px;
margin-left: 10px;}
#cont_bot { background: url(metamorph_sunnybeach-images/cont_bot.png) bottom repeat;
width: 973px;
height:8px;
margin-left: 10px;}
#left{
width: 518px;
margin: 0px 0px 0px 7px;
float: left;
}
.text{
padding: 10px 0px 0px 8px;
}
.img { float:left;
margin: 5px 16px 5px 0px;
}
span { color:#0D6511;
font-weight:bold;
}
.dat { text-decoration: none;
color:#2E5282;}
.col_b {color:#2E5282;}
.col_black {color:#000000;}
a:hover .col_black {color:#000000;}
H1{
font-family: tahoma, "Times New Roman", Times, serif;
font-size:18px;
font-weight: 100;
color: #07203C;
padding-bottom: 5px;
text-align:center;
background: url(metamorph_sunnybeach-images/tit.gif) bottom repeat-x;
}
H2{
font-family: tahoma, "Times New Roman", Times, serif;
font-size:18px;
font-weight: 100;
color: #07203C;
padding-bottom: 4px;
padding-left: 12px;
text-align: left;
background: url(metamorph_sunnybeach-images/tit.gif) bottom repeat-x;
}
.tit_bot { background:url(metamorph_sunnybeach-images/tit_bot.png) left top no-repeat;
}
.read_l{
text-align:right;
padding-right:10px;
padding-top: 5px;
font-weight:bold;
text-decoration:underline;
}
.read_pap{
text-align:right;
padding-right:0px;
font-weight:bold;
}
#right{
float:right;
width: 416px;
background: url(metamorph_sunnybeach-images/bg_left.jpg) left 25px repeat-x;
margin-right: 13px;
padding: 0px 0px 0px 0px;
}
.right_top { background:url(metamorph_sunnybeach-images/right_top.gif) top no-repeat;
height:9px;
width:416px;
}
.right_bot { background: url(metamorph_sunnybeach-images/right_bot.gif) bottom no-repeat;
height:9px;
width:416px;}
.right_s { background:#D9DADA;
width:416px;}
.col_l {float:left;
width:192px;
margin-left:14px;
}
.col_r {float: left;
width:170px;
margin-left:15px}
#col_r2 {float: left;
width:192px;
margin-left:15px}
#col_r2 a:hover { color:#000000;}
.s { background:url(metamorph_sunnybeach-images/fish_s.gif) 0px 8px no-repeat;
padding-left: 28px;
padding-top:5px}
.v { background: url(metamorph_sunnybeach-images/fish_v.png) 0px 10px no-repeat;
padding-left: 28px;
padding-top: 5px;
width: 155px;}
#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_sunnybeach-images/fish_g.png) 3px 12px no-repeat;
padding-left: 28px;
color:#000000;
}
#footer{
height: 56px;
width: 994px;
font-size: 10px;
color: #FFFFFF;
padding-top: 8px;
text-align: center;
clear:both;
padding: 17px 0px 0px 0px;
background: url(metamorph_sunnybeach-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="bg">
<div id="main">
<div id="main_bot">
<!-- header begins -->
<div id="header">
<div id="logo">
<h1>metamorph_sunnybeach</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="razd">
<div id="left">
<h2>Metamorphosis Design</h2>
<div class="tit_bot">
<div class="text">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span><br />
Sed pulvinar condimentum commodo. Etiam neque risus, lobortis id sollicitudin id, imperdiet et lorem. Etiam laoreet mollis arcu vel convallis. Ut varius semper elit rutrum lobortis. Cras eget nulla non leo sodales varius et id justo. Phasellus placerat lectus eros, eget malesuada libero. Duis magna odio, ultrices sit amet aliquam vitae, mattis et lacus.<br />
</div>
<div class="text">
<img src="metamorph_sunnybeach-images/img1.jpg" width="124" height="84" class="img" alt="" />
<span>Ut dignissim fringilla molestie.</span> <br />
In sed mauris lacus, ut dictum turpis. Duis euismod sem rhoncus risus ullamcorper nec hendrerit massa bibendum. Ut quis neque elit. Vestibulum lectus nisl, hendrerit at suscipit eget, commodo in magna. Nunc leo lorem, imperdiet at auctor ac, semper ac...
</div>
<div class="read_l"><a href="#">read more</a></div>
<div class="text">
<img src="metamorph_sunnybeach-images/img2.jpg" width="124" height="84" class="img" alt="" />
<span>Ut dignissim fringilla molestie.</span> <br />
In sed mauris lacus, ut dictum turpis. Duis euismod sem rhoncus risus ullamcorper nec hendrerit massa bibendum. Ut quis neque elit. Vestibulum lectus nisl, hendrerit at suscipit eget, commodo in magna. Nunc leo lorem, imperdiet at auctor ac, sleo lorem, imperdiet at auctor ac, semper ac...
</div>
<div class="read_l"><a href="#">read more</a></div>
<div class="text">
<img src="metamorph_sunnybeach-images/img3.jpg" width="124" height="84" class="img" alt="" />
<span>Ut dignissim fringilla molestie.</span> <br />
In sed mauris lacus, ut dictum turpis. Duis euismod sem rhoncus risus ullamcorper nec hendrerit massa bibendum. Ut quis neque elit. Vestibulum lectus nisl, hendrerit at suscipit eget, commodo in magna. Nunc leo lorem, imperdiet at auctor ac, semper ac...
</div>
<div class="read_l"><a href="#">read more</a></div><br />
</div>
<h2>Free Website Templates</h2>
<div class="tit_bot">
<div class="text">
<span>Nulla at faucibus quam.</span> <br />
Nullam enim metus, sollicitudin eget laoreet quis, viverra et ligula. Ut ut risus id est auctor sodales eget nec nisi. Ut sit amet tempor neque. Sed gravida sollicitudin luctus. Quisque... </div>
<div class="read_l"><a href="#">read more</a></div><br />
</div>
</div>
<div id="right">
<div class="right_top"></div>
<div class="right_s">
<div class="col_l">
<h1>Lorem ipsum dolor</h1>
<div class="s"><span>Proin justo justo.</span><br />
Aliquam sed molestie vel, gravida et metus. Donec porttitor eros et purus varius aliquet. Quisque condimentum tellus nec sapien lobortis at elementum turpis fringilla. Etiam dignissim vulputate velit eu luctus. Nunc venenatis felis non... <br />
<div class="read_l"><a href="#"><img src="metamorph_sunnybeach-images/but_read.png" alt="" /></a></div>
</div>
</div>
<div class="col_r">
<h1>Vestibulum placerat</h1>
<div class="s"><span>Nulla at faucibus quam.</span><br />
Nullam enim metus, sollicitudin eget laoreet quis, viverra et ligula. Ut ut risus id est auctor sodales eget nec nisi. Ut sit amet tempor neque. Sed gravida sollicitudin luctus. Quisque laoreet orci metus. Mauris ut congue... <br />
<div class="read_l"><a href="#"><img src="metamorph_sunnybeach-images/but_read.png" alt="" /></a></div>
</div>
</div>
<div style="clear: both"><img src="metamorph_sunnybeach-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
<div class="right_bot"></div>
<br />
<div class="col_l">
<h1>Company News</h1>
<div class="v"><span class="dat">05-11-2009</span><br /><span class="col_b">Donec vitae nisl quam.</span><br />
Mauris diam urna, vestibulum a molestie sed, egestas in nibh. Class aptent taciti sociosqu ad litora torquent per conubia...
<div class="read_l"><a href="#"><img src="metamorph_sunnybeach-images/but_read.png" alt="" /></a></div>
</div><br />
<div class="v"><span class="dat">05-11-2009</span><br /><span class="col_b">Donec vitae nisl quam.</span><br />
Mauris diam urna, vestibulum a molestie sed, egestas in nibh. Class aptent taciti sociosqu ad litora torquent per conubia...
<div class="read_l"><a href="#"><img src="metamorph_sunnybeach-images/but_read.png" alt="" /></a></div><br />
</div>
</div>
<div id="col_r2">
<h1>Categories</h1>
<ul>
<li><a class="col_black" href="">Aenean eu lectus nisi, luctus</a></li>
<li><a class="col_black" href="">Sed nec ipsum diam, sit amet </a></li>
<li><a class="col_black" href="">Praesent in eros dui, eget </a></li>
<li><a class="col_black" href="">Nam in erat id erat congue</a></li>
<li><a class="col_black" href="">Aliquam nec risus nunc, eu </a></li>
<li><a class="col_black" href="">Pellentesque in est sem, eget </a></li>
<li><a class="col_black" href="">Aenean aliquam lorem vel</a></li>
</ul>
</div>
</div>
<div style="clear: both"><img src="metamorph_sunnybeach-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
</div>
<!-- content ends -->
<div id="cont_bot"></div>
<!-- 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>
</div>
</body>
</html>
Related examples in the same category