metamorph_pinkblossom
<!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: #711419;
line-height:20px;
}
#main{
width: 986px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
background:#FFFFFF;
background: url(metamorph_pinkblossom-images/big_bg.jpg) bottom no-repeat #FFFFFF;
}
#header { width:978px;
padding: 0px 4px 0px 4px;
height: 54px;
}
#buttons{
width: 978px;
height: 51px;
background: url(metamorph_pinkblossom-images/menu.jpg) left top no-repeat;
text-align:center;
}
#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: 96px;
height: 36px;
text-decoration: none;
color: #711419;
padding-top: 13px;
padding-left: 50px;
margin-left: 42px;
text-align: left;
background:url(metamorph_pinkblossom-images/fish_but.gif) 0px 19px no-repeat;
}
#buttons a:hover {
text-decoration: underline;
background:url(metamorph_pinkblossom-images/fish_but.gif) 0px 19px no-repeat;
}
#content{
width: 978px;
padding: 0px 0px 0px 0px;
background: url(metamorph_pinkblossom-images/bg_png.png) left repeat-y;
margin: 0px 4px 0px 4px;
}
#conttop{
background: url(metamorph_pinkblossom-images/top_png.png) 4px 0px no-repeat;
width: 986px;
height: 9px;
}
#contbot{
background: url(metamorph_pinkblossom-images/bot_png.png) 4px bottom no-repeat;
width: 986px;
height: 9px;
}
#razd {
background:url(metamorph_pinkblossom-images/razd_bg.gif) 325px repeat-y;
width: 978px;
min-height: 650px;
}
#left{
width: 315px;
padding: 0px 0px 0px 6px;
margin: 0px;
float:left;
}
#center{float:left;
padding: 0px 0px 0px 11px;
width:315px;
}
#right{float:right;}
.text{
padding: 7px;
}
.img { float:left;
margin: 5px 10px 5px 0px;
}
span { color:#711419;
font-weight:bold;
}
.dot { background:url(metamorph_pinkblossom-images/dot_bg.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: #711419;
padding-bottom: 5px;
padding-left: 7px;
background:url(metamorph_pinkblossom-images/tit_bg.gif) bottom repeat-x;
}
.read{
text-align:right;
padding-right:20px;
}
#right{
float:right;
width: 317px;
background: url(metamorph_pinkblossom-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_pinkblossom-images/fish_left.png) no-repeat;
padding-left: 39px;
}
#footer{
height: 40px;
width: 986px;
font-size: 10px;
color: #000000;
padding-top: 8px;
text-align: center;
clear:both;
padding: 15px 5px 15px 5px;
}
#footer a{
color: #000000;
font-size: 10px;
text-decoration: none;
}
</style>
</head>
<body>
<div id="bg">
<div id="main">
<!-- header begins -->
<div id="header">
<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_pinkblossom-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_pinkblossom-images/img1.jpg" width="134" height="92" 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="#">read more</a></div><br />
<div class="text">
<img src="metamorph_pinkblossom-images/img2.jpg" width="134" height="92" 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="#">read more</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 <br />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="#">read more</a></div>
</li>
<li><span class="dat">05-11-2009 <br />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="#">read more</a></div><br />
</li>
</ul><br /><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_pinkblossom-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
</div>
<!-- content ends -->
<div id="contbot"><img src="metamorph_pinkblossom-images/spaser.gif" alt="" /></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>
</body>
</html>
Related examples in the same category