metamorph_sweetlove
<!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 {text-decoration: none;}
#left a {
color:#625656;
}
#right a{
color: #FFFFFF;
}
a:hover{
text-decoration: underline;
color: #FFFFFF;
}
body{
font: 12px Arial, Helvetica, sans-serif;
line-height:20px;
background: url(metamorph_sweetlove-images/bg.jpg) left top no-repeat #000000;
}
#bg {
width: 1193px;
margin: 0px auto 0px 0px;
padding-bottom: 30px;}
#main {
width:626px;
margin-left: 567px;
}
#logo { font-family: Georgia, "Times New Roman", Times, serif;
color:#FFFFFF;
font-size:18px;
font-style:italic;
padding: 25px 50px 0px 0px;
height:100px;
text-align:right;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 16px;
color: #ffffff;
font-weight: bold;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-transform: none;
}
#buttons{
width: 618px;
height: 58px;
background: url(metamorph_sweetlove-images/buttons.jpg) 0px 0px no-repeat;
text-align:center;
}
#buttons a {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
display: block;
float: left;
height: 33px;
text-decoration: none;
color: #000000;
padding-top: 15px;
text-align: center;
width: 123px;
}
.but {
background: url(metamorph_sweetlove-images/fish_b.gif) right 4px no-repeat;
}
.but_l {
background:none;
}
#buttons a:hover {
text-decoration: underline;
}
#content{
width: 626px;
padding: 0px 0px 0px 0px;
background: #9C9C9C;
margin: 0px 0px 0px 0px;
}
#content_top{
background:url(metamorph_sweetlove-images/top.gif) left top no-repeat;}
#content_bot{
background:url(metamorph_sweetlove-images/bot.gif) left bottom no-repeat;
padding-top:4px;
padding-bottom:4px;
padding-left: 4px;}
#right{
width: 186px;
margin: 0px 5px 0px 0px;
float: right;
color:#000000;
}
.right_b {
padding-left: 8px;
padding-top: 10px;
width: 185px;}
.razd {
background: url(metamorph_sweetlove-images/razd.gif) bottom repeat-x;
height: 10px;
}
.text{
padding: 5px 7px 5px 7px;
}
.img {
margin: 0px 6px 7px 0px;
}
.img_r { float:right;
margin: 5px 0px 5px 12px;
}
span { color:#000000;
font-weight:bold;
}
.dat { text-decoration: underline;
color:#FFFFFF;
background:url(metamorph_sweetlove-images/fish.gif) 0px 3px no-repeat;
height:25px;
font-weight: bold;
padding-left: 30px;}
#list {
list-style: none;
padding-left:0px;}
#list li {
padding-left:7px;
background:url(metamorph_sweetlove-images/tit_l.gif) bottom repeat-x;
color: #625656;
font-weight:bold;
}
#right H1{
font-family: Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-weight: 100;
color: #000000;
text-align:center;
background: url(metamorph_sweetlove-images/tit_r.jpg) left top no-repeat;
padding-top: 15px;
height:33px;
}
#left H2{
font-family: Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-weight: 100;
color: #000000;
padding-bottom: 1px;
padding-top: 4px;
padding-left: 5px;
text-align: left;
background: url(metamorph_sweetlove-images/tit_l.gif) bottom repeat-x;
}
.read{
text-align:right;
padding-right:3px;
padding-top: 5px;
font-weight: 100;
text-decoration:none;
}
#left{
float: left;
width: 429px;
background: url(metamorph_sweetlove-images/bg_left.jpg) left 25px repeat-x;
margin-left: 0px;
padding: 0px 0px 0px 0px;
}
.tit_bot { background:url(metamorph_sweetlove-images/bot_bg.png) left top no-repeat;}
.left_top { background: url(metamorph_sweetlove-images/l_top.gif) top no-repeat;
height:8px;
width: 429px;
}
.left_bot { background: url(metamorph_sweetlove-images/l_bot.gif) bottom no-repeat;
height:9px;
width: 429px;}
.left_bg { background: url(metamorph_sweetlove-images/l_bg.gif) left repeat-y;
width: 419px;
padding: 0px 5px 0px 5px;
min-height: 455px;}
#gal_bg{
background:url(metamorph_sweetlove-images/gal_bg.gif) left repeat-y;
width:619px;
padding: 0px 0px 0px 0px;
clear:both;}
#gal_bot{
background: url(metamorph_sweetlove-images/gal_bot.gif) left bottom no-repeat;
width:619px;}
#gal_top{
background: url(metamorph_sweetlove-images/gal_top.gif) left top no-repeat;
width:619px;}
#gal_top H1{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:18px;
color:#FFFFFF;
padding: 10px 8px 0px 8px;
font-weight:100;
}
#galery {
padding: 10px 0px 0px 7px;}
#footer{
height: 42px;
width: 100%;
font-size: 10px;
color: #000000;
text-align: center;
clear:both;
padding: 14px 0px 0px 0px;
background: url(metamorph_sweetlove-images/footer.jpg) center bottom no-repeat;
}
#footer a{
color: #000000;
font-size: 10px;
text-decoration: none;
}
#footer a:hover{
color: #000000;
font-size: 10px;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="bg">
<div id="logo"><a href="#">metamorph_sweetlove</a><h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2></div>
<div id="main">
<!-- content begins -->
<div id="content">
<div id="content_top">
<div id="content_bot">
<div id="buttons">
<div ><a href="#" class="but" title="">Home</a></div>
<div ><a href="#" class="but" title="">Blog</a></div>
<div><a href="#" class="but" title="">Gallery</a></div>
<div><a href="#" class="but" title="">About us</a></div>
<div ><a href="#" id="but_l" title="">Contact us</a></div>
</div>
<div id="right">
<h1>Company News</h1>
<div class="tit_bot">
<div class="right_b">
<div class="dat">05-01-2010</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet risus quam, sit amet rutrum nibh. Integer fermentum egestas facilisis.... </div>
<div class="read"><a href="#">read more</a></div>
<div class="razd"></div>
<div class="right_b">
<div class="dat">05-01-2010</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet risus quam, sit amet rutrum nibh. Integer fermentum egestas facilisis.... </div>
<div class="read"><a href="#">read more</a></div>
<div class="razd"></div>
<div class="right_b">
<div class="dat">05-01-2010</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet risus quam, sit amet rutrum nibh. Integer fermentum egestas facilisis.... </div>
<div class="read"><a href="#">read more</a></div>
<div class="razd"></div>
</div>
</div>
<div id="left">
<div class="left_top"></div>
<div class="left_bg">
<h2>Metamorphosis Design</h2>
<div class="text">
<img src="metamorph_sweetlove-images/img1.jpg" class="img_r" alt="" />
<span>Lorem ipsum dolor sit amet, consectetur. </span><br />
Adipiscing elit. Sed sit amet risus quam, sit amet rutrum nibh. Integer fermentum egestas facilisis. Suspendisse quis neque elit, non placerat arcu. Mauris pellentesque erat quis sem sodales lobor-tis. Suspendisse est nisi, hendrerit quis ullamcor-per eget, hendrerit imperdiet quam. Proin a tincidunt metus. Lorem ipsum dolor sit amet, consecte adipiscing elit. Vestibulum vel lorem lectus, sit amet varius nisi. Praesent ac est nec elit bibendum venenatis sed eget augue. Etiam mi elit, cursus et blandit quis, molestie ac sapien. Sed ultrices arcu ac libero... <br />
<div class="read"><a href="#">read more</a><br />
</div>
</div>
<h2>Free Website Templates</h2>
<div class="text">
<span>Nam varius fringilla odio, ac hendrerit ligula aliquam id. </span><br />
Quisque ultrices tincidunt malesuada. Fusce tincidunt, nibh blandit tristique euismod, tellus ipsum sagittis leo, sit amet porttitor est leo nec orci. Donec ut vulputate nisl. Mauris condimentum tincidunt lectus, a ornare nibh fringilla nec. Nunc non dolor et nisi malesuada luctus eget... <br />
<div class="read"><a href="#">read more</a></div><br />
</div>
<ul id="list">
<li>Sed orci augue, placerat non scelerisque eu, ullamcorper iaculis </li>
<li>Donec scelerisque odio nec quam fringilla sagittis. </li>
</ul><br />
</div>
<div class="left_bot"></div>
</div>
<div style="clear: both"><img src="metamorph_sweetlove-images/spaser.gif" alt="" width="1" height="19" /></div>
<div id="gal_bg">
<div id="gal_bot">
<div id="gal_top">
<h1>Our Gallery</h1>
<div id="galery"><img src="metamorph_sweetlove-images/img2.jpg" class="img" width="147" height="109" alt="" /><img src="metamorph_sweetlove-images/img3.jpg" class="img" width="147" height="109" alt="" /><img src="metamorph_sweetlove-images/img4.jpg" class="img" width="147" height="109" alt="" /><img src="metamorph_sweetlove-images/img5.jpg" class="img" width="147" height="109" alt="" /> </div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- content ends -->
<!-- footer begins -->
<div id="footer">
Copyright 2009. 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