metamorph_dropsongrass
<!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_dropsongrass-images/bg.jpg) left top no-repeat #5DB63E;
line-height: 18px;
}
form {
border:0;
margin:0;
padding:0;
text-align:left;
width: 350px;
}
#all {
width: 1014px;
margin: 0px 0px 0px 0px;
}
#header {
width:100%;
background: url(metamorph_dropsongrass-images/header.jpg) left top no-repeat;
height: 139px;
}
#logo { font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:18px;
font-style:italic;
padding: 27px 0px 0px 0px;
background: url(metamorph_dropsongrass-images/big_img.jpg) left top no-repeat;
height: 60px;
width: 285px;
float:right;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 18px;
color: #FFFFFF;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-transform: none;
font-weight:100;
}
#search {
padding-top: 84px;
padding-left:28px;
height: 50px;
width: 345px;
}
#search input {
float: left;
font: 12px Arial, Helvetica, sans-serif;
}
#search-text {
width: 202px;
height: 17px;
font-size: 12px;
padding-bottom: 5px;
padding-top: 6px;
padding-left: 10px;
padding-right: 10px;
border: none;
background: url(metamorph_dropsongrass-images/search_inp.png) 0px 0px no-repeat;
background-repeat:no-repeat;
background-position:left top;
color: #000000;
}
#search-submit {
width: 91px;
height: 27px;
background: url(metamorph_dropsongrass-images/search_but.png) left top no-repeat;
background-repeat:no-repeat;
background-position:left top;
border: none;
margin-left: 6px;
margin-top:1px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#buttons{
width: 765px;
background: url(metamorph_dropsongrass-images/bg_but.jpg) left top no-repeat;
text-align:center;
height: 50px;
margin-left: 28px;
padding-top: 5px;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
display: block;
float: left;
height: 27px;
text-decoration: none;
color: #FFFFFF;
padding-top: 10px;
padding-left: 0px;
text-align: center;
}
.but {
width: 138px;
}
.but:hover { background: url(metamorph_dropsongrass-images/but_bg.gif) left top no-repeat;
text-decoration: none;}
#main {
background:url(metamorph_dropsongrass-images/main.gif) left repeat-y;
width: 1001px;}
#main_top {
width: 1001px;
background: url(metamorph_dropsongrass-images/main_top.gif) left top no-repeat ;
}
#main_bot {
width: 1001px;
background: url(metamorph_dropsongrass-images/main_bot.gif) left bottom no-repeat ;
}
#content{
width: 1001px;
padding: 0px 0px 0px 0px;
background: url(metamorph_dropsongrass-images/cont.gif) right repeat-y #FFFFFF;
margin: 0px 0px 0px 0px;
}
#cont_top {
width: 1001px;
height: 10px;
background:url(metamorph_dropsongrass-images/cont_top.png) left top no-repeat;}
#left{
width: 655px;
margin: 0px 0px 0px 32px;
float: left;
color:#000000;
}
.right_b {
padding-right: 5px;
padding-top: 18px;
}
.fish_10 { background: url(metamorph_dropsongrass-images/fish_10.gif) 0px 22px no-repeat;
padding-left: 52px;}
.fish_11 { background: url(metamorph_dropsongrass-images/fish_11.gif) 0px 22px no-repeat;
padding-left: 52px;}
.text{
padding: 12px 4px 0px 4px;
}
.img { float:left;
margin: 4px 15px 3px 0px;
}
.img_r { float: right;
margin: 4px 0px 3px 16px;
}
span {font-weight:bold;}
#left span { color:#328816;
}
.w {color:#ffffff;
line-height: 25px;}
.g {color:#328816;}
#left H1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #328816;
text-align:left;
padding: 20px 0px 6px 4px;
background: url(metamorph_dropsongrass-images/left_tit.gif) bottom repeat-x
}
#right H1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #ffffff;
text-align:left;
padding: 7px 0px 8px 12px;
background: url(metamorph_dropsongrass-images/right_tit.jpg) left top no-repeat;
}
.read{
text-align:right;
padding-right:5px;
padding-top: 6px;
font-weight:bold;
}
.read a{
color: #000000;
text-decoration: underline;}
.read a:hover {
text-decoration:none;}
#right{
float: right;
width: 269px;
margin-right: 12px;
padding: 0px 0px 0px 0px;
}
.box_munth {
width: 132px;
padding: 0px 0px 0px 0px;
background:url(metamorph_dropsongrass-images/all_munth.gif) left repeat-y;}
.munth {
font-weight:bold;
background: url(metamorph_dropsongrass-images/box_fish1.png) 0px 11px no-repeat;
padding: 7px 0px 7px 28px;
text-decoration:none;}
.munth a{color:#000000;
font-weight:bold;
text-decoration:none;}
.munth:hover {
text-decoration: none;
background: url(metamorph_dropsongrass-images/munth_hover.gif) left repeat-y;
}
#footer{
height: 50px;
width: 100%;
font-size: 12px;
color: #000000;
text-align: center;
clear:both;
padding: 13px 0px 0px 0px;
background: url(metamorph_dropsongrass-images/footer.jpg) 0px 0px no-repeat;
}
#footer a{
color: #000000;
font-size: 12px;
text-decoration: none;
}
#footer a:hover{
color: #000000;
font-size: 12px;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="all">
<!-- header begins -->
<div id="header">
<div id="logo"><a href="#">metamorph_dropsongrass</a>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
</div>
<div id="search">
<form method="get" action="">
<fieldset>
<input type="text" name="s" id="search-text" size="15" />
<input type="submit" id="search-submit" value="" />
</fieldset>
</form>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="cont_top"></div>
<div id="content">
<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 id="main">
<div id="main_bot">
<div id="main_top">
<div id="right">
<h1>categories</h1>
<div class="right_b">
<div class="box_munth">
<div class="munth"><a href="#" >January 2010</a></div>
<div class="munth"><a href="#" >February 2010</a></div>
<div class="munth"><a href="#" >March 2010</a></div>
<div class="munth"><a href="#" >April 2010</a></div>
<div class="munth"><a href="#" >May 2010</a></div>
</div><br />
</div>
<h1>company news</h1>
<div class="right_b fish_10"><span class="w">Friday, Apr.10, 2010</span><br />
<span class="g">Ut dignissim vulputate nisi, a mattis odio pulvinar pretium. </span><br />
Vivamus eget sapien elit. Nullam neque nisi, tempor ac bibendum nec, pulvinar non erat. Ut ut nisi a ante sagittis aliquam. Etiam dui... <br />
<div class="read"><a href="#"> read more</a></div>
</div>
<div class="right_b fish_11"><span class="w">Friday, Apr.11, 2010</span><br />
<span class="g">Ut dignissim vulputate nisi, a mattis odio pulvinar pretium. </span><br />
Vivamus eget sapien elit. Nullam neque nisi, tempor ac bibendum nec, pulvinar non erat. Ut ut nisi a ante sagittis aliquam. Etiam dui... <br />
<div class="read"><a href="#"> read more</a></div>
<br />
</div>
</div>
<div id="left">
<h1>metamorphosis design</h1>
<div class="text">
<img src="metamorph_dropsongrass-images/img1.jpg" class="img" width="100" height="150" alt="" /><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet venenatis neque. Morbi eu sodales quam. Ut vitae augue turpis.</span><br /><br />
Mauris in magna sapien, nec ultrices lectus. Donec blandit sagittis urna, vel adipiscing velit blandit sit amet. Donec imperdiet erat a odio iaculis laoreet. Fusce consectetur, enim vitae iacu-lis vulputate, leo odio interdum tortor, in sollicitudin enim nisl sed nulla. Praesent nec adipiscing dolor. Duis nisi sem, egestas vitae ultrices vel, commodo quis enim. Nam vestibulum tincidunt rutrum.<br />
<div class="read"><a href="#"> read more</a></div>
</div>
<h1>free website templates</h1>
<div class="text">
<img src="metamorph_dropsongrass-images/img2.jpg" class="img_r" height="100" width="150" alt="" /><span>Ut scelerisque sodales tempor. Nunc in nunc nisi, at dapibus velit. Curabitur vestibulum porttitor nisi. </span><br /><br />
Mauris ornare, diam eget pellentesque porttitor, leo orci cursus lorem, in tempus quam velit id nulla. Nam commodo felis et libero ullamcorper vitae condimentum nisl pellentesque. Proin dui eros, imperdiet ac auctor tempor, posuere id dolor. In sit amet.
<div class="read"><a href="#"> read more</a></div>
<h1>FREE WEBSITE TEMPLATES USEFUL LINKS</h1>
<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/shop/flash_templates.php">Flash Templates</a></li>
<li><a href="http://www.metamorphozis.com/website_hosting/index.php">Top Hosting Providers</a></li>
<li><a href="http://www.metamorphozis.com/contact/contact.php">Support For Free Website Templates</a></li>
</ol>
<br />
Nam ultrices faucibus ligula, eget posuere sem vestibulum vitae. Curabitur vitae tortor et mauris rhoncus ullamcorper. Suspendisse fringilla libero non ligula porta vel mattis nibh ultrices. In cursus pharetra mauris, quis fringilla est pellen- tesque non. Integer vitae justo nisl. Quisque dignissim bibendum ipsum tempor imperdiet. Vestibulum ante ipsum.<br /><br />
<img src="metamorph_dropsongrass-images/img3.jpg" class="img" width="120" height="80" alt="" /><span>Mauris ut massa lorem, quis tincidunt metus. Nulla facilisi. Sed eget risus vitae leo adipiscing ullamcorper.</span><br /><br />
Cras porttitor bibendum sapien nec consequat. Donec vel leo sed tortor scelerisque iaculis. In non libero turpis. Sed mollis, purus at adipiscing imperdiet, enim eros suscipit magna...
<div class="read"><a href="#"> read more</a></div><br />
</div>
</div>
<div style="clear: both"><img src="metamorph_dropsongrass-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
</div>
</div>
<!-- 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="Free Website Templates">Free Website Templates</a> for <a href="http://www.flashtemplatesdesign.com/" title="Flash Templates">Flash Templates</a>
</p>
</div>
<!-- footer ends -->
</div>
<!-- content ends -->
</div>
</body>
</html>
Related examples in the same category