metamorph_vacation
<!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;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background: url(metamorph_vacation-images/bg.jpg) top center no-repeat #090001;
}
#main {
width: 1014px;
margin-left: 0px;
padding: 0px 0px 0px 0px;
}
#main_bg {
width: 1014px;
background: url(metamorph_vacation-images/main_bg.gif) repeat-y;
margin: 0px auto;
padding: 0px 13px 0px 13px;
}
#header {
width:1014px;
padding: 0px 0px 0px 0px;
background: url(metamorph_vacation-images/header.jpg) left top no-repeat;
height: 316px;
}
#logo { font-family: Arial, Helvetica, sans-serif;
color:#1F0601;
font-size:18px;
font-style:italic;
padding: 80px 0px 0px 397px;
background: url(metamorph_vacation-images/big_img.jpg) left top no-repeat;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 18px;
color: #1F0601;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-transform: none;
font-weight:100;
}
#buttons{
width: 983px;
background: url(metamorph_vacation-images/but.png) center top no-repeat;
text-align:center;
padding-left:0px;
height: 71px;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
display: block;
float: left;
height: 45px;
text-decoration: none;
color: #FFFFFF;
padding-top: 25px;
padding-left: 0px;
text-align: center;
background: url(metamorph_vacation-images/but.gif) 30px 20px no-repeat;
}
.but1 {
padding-top: 20px;
width: 195px;
float:left;
border-right: 1px solid #FFFFFF;}
.but3 {
padding-top: 20px;
width: 199px;
float:left;
}
.but2 {
padding-top: 8px;
width: 195px;
float:left;
border-right: none;
border-right: 1px solid #FFFFFF;}
#buttons .but1:hover {
text-decoration: underline;
background: url(metamorph_vacation-images/but_ov.jpg) top repeat-x;
}
#buttons .but2:hover {
background: url(metamorph_vacation-images/but2_over.png) left top no-repeat;
text-decoration: underline;}
#buttons .but3:hover {
background: url(metamorph_vacation-images/but3_over.png) right top no-repeat;
text-decoration: underline;}
#content_top { background:url(metamorph_vacation-images/cont_top.png) left top no-repeat;
height: 10px;
width: 983px;}
#content{
width: 983px;
background: url(metamorph_vacation-images/cont.png) left repeat-y;
line-height: 20px;
}
#content_bot { background:url(metamorph_vacation-images/cont_bot.png) left bottom no-repeat;
height: 10px;
width: 983px;}
#bot_left { background: url(metamorph_vacation-images/bot_r.png) left bottom no-repeat;
height: 12px;
width: 983px;}
#left{
width: 274px;
margin: 0px 0px 0px 10px;
float: left;
color:#000000;
background:url(metamorph_vacation-images/left_top.gif) left top no-repeat;
}
#left ul {
padding: 0px 0px 0px 0px;
list-style:none;}
#left li { line-height: 24px;
background:url(metamorph_vacation-images/fish1.gif) 9px 9px no-repeat;
padding: 0px 0px 0px 30px;}
#left li a {
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
font-size: 12px;
text-decoration: none;}
#left li a:hover {
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
font-size: 12px;
text-decoration: underline;}
.left_b { background: url(metamorph_vacation-images/fish2.gif) 8px 20px no-repeat;
padding: 15px 5px 0px 30px;
}
.text{
padding: 10px 0px 0px 0px;
}
.img { float:left;
margin: 4px 16px 3px 0px;
}
.img2 { float:left;
margin: 4px 12px 3px 0px;
}
#left span { color:#FFFFFF;
font-weight:bold;
}
#right span { color:#FFFFFF;
font-weight:bold;
}
#left H1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #FFFFFF;
text-align: center;
padding: 8px 0px 0px 0px;
height: 28px;
background:url(metamorph_vacation-images/tit_l.jpg) left top no-repeat;
}
#right H1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #FFFFFF;
padding-left: 0px;
text-align: left;
padding: 8px 0px 0px 1px;
height: 28px;
}
.read{
text-align:right;
padding-right:10px;
padding-top: 2px;
font-weight:bold;
text-decoration:none;
}
#left .read a {
color: #890101;
text-decoration: underline;
}
#left .read a:hover {
color: #890101;
text-decoration: none;
}
#right .read a {
color: #DA770F;
text-decoration: underline;
}
#right .read a:hover {
color: #DA770F;
text-decoration: none;
}
#right{
float: right;
width: 660px;
margin-right: 8px;
padding: 5px 0px 0px 0px;
}
.tit_bot { background: url(metamorph_vacation-images/tit_bot.png) left top no-repeat;
padding: 5px 5px 0px 5px;}
#footer{
height: 57px;
width: 100%;
font-size: 12px;
color: #FFFFFF;
text-align: center;
clear:both;
padding: 23px 0px 0px 0px;
background: url(metamorph_vacation-images/footer.jpg) left bottom no-repeat;
}
#footer a{
color: #FFFFFF;
font-size: 12px;
text-decoration: none;
}
#footer a:hover{
color: #FFFFFF;
font-size: 12px;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="main_bg">
<div id="main">
<!-- header begins -->
<div id="header">
<div id="buttons">
<a href="#" class="but2" title="">Home</a>
<a href="#" class="but1" title="">Blog</a>
<a href="#" class="but1" title="">Gallery</a>
<a href="#" class="but1" title="">About us</a>
<a href="#" class="but3" title="">Contact us</a>
</div>
<div id="logo"><a href="#">metamorph_vacation</a>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="content_top"></div>
<div id="content">
<div id="right">
<h1>Metamorphosis Design</h1>
<div class="text">
<img src="metamorph_vacation-images/img1.jpg" width="182" height="127" class="img" alt="" /><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed quam sit amet mi lacinia posuere sed vel nibh. </span> <br />
Ut venenatis ultricies elementum. Donec at fringilla purus. Aenean elit sem, blandit id lacinia id, semper quis sem. Praesent adipiscing dapibus erat, ut consectetur magna porttitor at. Curabitur sit amet orci lacus, in pretium quam. Vivamus vitae lorem ut mi mattis facilisis. Sed molestie, dui a facilisis iaculis, quam massa inter- dum tellus, sit amet varius magna turpis sit amet felis. Class aptent taciti sociosqu <br />
elit sem, blandit id lacinia id, semper quis sem. Praesent adipiscing dapibus erat, ut consectetur magna porttitor at. Curabitur sit amet orci lacus, in pretium quam. Vivamus vitae lorem ut mi mattis facilisis. Sed molestie...
<div class="read"><a href="#">read more</a></div><br />
</div>
<h1>Free Website Templates</h1>
<div class="text">
<img src="metamorph_vacation-images/img2.jpg" width="82" height="62" class="img2" alt="" /><span>Aenean sagittis lorem vitae erat tempor hendrerit nec vel mauris. </span> <br />
Phasellus iaculis consequat lorem quis lobortis. Etiam molestie sapien sit amet mi ultrices sit amet molestie metus condimentum. Sed a sem feugiat ante mattis hendrerit nec vitae libero. Vivamus iaculis dictum libero, vitae dignissim urna commodo sed. Aenean augue magna, auctor in vulputate eu, luctus
<div class="read"><a href="#">read more</a></div><br />
</div>
<div class="text">
<img src="metamorph_vacation-images/img3.jpg" width="82" height="62" class="img2" alt="" /><span>Sed eu urna eget ante bibendum eleifend. Mauris sed dolor malesuada tellus elementum elemen- tum dictum ac nunc. </span> <br />
Aliquam pharetra elit justo, et pretium justo. Nulla facilisi. Aliquam condimentum sodales magna, in facilisis dolor suscipit id. Mauris adipiscing diam mi. Vivamus tempus molestie est ut bibendum.
<div class="read"><a href="#">read more</a></div><br />
</div>
</div>
<div id="left">
<div class="tit_bot">
<h1>Categories</h1>
<div class="text">
<ul>
<li><a href="#">January 2010</a></li>
<li><a href="#">February 2010</a></li>
<li><a href="#">March 2010</a></li>
<li><a href="#">April 2010</a></li>
<li><a href="#">May 2010</a></li>
<li><a href="#">June 2010</a></li>
</ul><br />
</div>
<h1>Company News</h1>
<div class="left_b"><span>In laoreet erat non eros auctor gravida. Maecenas in faucibus erat. </span><br />
Nam id suscipit orci. Nullam malesuada diam eu ante tincidunt blandit. Morbi sollicitudin diam non lorem gravida... <br />
<div class="read"><a href="#">read more</a></div><br />
</div>
<div class="left_b"><span>In laoreet erat non eros auctor gravida. Maecenas in faucibus erat. </span><br />
Nam id suscipit orci. Nullam malesuada diam eu ante tincidunt blandit. Morbi sollicitudin diam non lorem gravida... <br />
<div class="read"><a href="#">read more</a></div><br />
</div>
</div>
</div>
<br />
<div style="clear: both"><img src="metamorph_vacation-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
<!-- content ends -->
<div id="bot_left"></div>
<div id="content_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>
</div>
</body>
</html>
Related examples in the same category