metamorph_drop
<!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;
}
#left a{
color: #FFFFFF;
text-decoration: none;
border-bottom: 1px dashed #FFFFFF;
}
#left a:hover{
color: #FFFFFF;
text-decoration: none;
border-bottom: none;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background: #000000 ;
padding: 0px 0px 0px 0px;
line-height: 20px;
}
#main {
width: 906px;
background: url(metamorph_drop-images/top.gif) top no-repeat ;
margin: 0 auto;
}
#bg_top {
width: 100%;
height: 100%;
background: url(metamorph_drop-images/bg_top.jpg) 0px 0px repeat-x ;
}
#bg_mid {
width: 100%;
background: url(metamorph_drop-images/bg.gif) center repeat-y;
}
#bg_foot {
width: 100%;
background: url(metamorph_drop-images/bg_bot.jpg) bottom repeat-x;
}
#header {
width:594px;
padding: 0px 0px 0px 0px;
height: 295px;
background: url(metamorph_drop-images/header.jpg) 0px 0px repeat-x;
}
#logo { font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:18px;
font-style:italic;
padding: 113px 0px 0px 373px;
height: 117px;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 18px;
color: #FFFFFF;
border-bottom: none;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-transform: none;
font-weight:100;
}
#buttons{
width: 594px;
text-align:center;
height: 40px;
line-height: normal;
}
#buttons a {
color: #FFFFFF;
text-decoration: none;}
#buttons a:hover {
text-decoration: underline;
color: #FFFFFF;
}
.but {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
float: left;
height: 27px;
padding-top: 10px;
text-align: center;
text-transform: lowercase;
width: 117px;
}
#content{
width: 906px;
background: url(metamorph_drop-images/cont.gif) left repeat-y;
}
#right{
width: 594px;
float: right;
color:#000000;
}
#gal { padding: 0px 0px 4px 0px;
height: 148px;
background:#FFFFFF;
width: 574px;
margin-left: 10px;
}
.img_gal {
text-align: center;
float: left;}
.img_g {
margin: 0px;}
#gal_mid {
padding: 4px 0px 3px 4px;
}
.razd_img {width: 3px;
float:left;
height: 82px;}
#gal_mid a{
color: #0B4D02;
font-weight:bold;
border-bottom: none;
text-decoration:underline;}
#gal_mid a:hover {
text-decoration:none;
color: #0B4D02;}
#right .view a{
font-weight:100;
text-decoration:none;
border-bottom: 1px dashed #0B4D02;
color: #0B4D02;
}
#right .view a:hover { border-bottom:none;
color: #0B4D02;}
#right .view {
text-align:right;
padding-right:10px;
padding-top: 3px;
font-weight:100;}
.left_b { background: url(metamorph_drop-images/fish1.png) 10px 21px no-repeat;
padding-left: 28px;
padding-top: 20px;
padding-right: 5px;
}
.text{
padding: 12px 15px 0px 15px;
}
.text a{
color: #416001;
}
.img { float:left;
margin: 4px 16px 3px 0px;
}
#right span { color:#335000;
font-weight:bold;
}
#left span { color:#335000;
font-weight:bold;
}
#right H1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #416001;
text-align:left;
padding: 10px 0px 4px 0px;
margin: 0px 10px 0px 10px;
background: url(metamorph_drop-images/tit_right.jpg) bottom repeat-x;
}
#left H2{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #FFFFFF;
padding-left: 0px;
text-align: center;
padding: 14px 0px 0px 0px;
background: url(metamorph_drop-images/tit_left.jpg) left top no-repeat;
height: 32px;
}
.read{
text-align:right;
padding-right:10px;
padding-top: 3px;
font-weight:bold;
}
#left .read a {color:#FFFFFF;}
#right .read a { color: #0B4D02;
font-weight:bold;
border-bottom: 1px dashed #0B4D02;
text-decoration:none;}
#right .read a:hover { color: #0B4D02;
font-weight:bold;
border-bottom: none;
text-decoration:none;}
#left{
float: left;
width: 284px;
margin-left: 0px;
padding: 0px 9px 0px 9px;
}
#left_big {
background:url(metamorph_drop-images/left_big.jpg) 0px 8px no-repeat;
width: 284px;
height: 443px;}
#left ul { padding:20px 0px 0px 10px;}
#left li { list-style:none;
background: url(metamorph_drop-images/fish2.png) 2px 7px no-repeat ;
padding-left: 18px;
line-height: 22px;
}
#left ul a { border-bottom: none;
color:#000000;}
#left ul a:hover { text-decoration:underline;
color: #000000;}
.tit_bot { background: url(metamorph_drop-images/tit_bot.jpg) left top no-repeat;
padding: 0px 10px 0px 0px;}
.bot {
height: 10px;
background: url(metamorph_drop-images/bot.gif) right no-repeat;}
#footer{
height: 56px;
width: 100%;
font-size: 12px;
color: #FFFFFF;
text-align: center;
clear:both;
padding: 17px 0px 0px 0px;
background: url(metamorph_drop-images/footer.jpg) 0px 5px 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="bg_top">
<div id="bg_mid">
<div id="bg_foot">
<div id="main">
<!-- header begins -->
<!-- header ends -->
<!-- content begins -->
<div id="content">
<div id="right">
<div id="header">
<div id="logo"><a href="#">metamorph_drop</a>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
</div>
<div id="buttons">
<div class="but"><a href="#" title="">Home</a></div>
<div class="but"><a href="#" title="">Blog</a></div>
<div class="but"><a href="#" title="">Gallery</a></div>
<div class="but"><a href="#" title="">About us</a></div>
<div class="but"><a href="#" title="">Contact us</a></div>
</div>
</div>
<h1>Metamorphosis Design</h1>
<div class="text">
<img src="metamorph_drop-images/img1.jpg" width="150" height="113" class="img" alt="" /><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus condimentum pharetra. Nunc et augue sed ligula dictum ultricies. </span><br />
In hendrerit blandit nisi ullamcorper pretium. Pellentesque tristique, diam sollicitudin condimentum dignissim, lorem urna cursus mi, quis iaculis est dolor ac purus. Nunc facilisis dictum neque eu sollicitudin. <br />
<br />
<span>Luctus, erat sed hendrerit facilisis, erat enim viverra nulla, eu blandit nisi lacus vel velit.</span> Vestibulum eros tortor, aliquet ac elementum vel, aliquet eget purus. Morbi nisi leo, tristique vitae iaculis a, vehicula<br />
<div class="read"><a href="#">read more</a></div><br />
</div>
<h1>FREE WEBSITE TEMPLATES USEFUL LINKS</h1>
<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/free_flash_templates/free_flash_templates.php">Free Flash 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/shop/easy_flash_templates.php">Easy Flash Templates</a> (no flash experience needed to edit)</li>
<li><a href="http://www.metamorphozis.com/website_hosting/index.php">Top Hosting Providers</a></li>
</ol>
<div class="read"><a href="#">read more</a></div><br />
</div>
<h1>Free Website Templates</h1><br />
<div id="gal">
<div id="gal_mid">
<div class="img_gal"><img src="metamorph_drop-images/img2.jpg" width="139" height="92" class="img_g" alt="" /><br />
<a href="#" class="a_gal">Lorem ipsum</a> </div><div class="razd_img"></div>
<div class="img_gal"><img src="metamorph_drop-images/img3.jpg" width="139" height="92" class="img_g" alt="" /><br />
<a href="#" class="a_gal">Luctus, erat sed</a></div><div class="razd_img"></div>
<div class="img_gal"><img src="metamorph_drop-images/img4.jpg" width="139" height="92" class="img_g" alt="" /><br />
<a href="#" class="a_gal">Morbi nisi</a></div><div class="razd_img"></div>
<div class="img_gal"><img src="metamorph_drop-images/img5.jpg" width="139" height="92" class="img_g" alt="" /><br />
<a href="#" class="a_gal">Vestibulum</a></div>
<div style="clear: both"></div>
</div>
<div class="view"><a href="#" >view more</a></div>
</div><br />
<div class="text">
<span>Aliquam sed elit orci, vitae iaculis velit. Donec viverra consectetur suscipit. Maecenas lacinia augue eu magna interdum at tincidunt risus tincidunt. </span>
<br />
Etiam condimentum, ligula id pretium commodo, eros nunc convallis augue, vel consequat sapien orci id massa. Aliquam porta rutrum ante, sit amet lobortis orci cursus at. Suspendisse sollicitudin velit in magna rutrum suscipit. Nunc malesuada risus et ante pulvinar tincidunt. Sed ac imperdiet elit. Integer bibendum fermentum ligula, quis sollicitudin turpis convallis ac. Duis sed sagittis urna. Nullam tincidunt vulputate augue, eu hendrerit ipsum viverra non. Phasellus nisi nisl, imperdiet in consequat et, commodo sed felis.
<div class="read"><a href="#">read more</a></div><br />
</div>
</div>
<div id="left">
<div id="left_big"></div>
<h2>Company News</h2>
<div class="tit_bot">
<div class="left_b">
<p><span class="col_b">Maecenas sed lorem neque. Mauris dictum varius orci, sagittis auctor sapien sagittis vitae. </span></p>
<p><br />
Suspendisse placerat ante non lectus... </p>
</div>
<div class="read"><a href="#" >read more</a></div>
<div class="left_b">
<p><span class="col_b">Maecenas sed lorem neque. Mauris dictum varius orci, sagittis auctor sapien sagittis vitae. </span></p>
<p><br />
Suspendisse placerat ante non lectus... </p>
</div>
<div class="read"><a href="#" >read more</a></div><br />
</div>
<h2>Categories</h2>
<div class="tit_bot">
<ul>
<li><a href="#">Vivamus vel libero nunc, a sollicitudin </a></li>
<li><a href="#">Sed convallis tellus ac ante congue </a></li>
<li><a href="#">Nunc id dui enim, a fringilla sapien.</a></li>
<li><a href="#">Nam ut tortor at nunc porta imperdiet.</a></li>
<li><a href="#">Ut viverra nibh ut dui dignissim viverra.</a></li>
<li><a href="#">Donec eu ipsum sed enim ultricies </a></li>
</ul><br />
</div>
</div>
<br />
<div style="clear: both"></div>
</div>
<div class="bot"></div>
<!-- content ends -->
<!-- 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="Flash Templates">Flash Templates</a> for <a href="http://www.flashtemplatesdesign.com/" title="Free Flash Templates">Free Flash Templates</a>
</p></div>
<!-- footer ends -->
</div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category