metamorph_lonetree
<!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;
}
a{
color: #711419;
text-decoration:none;
}
a:hover{
text-decoration: underline;
color: #711419;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background: url(metamorph_lonetree-images/sky.jpg) center repeat-y;
line-height:20px;
}
#tree {background: url(metamorph_lonetree-images/bg_all.jpg) center bottom fixed;
}
#bg { width:1012px;
margin: 0px auto 0px auto;}
#main{
width: 631px;
padding: 60px 0px 0px 0px;
float:left;
}
#header { width: 631px;
padding: 0px 0px 0px 0px;
height: 147px;
}
#logo {
height: 94px;
}
#logo h1, #logo p {
margin: 0;
line-height: normal;
}
#logo h1 {
padding: 0px;
font-size: 24px;
color: #ffffff;
}
#logo h2 {
padding: 0px;
font-size: 10px;
text-transform: uppercase;
color: #ffffff;
text-align: left;
}
#logo a {
text-decoration: none;
color: #ffffff;
}
#buttons{
width: 621px;
height: 47px;
background: url(metamorph_lonetree-images/menu.png) left top no-repeat;
text-align:center;
padding-left: 10px;
}
.razd_but { background:url(metamorph_lonetree-images/but_razd.gif) right center no-repeat;}
#buttons .but {
float:left;
background:url(metamorph_lonetree-images/but_razd.gif) right 2px no-repeat;
}
#buttons a {
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight:normal;
display: block;
float: left;
width: 120px;
height: 34px;
text-decoration: none;
color: #FFFFFF;
padding-top: 13px;
text-align: center;
background:url(metamorph_lonetree-images/fish_but.gif) 0px 19px no-repeat;
margin-right:3px;
}
#buttons a:hover {
text-decoration: underline;
background: url(metamorph_lonetree-images/but_hover.jpg) 0px 2px repeat-x;
}
#content{
width: 629px;
padding: 0px 0px 0px 0px;
background: url(metamorph_lonetree-images/bg_cont.png);
margin: 0px 1px 0px 1px;
}
#conttop{
background: url(metamorph_lonetree-images/top.png) 0px 0px no-repeat;
width: 629px;
height: 8px;
margin: 0px 1px 0px 1px;
}
#contbot{
background: url(metamorph_lonetree-images/bot.png) 0px bottom no-repeat;
width: 629px;
height: 7px;
}
#razd {
background:url(metamorph_lonetree-images/razd.gif) 415px repeat-y;
width: 629px;
}
#left{
width: 392px;
padding: 0px 0px 0px 15px;
margin: 0px;
float:left;
}
#center{float:left;
padding: 0px 0px 0px 11px;
width:315px;
}
.text{
padding: 0px 0px 0px 0px;
}
.img { float:left;
margin: 5px 13px 5px 0px;
}
span { color:#094A11;
font-weight:bold;
}
.dat { text-decoration:underline;}
H1{
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:normal;
color: #094A11;
padding-bottom: 5px;
padding-left: 0px;
}
H2{
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:normal;
color: #094A11;
padding-bottom: 5px;
text-align:center;
}
.read{
text-align:right;
padding-right:0px;
padding-top: 5px;
}
#right{
float:right;
width: 182px;
background: url(metamorph_lonetree-images/right_bg.gif) left repeat-y;
margin-right: 19px;
}
#right ul
{
list-style: none;
padding-left:0px;
padding-top:0px;
margin: 0px;
display:block;
padding-bottom: 0px;
}
#right li{
padding-top: 5px;
background: url(metamorph_lonetree-images/fish.png) 0px 2px no-repeat;
padding-left: 30px;
}
#footer{
height: 40px;
width: 629px;
font-size: 10px;
color: #FFFFFF;
padding-top: 8px;
text-align: center;
clear:both;
padding: 15px 0px 15px 0px;
}
#footer a{
color: #FFFFFF;
font-size: 10px;
text-decoration: none;
}
#footer a{
color: #FFFFFF;
font-size: 10px;
text-decoration: none;
}
#footer a:hover{
color: #FFFFFF;
font-size: 10px;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="tree">
<div id="bg">
<div id="main">
<!-- header begins -->
<div id="header">
<div id="logo">
<h1>metamorph_lonetree</h1>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
</div>
<div id="buttons">
<div class="but"><a href="#" class="razd_but" title="">Home</a></div>
<div class="but"><a href="#" class="razd_but" title="">Blog</a></div>
<div class="but"><a href="#" class="razd_but" title="">Gallery</a></div>
<div class="but"><a href="#" class="razd_but" title="">About Us</a></div>
<div ><a href="#" title="">Contact Us</a></div>
</div>
</div>
<!-- header ends -->
<div id="conttop"><img src="metamorph_lonetree-images/spaser.gif" alt="" width="1" height="1" /></div>
<!-- content begins -->
<div id="content">
<div id="razd">
<div id="left">
<h1>Metamorphosis Design</h1>
<div class="text">
<img src="metamorph_lonetree-images/img1.jpg" width="122" height="112" class="img" alt="" />
<span>Lorem ipsum dolor sit amet.</span> <br />
Consectetur adipiscing elit. Quisque et sem mi, a semper quam. Etiam nec dapibus diam. Praesent dignissim, quam vel pharetra moles- tie, tortor dolor ullamcorper dui, eget rhoncus urna magna vitae purus. Maecenas non...
</div>
<div class="read"><a href="#"><img src="metamorph_lonetree-images/but_read.png" alt="" /></a></div>
<br />
<h1>Free Website Templates</h1>
<div class="text">
<img src="metamorph_lonetree-images/img2.jpg" width="124" height="84" class="img" alt="" />
<span>Aliquam vel eros a eros.</span> <br />
Malesuada malesuada et ac eros. Ut neque lorem, eleifend ut scelerisque at, commodo quis velit. Suspendisse quam lacus, gravida eget consequat gravida, laoreet id dui. Sed
non velit turpis. Integer justo lacus, sollicitudin eu convallis a, volutpat non augue. Donec eget eros tellus, id tempus ligula. Integer euismod, augue in hendrerit faucibus, magna quam sollicitudin odio, ac volutpat felis quam non nisi. Fusce et eleifend risus. Curabitur id nunc justo, vel feugiat justo. Aenean condimentum laoreet ullamcorper. Aenean eget metus ipsum. Proin mattis mollisusto. Aenean condimentum laoreet ullamcorper. Aenean eget metus ipsum. Proin mattis mollis molestie...
</div>
<div class="read"><a href="#"><img src="metamorph_lonetree-images/but_read.png" alt="" /></a></div><br />
</div>
<div id="right">
<h2>Company News</h2>
<ul>
<li><span class="dat">05-11-2009 </span><br /><span>Etiam nec tempus arcu. </span><br />
Donec vitae lacus enim, vitae vulputate mi. Fusce et odio eget lacus imperdiet pulvinar. Morbi mattis, elit eu sodales faucibus, dui purus malesuada mi, eu...
<div class="read"><a href="#"><img src="metamorph_lonetree-images/but_read.png" alt="" /></a></div>
</li>
<li><span class="dat">05-11-2009 </span><br /><span>Etiam nec tempus arcu.</span><br />
Donec vitae lacus enim, vitae vulputate mi. Fusce et odio eget lacus imperdiet pulvinar. Morbi mattis, elit eu sodales faucibus, dui purus malesuada mi, eu...
<div class="read"><a href="#"><img src="metamorph_lonetree-images/but_read.png" alt="" /></a></div>
</li>
</ul><br />
</div>
<div style="clear: both"><img src="metamorph_lonetree-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
</div>
<!-- content ends -->
<div id="contbot"></div>
<!-- footer begins -->
<div id="footer">
Copyright 2010. Designed by <a href="http://www.metamorphozis.com/" title="Website Templates">Website 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 style="clear: both"><img src="metamorph_lonetree-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
</body>
</html>
Related examples in the same category