metamorph_aftertherain
<!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_aftertherain-images/bg.jpg) top repeat-x #ffffff;
line-height: 20px;
}
#foot_bg {
width: 100%;
height: 100%;
background: url(metamorph_aftertherain-images/footer_bg.jpg) bottom repeat-x;}
#main {
width: 983px;
margin: 0px 0px;}
#header {
width:983px;
background: url(metamorph_aftertherain-images/logo.jpg) left top no-repeat;
height: 338px;
}
#logo {
height: 241px;
width: 200px;
background: url(metamorph_aftertherain-images/big_img.jpg) left top no-repeat;
padding: 44px 0px 0px 768px;
}
#logo H2 {
font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:18px;
font-style:italic;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 16px;
color: #FFFFFF;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-transform: none;
font-weight:100;
}
#buttons{
text-align:center;
height: 39px;
margin-left: 0px;
padding-top: 0px;
background: url(metamorph_aftertherain-images/buttons.jpg) left top no-repeat;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
display: block;
float: left;
text-decoration: none;
color: #FFFFFF;
text-align: center;
padding-top: 11px;
height: 28px;
}
.but {
width: 193px;
background: url(metamorph_aftertherain-images/but.png) left top no-repeat;
}
#buttons .but:hover {
background:url(metamorph_aftertherain-images/but_hover.jpg) center 1px no-repeat;}
#content{
width: 983px;
background: url(metamorph_aftertherain-images/cont_razd.gif) 296px 0px repeat-y;
}
#left{
width: 314px;
float: left;
color:#000000;
margin-left: 16px;
}
.box_bg {
font-size: 12px;
background:url(metamorph_aftertherain-images/box_bg.gif) left repeat-y;
}
.munth_box {
padding: 3px 15px 0px 39px;
background: url(metamorph_aftertherain-images/fish_left.gif) 6px 7px no-repeat;
}
.box {
width: 314px;
}
.box_bot {
height: 9px;
background:url(metamorph_aftertherain-images/box_bot.png) left bottom no-repeat;
width: 314px;}
.box_top {
height: 9px;
background: url(metamorph_aftertherain-images/box_top.png) left top no-repeat;
width: 314px;}
.text{
padding: 10px 0px 10px 0px;
line-height: 18px;
}
.img_l { float:left;
margin: 3px 15px 3px 0px;
}
.img_r { float: right;
margin: 3px 6px 3px 10px;
}
span { color:#496A2D;
font-size:12px;
font-weight:bold;
}
#left H1{
font-family: "Times New Roman", Times, serif;
font-size:18px;
font-weight: 100;
color: #FFFFFF;
text-align: center;
padding: 15px 0px 20px 0px;
background: url(metamorph_aftertherain-images/tit_left.png) left top no-repeat;
}
#right H1{
font-family: "Times New Roman", Times, serif;
font-size:18px;
font-weight: 100;
color: #496A2D;
text-align:left;
padding: 5px 0px 4px 2px;
background: url(metamorph_aftertherain-images/tit_right.gif) bottom repeat-x;
}
.read{
text-align:right;
padding-right:5px;
padding-top: 5px;
}
.read a {
font-weight:bold;
font-size:12px;
color: #4A7F0F;
text-decoration:underline;
}
.read a:hover {
font-weight:bold;
font-size:12px;
color: #4A7F0F;
text-decoration: none;
}
.read_l{
text-align:right;
padding-right:5px;
padding-top: 5px;
padding-bottom: 3px;
background: url(metamorph_aftertherain-images/but_read.gif) 190px 6px no-repeat;
}
.read_l a {
font-size:12px;
color: #ffffff;
text-decoration: none;
padding-right: 2px;
}
.read_l a:hover {
font-size:12px;
color: #000000;
text-decoration: none;
}
#right{
float: right;
width: 641px;
padding: 0px 0px 0px 0px;
}
#right_top{
width: 641px;
height: 10px;
background: url(metamorph_aftertherain-images/right_top.png) left top no-repeat;
}
#right_bot{
width: 641px;
height: 10px;
background: url(metamorph_aftertherain-images/right_bot.png) left bottom no-repeat;
}
#right_bg{
background: url(metamorph_aftertherain-images/right_bg.gif) left repeat-y;
padding: 0px 18px 0px 18px;
}
.galery {padding: 25px 0px 10px 12px;
height: 82px;}
.razd_g {
float:left;
background:url(metamorph_aftertherain-images/razd_g.gif) 15px 0px repeat-y;
width: 31px;
height: 82px;}
.img_g {
float:left;
}
#footer{
height: 50px;
font-size: 12px;
color: #ffffff;
text-align: center;
padding: 25px 0px 0px 0px;
background: url(metamorph_aftertherain-images/footer.jpg) 0px 8px no-repeat;
}
#footer a{
color: #ffffff;
font-size: 12px;
text-decoration: none;
}
#footer a:hover{
color: #ffffff;
font-size: 12px;
text-decoration: underline;
}
.left_res
{
width: 50%;
float: left;
}
.left_res a
{
color: #4E6E33;
font-weight: bold;
}
.right_res
{
float: right;
width: 50%;
}
.right_res a
{
color: #4E6E33;
font-weight: bold;
}
ul{
color: #4E6E33;
}
</style>
</head>
<body>
<div id="foot_bg">
<div id="main">
<!-- header begins -->
<div id="header">
<div id="logo">
<a href="#">metamorph_aftertherain</a>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
</div>
<div id="buttons">
<a href="#" class="but" title="">Home</a>
<a href="#" class="but" title="">Blog</a>
<a href="#" class="but" title="">Gallery</a>
<a href="#" class="but" title="">About us</a>
<a href="#" class="but" title="">Contact us</a>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="content">
<div id="right">
<div id="right_top"></div>
<div id="right_bg">
<h1>Metamorphosis Design</h1>
<div class="text">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><br /><img src="metamorph_aftertherain-images/spaser.gif" height="7" alt="" /><br />
<img src="metamorph_aftertherain-images/img1.jpg" class="img_r" width="202" height="148" alt="" />
Cras libero mauris, ultrices sit amet rutrum ut, consequat sit amet justo. Nam sit amet nisi augue, sit amet lobortis felis. In fringilla pellentesque posuere. Morbi posuere, nunc quis fringilla mattis, nulla neque auctor nisl, eget laoreet nulla ipsum vel tortor. Mauris luctus venenatis risus interdum venenatis. Sed iaculis bibendum leo, non consectetur tortor sollicitudin rhoncus. Cras fermentum feugiat tellus, rutrum iaculis enim aliquam non. Integer eleifend eros et libero placerat eget eleifend dolor ornare. Maecenas eu dui lacus<br />
<br />
<div class="read"><a href="#">read more</a></div>
</div>
<h1>Website Design Related Resources</h1>
<div class="text">
<div class="left_res">
<ul>
<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>
</ul>
</div>
<div class="right_res">
<ul>
<li><a href="http://www.metamorphozis.com/blog/category/free-fonts/">Free Fonts</a></li>
<li><a href="http://www.metamorphozis.com/blog/category/freeicons/">Free Icons</a></li>
<li><a href="http://www.metamorphozis.com/blog/category/freemetamorph_aftertherain-images/">Free Images</a></li>
<li><a href="http://www.metamorphozis.com/blog/category/free-photoshop-brushes/">Free Photoshop Brushes</a></li>
<li><a href="http://www.metamorphozis.com/blog/category/free-wallpapers/">Free Wallpapers</a></li>
<li><a href="http://www.metamorphozis.com/blog/feed/">RSS Subscribe</a></li>
</ul>
</div>
<div style="clear: both"></div>
</div>
<h1>Free Website Templates</h1>
<div class="text">
<img src="metamorph_aftertherain-images/img2.jpg" class="img_l" width="122" height="82" alt="" /><span>Suspendisse eleifend dignissim molestie.</span><br />
Proin lectus urna, rhoncus ac cursus eu, pulvinar id risus. Cras lorem metus, condi- mentum sed porttitor a, ullamcorper molestie erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque a lacinia orci. Cras ac tellus in tortor tincidunt tristique non et enim. Pellentesque scelerisque, <br />
condimentum sed porttitor a, ullamcorper molestie erat. Class aptent taciti sociosqu ad litora torquent... per conubia nostra, per inceptos himenaeos. Quisque a lacinia orci. Cras ac tellus in tortor tincidunt <br />
<div class="read"><a href="#">read more</a></div>
</div>
<h1>Our Gallery</h1>
<div class="galery">
<img src="metamorph_aftertherain-images/img3.jpg" height="82" width="122" class="img_g" alt="" /><div class="razd_g"></div>
<img src="metamorph_aftertherain-images/img4.jpg" height="82" width="122" class="img_g" alt="" /><div class="razd_g"></div>
<img src="metamorph_aftertherain-images/img5.jpg" height="82" width="122" class="img_g" alt="" /><div class="razd_g"></div>
<img src="metamorph_aftertherain-images/img6.jpg" height="82" width="122" class="img_g" alt="" />
</div>
<div class="read"><a href="#">view more</a></div>
</div>
<div id="right_bot"></div>
</div>
<div id="left">
<h1>Company News</h1>
<div class="box">
<div class="box_top"></div>
<div class="box_bg">
<div class="munth_box">
<span>Suspendisse eleifend dignissim molestie. Proin lectus urna, rhoncus ac cursus eu, pulvinar id risus.</span>
<br /><br />
Cras lorem metus, condimentum sed porttitor a, ullamcorper molestie erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra
<div class="read_l"><a href="#">read more</a></div>
</div>
</div>
<div class="box_bot"></div>
</div>
<div style="height:11px"></div>
<div class="box">
<div class="box_top"></div>
<div class="box_bg">
<div class="munth_box">
<span>Sed tempor libero at quam sodales et bibendum arcu varius.</span>
<br />
<br />
Etiam egestas mollis condimentum. In hac habitasse platea dictumst. Cras pharetra euismod pellentesque. Nunc at libero in felis fermentum sollicitudin sed ut lectus. Aliquam
<div class="read_l"><a href="#">read more</a></div>
</div>
</div>
<div class="box_bot"></div>
</div>
<div style="height:11px"></div>
<div class="box">
<div class="box_top"></div>
<div class="box_bg">
<div class="munth_box">
<span>Etiam ut tellus tortor. Sed leo eros, ultrices at sagittis in, pretium sed augue. </span>
<br />
<br />
Sed euismod quam eu dolor porta nec tincidunt urna cursus. Pellentesque tincidunt lobortis sollicitudin. Vestibulum eu luctus nulla. Viva- mus eget dolor a neque dictum consectetur.
<div class="read_l"><a href="#">read more</a></div>
</div>
</div>
<div class="box_bot"></div>
</div>
</div>
<div style="clear: both"></div>
</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>
</body>
</html>
Related examples in the same category