metamorph_greenmint
<!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;
}
form {
margin:0px;
padding: 0px;
border: none;
text-align:left;}
img
{
border: 0px;
}
#right a{
color: #416001;
text-decoration: underline;
}
#right a:hover{
color: #416001;
text-decoration: none;
}
#left a{
color: #416001;
text-decoration: underline;
}
#left a:hover{
color: #416001;
text-decoration: none;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background: url(metamorph_greenmint-images/bg.jpg) ;
padding: 20px 0px 0px 0px;
line-height: 20px;
}
#main {
width: 900px;
margin-left: 0px;
background: url(metamorph_greenmint-images/top.gif) top no-repeat ;
padding: 0px 0px 0px 0px;
}
#bg {
width: 100%;
background: url(metamorph_greenmint-images/bg_top.gif) 0px 37px repeat-x ;
}
#bg_header {
width: 100%;
background: url(metamorph_greenmint-images/big_img.jpg) 0px 42px no-repeat;
}
#bg_foot {
width: 100%;
background: url(metamorph_greenmint-images/footer.gif) bottom repeat-x;
}
#search {
padding-top: 0px;
padding-left:0px;
height: 37px;
width: 298px;
float: left;
background: #DAFCA4;
margin-left: 14px;
}
#search form {
margin: 0;
}
#search input {
float: left;
font: 12px Arial, Helvetica, sans-serif;
}
#search-text {
width: 184px;
height: 17px;
font-size: 12px;
padding: 6px 5px 6px 5px;
border: none;
vertical-align: middle;
background: url(metamorph_greenmint-images/search_inp_bg.gif) 0px 0px no-repeat ;
color: #000000;
margin: 4px 0px 0px 4px;
color: #C5C3C3;
border: 0px;
position:relative;
}
#search-submit {
width: 96px;
height: 33px;
background: url(metamorph_greenmint-images/b_search.gif) left top no-repeat;
background-repeat:no-repeat;
background-position:left top;
border: none;
margin-left: 2px;
margin-top: 2px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#header {
width:900px;
padding: 0px 0px 0px 0px;
height: 283px;
}
#logo { font-family: Arial, Helvetica, sans-serif;
color:#6EA202;
font-size:18px;
font-style:italic;
padding: 94px 0px 0px 71px;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 18px;
color: #6EA202;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-transform: none;
font-weight:100;
}
#buttons{
width: 900px;
text-align:center;
padding-left:0px;
padding-top: 0px;
height: 37px;
}
#buttons a {
color: #FFFFFF;
text-decoration: none;
}
#buttons a:hover {
text-decoration: none;
border-bottom: 2px solid #FFFFFF;
}
.but {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
display: block;
float: left;
height: 27px;
padding-top: 10px;
padding-left: 0px;
text-align: center;
text-transform: lowercase;
width: 115px;
}
#paral { width: 298px;
height: 14px;
background: #DAFCA4;
margin-left: 14px;}
#content{
width: 886px;
padding: 0px 0px 0px 0px;
background: url(metamorph_greenmint-images/cont.gif) left repeat-y;
margin: 0px 0px 0px 14px;
}
#right{
width: 556px;
margin: 0px 9px 0px 9px;
float: right;
color:#000000;
}
.right_b { background: url(metamorph_greenmint-images/fish.gif) 1px 18px no-repeat;
padding-left: 18px;
padding-top: 15px;
padding-right: 5px;
}
.text{
padding: 10px 0px 0px 5px;
}
.img { float:left;
margin: 4px 16px 3px 0px;
}
#right span { color:#416001;
font-weight:bold;
}
#left span { color:#416001;
font-weight:bold;
text-decoration: underline;
}
#right H1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #416001;
text-align:left;
padding: 10px 0px 4px 0px;
}
#left H2{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #416001;
padding-top: 12px;
padding-left: 0px;
text-align: left;
padding: 10px 0px 6px 0px;
background: url(metamorph_greenmint-images/tit_l.gif) bottom repeat-x;
}
.read{
text-align:right;
padding-right:10px;
padding-top: 5px;
font-weight:bold;
}
#left{
float: left;
width: 280px;
margin-left: 0px;
padding: 0px 9px 0px 9px;
}
.tit_bot { background: url(metamorph_greenmint-images/tit_bot.jpg) left top repeat-x;
padding: 26px 0px 0px 10px;}
.col_l { width: 295px;
float:left;}
.col_r { width: 298px;
float:left;
margin-left: 22px}
#footer{
height: 54px;
width: 100%;
font-size: 12px;
color: #FFFFFF;
text-align: center;
clear:both;
padding: 16px 0px 0px 0px;
background: url(metamorph_greenmint-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">
<div id="bg_header">
<div id="bg_foot">
<div id="main">
<!-- header begins -->
<div id="header">
<div id="buttons">
<div id="search">
<form method="get" action="">
<fieldset>
<input type="text" value="Search" name="s" id="search-text" size="15" />
<input type="submit" id="search-submit" value="" />
</fieldset>
</form>
</div>
<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 id="logo"><a href="#">metamorph_greenmint</a>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
</div>
</div>
<!-- header ends -->
<div id="paral"></div>
<!-- content begins -->
<div id="content">
<div id="right">
<h1>Metamorphosis Design</h1>
<div class="tit_bot">
<img src="metamorph_greenmint-images/img1.jpg" width="162" height="122" class="img" alt="" /><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec mi ut sapien rhoncus dictum. Nam placerat viverra augue sit amet fermentum. </span><br /><br />
Etiam suscipit, libero ut malesuada egestas, enim augue volutpat magna, in placerat lacus ante non ipsum. Morbi non leo eget mi bibendum aliquam. Proin hendrerit porta urna, ut semper diam<br />
pellentesque, lectus lectus molestie lorem, vel ullamcorper orci ligula vel tortor. Quisque tristique, justo vitae luctus dignissim, ligula diam dictum ligula, lacinia porta est urna et velit.<br />
</div>
<div class="read"><a href="#">read more</a></div>
<h1>Free Website Templates</h1>
<div class="tit_bot">
<span>Donec nec purus massa. Etiam gravida, urna sed semper gravida, orci libero gravida ante, eget commodo neque orci quis tortor. Morbi elementum, massa ultricies egestas euismod, enim diam dictum urna, a ultrices risus odio in ante. </span><br /><br />
Nunc urna nulla, iaculis eu pharetra in, tincidunt imperdiet tellus. Mauris a metus id ligula imperdiet tincidunt. Cras eget tristique enim. Vivamus suscipit augue eu leo vulputate imperdiet bibendum lacus porttitor. Donec at metus est, eget pretium dolor. Aliquam eget dolor eros, sed convallis tortor. Morbi vulputate dignissim turpis a ornare. Nunc viverra justo vel orci euismod volutpat. In hac habitasse platea dictumst. Quisque dictum vulputate nulla, vel tempus tortor ornare suscipit. Nulla facilisi. In condimentum dictum molestie. Donec accumsan, nisl vel ultrices...
</div>
<div class="read"><a href="#">read more</a></div><br />
</div>
<div id="left">
<h2>Company News</h2>
<div class="right_b">
<p><span class="col_b">Nulla facilisi. Proin nec adipiscing risus. Nulla ut mi sit amet magna egestas sodales. </span></p>
<p><br />
Phasellus bibendum augue sed ligula moles- tie vitae sodales diam molestie. Praesent eros ligula, convallis a aliquam in, eleifend et </p>
</div>
<div class="read"><a href="#">read more</a></div><br />
<div class="right_b">
<p><span class="col_b">Nulla facilisi. Proin nec adipiscing risus. Nulla ut mi sit amet magna egestas sodales. </span></p>
<p><br />
Phasellus bibendum augue sed ligula moles- tie vitae sodales diam molestie. Praesent eros ligula, convallis a aliquam in, eleifend et </p>
</div>
<div class="read"><a href="#">read more</a></div><br />
<div class="right_b">
<p><span class="col_b">Nulla facilisi. Proin nec adipiscing risus. Nulla ut mi sit amet magna egestas sodales. </span></p>
<p><br />
Phasellus bibendum augue sed ligula moles- tie vitae sodales diam molestie. Praesent eros ligula, convallis a aliquam in, eleifend et </p>
</div>
<div class="read"><a href="#">read more</a></div><br />
</div>
<br />
<div style="clear: both"><img src="metamorph_greenmint-images/spaser.gif" alt="" width="1" height="1" /></div>
<div class="bot"></div>
</div>
<!-- content ends -->
<!-- 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>
</div>
</div>
</body>
</html>
Related examples in the same category