metamorph_camomile
<!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: url(metamorph_camomile-images/bg.gif) ;
line-height:20px;
}
#main{
width: 1002px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
background:#FFFFFF;
background: url(metamorph_camomile-images/big_bg.jpg) bottom no-repeat #FFFFFF;
}
#header { width:1002px;
padding: 0px 0px 0px 0px;
height: 378px;
}
#buttons{
width: 1000px;
background: url(metamorph_camomile-images/menu.jpg) left top repeat-x;
text-align:center;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
height:69px;
}
#buttons .but {
float:left;
background: url(metamorph_camomile-images/but_razd.jpg) right center no-repeat;
height:69px;
}
#buttons a {
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight:normal;
display: block;
float: left;
width: 198px;
height: 44px;
text-decoration: none;
color: #FFFFFF;
padding-top: 25px;
text-align: center;
margin-right: 2px;
}
#buttons a:hover {
text-decoration: underline;
background:url(metamorph_camomile-images/over.jpg) repeat-x;
}
#logo{
background: url(metamorph_camomile-images/logo.jpg) center top no-repeat;
height: 284px;
padding: 25px 0px 0px 736px;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 16px;
color: #FFFFFF;
font-weight: bold;
}
#logo H2 a{
font-size: 10px;
}
#bg_top {
background: url(metamorph_camomile-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;}
#cont_top {
background: url(metamorph_camomile-images/cont_top.jpg) top repeat-x;
width:1000px;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
#cont_bot {
background: url(metamorph_camomile-images/cont_bot.jpg) bottom repeat-x;
width:986px;
padding: 7px;
}
#content{
width: 100%;
padding: 7px 0px 7px 0px;
background: url(metamorph_camomile-images/cont_bg.png);
}
#razd {
background:url(metamorph_camomile-images/razd.gif) 232px repeat-y;
width: 972px;
min-height: 500px;
padding: 0px 6px 3px 8px;
}
#left{
width: 219px;
padding: 0px 0px 0px 0px;
margin: 0px;
float:left;
background: url(metamorph_camomile-images/tit.png) left 28px repeat-x;
}
#left .list
{
list-style: none;
padding-left: 31px;
padding-top: 5px;
margin: 0px;
display:block;
background: url(metamorph_camomile-images/fish.png) 6px 4px no-repeat;
}
#center{float:left;
padding: 0px 0px 0px 0px;
width:512px;
background: url(metamorph_camomile-images/tit.png) left 28px repeat-x;
margin: 0px 0px 0px 11px;
}
.text{
padding: 7px 4px 0px 7px;
}
.img { float:left;
margin: 5px 17px 5px 0px;
}
span { color:#1C4B14;
font-weight:bold;
}
.color { color:#347818;}
.dot { background:url(metamorph_camomile-images/dot.gif) center repeat-x;
height:20px; }
.dat { text-decoration:underline;}
H1{
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:normal;
color: #354905;
padding-bottom: 35px;
padding-left: 7px;
padding-top: 5px;
text-align:center;
}
H2{
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:normal;
color: #354905;
padding-bottom: 35px;
padding-left: 4px;
padding-top: 5px;
text-align:left;
}
.read{
text-align:right;
padding-right:0px;
padding-top: 4px;
}
.read_top{
text-align:right;
padding-right:30px;
padding-top: 10px;
}
.right{
float:right;
width: 219px;
padding-right: 0px;
background: url(metamorph_camomile-images/tit.png) left 28px repeat-x;
}
.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_camomile-images/fish.png) 6px 4px no-repeat;
padding-left: 36px;
}
#footer{
height: 45px;
width: 1000px;
font-size: 10px;
color: #FFFFFF;
padding-top: 8px;
text-align: center;
clear:both;
padding: 10px 0px 10px 0px;
background: url(metamorph_camomile-images/footer.jpg) left top repeat-x;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
#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="main">
<!-- header begins -->
<div id="header">
<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 id="logo"><a href="#">metamorph_camomile</a>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
</div>
</div>
<!-- header ends -->
<div id="cont_top">
<div id="cont_bot">
<!-- content begins -->
<div id="content">
<div id="razd">
<div id="left">
<h1>Company News</h1>
<div class="list"><span class="dat">05-11-2009 </span><br /><span>Lorem ipsum dolor sit amet.</span><br />
Consectetur adipiscing elit. Ut consectetur tempor augue sit amet suscipit. Vivamus dictum, enim eu semper viverra, est sapien lobortis nisi, sit amet...
<div class="read"><a href="#"><img src="metamorph_camomile-images/but_read.gif" alt="" /></a></div>
</div>
<div class="dot"></div>
<div class="list"><span class="dat">05-11-2009 </span><br /><span>Lorem ipsum dolor sit amet.</span><br />
Consectetur adipiscing elit. Ut consectetur tempor augue sit amet suscipit. Vivamus dictum, enim eu semper viverra, est sapien lobortis nisi, sit amet...
<div class="read"><a href="#"><img src="metamorph_camomile-images/but_read.gif" alt="" /></a></div>
</div>
</div>
<div id="center">
<h1>Metamorphosis Design</h1>
<div class="text">
<img src="metamorph_camomile-images/img1.jpg" width="161" height="99" class="img" alt="" />
<span class="color">Sed elementum auctor posuere.</span> <br />
Morbi adipiscing velit convallis purus gravida eu semper urna tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis neque lectus, vitae consequat urna. Ves-tibulum ac elementum tellus. Vivamus faucibus cursus...</div>
<div class="read"><a href="#"><img src="metamorph_camomile-images/but_read.gif" alt="" /></a></div><br />
<div class="text">
<img src="metamorph_camomile-images/img2.jpg" width="161" height="99" class="img" alt="" />
<span class="color">Nunc feugiat lobortis interdum. </span> <br />
Vestibulum ipsum mauris, fermentum vel condimentum at, accumsan sit amet eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eleifend tincidunt facilisis. Nullam consequat, magna eget congue... </div>
<div class="read"><a href="#"><img src="metamorph_camomile-images/but_read.gif" alt="" /></a></div><br />
<div class="text">
<img src="metamorph_camomile-images/img3.jpg" width="161" height="99" class="img" alt="" />
<span class="color">Aenean id tellus arcu. </span> <br />
Aenean sit amet quam tempor est pharetra dapibus sed ut metus. Nunc pulvinar mollis felis, eget ullamcorper eros rutrum rutrum. Sed non lacus a augue hendrerit mattis. Sed sagittis fermentum mi, id euismod urna... </div>
<div class="read"><a href="#"><img src="metamorph_camomile-images/but_read.gif" alt="" /></a></div><br />
</div>
<div class="right">
<h1>Categories</h1>
<ul>
<li><a href="">Fusce id turpis non ante porttitor </a></li>
<li><a href="">In a nibh est, in rutrum elit. </a></li>
<li><a href="">In id sapien augue, id ornare leo. </a></li>
<li><a href="">Nunc quis nibh sed nisi blandit. </a></li>
<li><a href="">Etiam nec tortor erat, eu tincidnt</a></li>
<li><a href="">Etiam bibendum velit sed mi </a></li>
<li><a href="">Nunc ac ante bibendum erat </a></li>
<li><a href="">Donec ut nulla ligula, sit amet </a></li>
<li><a href="">Suspendisse vehicula massa </a></li>
</ul><br />
</div>
<div class="right">
<h1>Meta</h1>
<ul>
<li><a href="">Proin hendrerit arcu ut nibh malesuada id bibendum sem</a></li>
<li><a href="">Donec ut nulla ligula, sit amet molestie sapien.</a></li>
<li><a href="">Suspendisse vehicula massa at erat lacinia semper. </a></li>
</ul>
</div>
<div style="clear: both"><img src="metamorph_camomile-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
</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>
</body>
</html>
Related examples in the same category