metamorph_lime
?<!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: #000000;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background: #486501;
line-height:20px;
}
#bg {
width: 1028px;
margin: 0px auto;
background:url(metamorph_lime-images/bg.jpg) repeat-y}
#main{
width: 1000px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
background:#FFFFFF;
background: url(metamorph_lime-images/big_bg.jpg) bottom no-repeat #FFFFFF;
}
#header { width:1000px;
padding: 0px 0px 0px 0px;
height: 304px;
}
#buttons{
width: 243px;
background: url(metamorph_lime-images/menu.jpg) left top no-repeat;
text-align:center;
float: left;
}
#buttons ul {
padding-left: 0px;
margin: 0px;
}
#buttons li {
display: inline;
}
#buttons a {
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight:normal;
display: block;
float: left;
width: 243px;
height: 41px;
text-decoration: none;
color: #FFFFFF;
padding-top: 20px;
text-align: center;
background: url(metamorph_lime-images/but.jpg) 0px 0px no-repeat;
}
#buttons a:hover {
text-decoration: underline;
background: url(metamorph_lime-images/but_hover.jpg) 0px 0px no-repeat;
}
#img_lim { height:304px;
width:440px;
background:url(metamorph_lime-images/img_lim.jpg) left top no-repeat;
float: left;
}
#bg_top {
background: url(metamorph_lime-images/bg_top.jpg) left top no-repeat;
height:304px;
width:317px;
float:left;}
#text_top {
color:#000000;
width:234px;
margin: 11px 0px 0px 19px;}
.tit_top {
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color:#486501;
font-weight: 900;}
#content{
width: 992px;
padding: 5px 0px 5px 0px;
background: url(metamorph_lime-images/bg_png.png) left repeat-y;
margin: 0px 4px 0px 4px;
}
#razd {
background:url(metamorph_lime-images/razd.gif) 325px repeat-y;
width: 992px;
min-height: 500px;
padding: 10px 0px 10px 0px;
}
#left{
width: 312px;
padding: 0px 0px 0px 6px;
margin: 0px;
float:left;
}
#center{float:left;
padding: 0px 0px 0px 15px;
width:317px;
}
.text{
padding: 7px 7px 0px 7px;
}
.img { float:left;
margin: 10px 10px 5px 0px;
}
span { color:#486501;
font-weight:bold;
}
.dot { background:url(metamorph_lime-images/tit.gif) bottom repeat-x;
line-height:20px; }
.dat { text-decoration:underline;}
H1{
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:normal;
color: #354905;
padding-bottom: 5px;
padding-left: 7px;
background:url(metamorph_lime-images/tit.gif) bottom repeat-x;
}
.read{
text-align:right;
padding-right:20px;
padding-top: 7px;
}
.read_top{
text-align:right;
padding-right:30px;
padding-top: 10px;
}
#right{
float:right;
width: 320px;
background: url(metamorph_lime-images/right_bg.gif) left repeat-y;
padding-right: 5px;
}
#right ul
{
list-style: none;
padding-left:0px;
padding-top:10px;
margin: 0px;
display:block;
padding-bottom: 0px;
}
#right li{
padding-top: 5px;
background: url(metamorph_lime-images/fish.gif) 3px 2px no-repeat;
padding-left: 39px;
}
#footer{
height: 40px;
width: 1000px;
font-size: 10px;
color: #FFFFFF;
padding-top: 8px;
text-align: center;
clear:both;
padding: 10px 0px 10px 0px;
background: url(metamorph_lime-images/footer.jpg) left top no-repeat;
}
#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="bg">
<div id="main">
<!-- header begins -->
<div id="header">
<div id="img_lim"><img src="metamorph_lime-images/spaser.gif" alt="" width="1" height="1" /></div>
<div id="bg_top">
<div id="text_top"><span class="tit_top">Lorem ipsum dolor</span><br /><b>Integer ut erat at risus sodales porttitor. </b>Pellentesque eget erat lorem, non condi- mentum nisi. Nullam sit amet??? dui nisi, non mollis urna. Maecenas tincidunt...
<div class="read_top"><a href="#"><img src="metamorph_lime-images/but_read.gif" alt="" /></a></div>
</div>
</div>
<div id="buttons">
<ul>
<li class="first"><a href="#" title="">Home</a></li>
<li><a href="#" title="">Blog</a></li>
<li><a href="#" title="">Gallery</a></li>
<li><a href="#" title="">About Us</a></li>
<li><a href="#" title="">Contact Us</a></li>
</ul>
</div>
</div>
<!-- header ends -->
<div id="conttop"><img src="metamorph_lime-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_lime-images/img1.jpg" width="134" height="93" class="img" alt="" />
<span>Lorem ipsum dolor.</span> <br />
Sit amet, consectetur adipiscing elit. Nulla vestibulum gravida consequat. Donec tempor arcu ut justo commodo lobortis in sit amet
nulla. Cras sodales sagittis nisi at interdum. Nunc a nulla et arcu interdum suscipit vitae quis leo. Duis ullamcorper pharetra arcu, a dapibus dui viverra quis. Vivamus facilisis augue ac sem blandit eu scelerisque sem porta. Morbi id mauris eget orci...
</div>
<div class="read"><a href="#"><img src="metamorph_lime-images/but_read.gif" alt="" /></a></div><br />
<div class="text">
<img src="metamorph_lime-images/img2.jpg" width="134" height="93" class="img" alt="" />
<span>Lorem ipsum dolor.</span> <br />
Sit amet, consectetur adipiscing elit. Nulla vestibulum gravida consequat. Donec tempor arcu ut justo commodo lobortis in sit amet
nulla. Cras sodales sagittis nisi at interdum. Nunc a nulla et arcu interdum suscipit vitae quis leo. Duis ullamcorper pharetra arcu, a dapibus dui viverra quis. Vivamus facilisis augue ac sem blandit eu scelerisque sem porta. Morbi id mauris eget orci...
</div>
<div class="read"><a href="#"><img src="metamorph_lime-images/but_read.gif" alt="" /></a></div>
</div>
<div id="center">
<h1>Free Website Templates</h1>
<div class="text"><span>Praesent fermentum ipsum scelerisque metus rhoncus eleifend at quis metus.</span> <br />
Integer consequat molestie est non tincidunt. Sed eget sem metus, a suscipit nisl. Morbi accumsan mauris tempor nisi rutrum adipiscing. Sed non neque magna, eu euismod magna. Ut dignissim posuere sem, rhoncus pellentesque quam pretium a. Morbi commodo rhoncus orci, non venenatis neque posuere sed. Sed pulvinar purus non tellus aliquam luctus in nec purus. Duis luctus faucibus felis id consequat. Vivamus in augue nisl, ut iaculis leo. Mauris luctus pharetra rutrum. Quisque eget est ut eros semper ornare. Mauris hendrerit scelerisque libero eu lacinia. Nullam aliquam faucibus erat et cursus. Nullam et est arcu. Aliquam ultricies nisl in magna vestibulum vitae imperdiet arcu sodales. Cras a nibh sed nisl accumsan laoreet ut viverra justo. <br /><br />
Donec ut lacus quis sapien tincidunt rutrum. Aliquam mattis elit ac enim adipiscing adipiscing varius urna vehicula. Mauris ut magna in eros mollis pharetra quis sit amet sem. Fusce commodo, metus vel pellentesque viverra, quam neque elementum lectus. <br /><br /><br />
<div class="dot"><span>Vivamus at erat sem, et tempus neque.</span></div>
<div class="dot"><span>Sed in felis dolor, quis consequat magna.</span></div>
<div class="dot"><span>In auctor odio id velit sagittis volutpat.</span></div>
</div>
</div>
<div id="right">
<h1>Company News</h1>
<ul>
<li><span class="dat">05-11-2009 </span><br /><span>Lorem ipsum dolor.</span><br />
Sit amet, consectetur adipiscing elit. Sed nunc enim, fringilla et pulvinar sit amet, aliquam nec ante. Donec porta orci eu ligula pellentesque adipiscing. Fusce dapibus metus sit amet mi lobortis non varius purus fermentum. Pellentesque mattis ultrices nisi, eget adipiscing arcu posuere et. Aliquam sodales mauris nunc, et...
<div class="read"><a href="#"><img src="metamorph_lime-images/but_read.gif" alt="" /></a></div><br />
</li>
<li><span class="dat">05-11-2009 </span><br /><span>Lorem ipsum dolor.</span><br />
Sit amet, consectetur adipiscing elit. Sed nunc enim, fringilla et pulvinar sit amet, aliquam nec ante. Donec porta orci eu ligula pellentesque adipiscing. Fusce dapibus metus sit amet mi lobortis non varius purus fermentum. Pellentesque mattis ultrices nisi, eget adipiscing arcu posuere et. Aliquam sodales mauris nunc, et...
<div class="read"><a href="#"><img src="metamorph_lime-images/but_read.gif" alt="" /></a></div>
</li>
</ul><br /><br />
<div class="text">
<div class="dot"><span>Vivamus at erat sem, et tempus neque.</span></div>
<div class="dot"><span>Sed in felis dolor, quis consequat magna.</span></div>
<div class="dot"><span>In auctor odio id velit sagittis volutpat.</span></div>
</div>
</div>
<div style="clear: both"><img src="metamorph_lime-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
</div>
<!-- content ends -->
<!-- footer begins -->
<div id="footer">
Copyright 2009. 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>
</body>
</html>
Related examples in the same category