metamorph_redornament
<!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;
}
.tit_bot a{
text-decoration:none;
color:#000000;
}
.tit_bot a:hover{
text-decoration: underline;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
line-height:20px;
background:url(metamorph_redornament-images/bg.jpg) top repeat-x #000000;
}
#main{
width: 1014px;
margin: 0px auto;
padding: 0px 15px 0px 15px;
background: url(metamorph_redornament-images/main_bg.png) repeat-y ;
}
#bot_lf {
background:url(metamorph_redornament-images/bot_lf.jpg) left bottom no-repeat;}
#top_lf {background:url(metamorph_redornament-images/top_lf.jpg) right top no-repeat;
}
#header { width:1014px;
padding: 0px 0px 0px 0px;
height: 133px;
}
#buttons{
width: 102px;
background: url(metamorph_redornament-images/menu.jpg) left top repeat-x;
text-align:center;
height:43px;
margin-right:0px;
padding-left:12px;
float: left;
}
#buttons a {
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight:bold;
display: block;
float: left;
width: 102px;
height: 30px;
text-decoration: none;
color: #FFFFFF;
padding-top: 7px;
text-align: center;
margin-right: 0px;
background: url(metamorph_redornament-images/but.jpg) left top no-repeat;
}
#buttons a:hover {
text-decoration: none;
background: url(metamorph_redornament-images/but_ov.jpg) left top no-repeat;
color:#FFFFFF;
}
#logo{
background: url(metamorph_redornament-images/logo.jpg) center top no-repeat;
padding: 48px 0px 0px 135px;
}
#logo a {
font-family:Georgia, "Times New Roman", Times, serif;
text-decoration: none;
font-size: 18px;
color: #762121;
font-weight: 100;
font-style:italic;
font-weight:bold;
}
#logo H3 a{
font-size: 12px;
background:none;
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color: #762121;
}
#content{
width: 1014px;
padding: 2px 0px 0px 0px;
}
#left{
width: 620px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 10px;
float:left;
background: url(metamorph_redornament-images/left.jpg) top repeat-x;
min-height: 590px;
}
#left_top { background: url(metamorph_redornament-images/left_top.png) left top no-repeat;
height: 8px;}
#left_bot {background:url(metamorph_redornament-images/left_bot.png) left bottom no-repeat;
height: 7px;}
#left_mid { background:url(metamorph_redornament-images/left.png) left repeat-y;
padding: 0px 13px 0px 11px;}
#right .list
{
list-style: none;
padding-left: 32px;
padding-top: 5px;
padding-bottom: 10px;
margin: 0px;
display:block;
background: url(metamorph_redornament-images/fish.gif) 1px 9px no-repeat;
}
.tit_bot { background: url(metamorph_redornament-images/tit_bot.png) center top no-repeat;
padding: 10px 0px 0px 0px;
}
.text{
padding: 10px 0px 0px 0px;
}
.img { float:left;
margin: 2px 17px 5px 0px;
}
.gal { padding: 15px 0px 0px 15px;
height: 100px;}
.img_gal {
width: 122px;
text-align: center;
margin-right: 26px;
float: left;}
.gal a {
color: #530202;
font-weight:bold;
border-bottom: 1px dotted #530202;
text-decoration:none;
padding-top: 4px;
height: 30px;}
.img_g {
padding-bottom: 4px;}
.img_gal_last {
width: 122px;
text-align: center;
float: left;}
.img_t { float:left;
margin: 0px 10px 0px 0px;
}
span { color:#700307;
font-weight:bold;
}
.color { color:#3774A0;}
.dat { text-decoration:underline;}
#right H1{
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:normal;
color: #892825;
padding-bottom: 10px;
padding-left: 2px;
padding-top: 10px;
text-align:left;
background: url(metamorph_redornament-images/tit.gif) bottom repeat-x;
}
#left H2{
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:normal;
color: #892825;
padding-bottom: 10px;
padding-left: 2px;
padding-top: 10px;
text-align:left;
background: url(metamorph_redornament-images/tit.gif) bottom repeat-x;
}
.read{
text-align:right;
padding-right:5px;
padding-top: 15px;
}
.read_r{
text-align:right;
padding-right:5px;
padding-top: 8px;
}
#right{
float:right;
width: 242px;
margin-right: 3px;
background: url(metamorph_redornament-images/right.jpg) top repeat-x;
padding-top: 263px;
margin-right: 13px;
}
#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_redornament-images/fish1.gif) 10px 12px no-repeat;
padding-left: 38px;
}
#footer{
height: 79px;
width: 490px;
font-size: 12px;
color: #000000;
text-align: center;
clear:both;
padding: 75px 0px 0px 524px;
}
#footer a{
color: #000000;
font-size: 12px;
text-decoration: none;
}
#footer a:hover{
color: #000000;
font-size: 12px;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="main">
<div id="bot_lf">
<div id="top_lf">
<!-- header begins -->
<div id="header">
<div id="logo"><a href="#">metamorph_redornament</a>
<h3><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h3>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="content">
<div id="buttons">
<div ><a href="#" class="razd_but" title="">Home</a></div>
<div ><a href="#" class="razd_but" title="">Blog</a></div>
<div ><a href="#" class="razd_but" title="">Gallery</a></div>
<div ><a href="#" class="razd_but" title="">About Us</a></div>
<div ><a href="#" title="">Contact Us</a></div>
</div>
<div id="left">
<div id="left_top"></div>
<div id="left_mid">
<h2>Metamorphosis Design</h2>
<div class="text"><img src="metamorph_redornament-images/img1.jpg" width="152" height="150" class="img" alt="" /><span >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor, tellus vitae rutrum pellentesque, velit metus varius mi, id rhoncus velit neque vitae turpis. </span> <br />
Etiam suscipit tellus eu enim interdum in bibendum quam sodales. Aenean mattis est at tellus ullamcorper non tempus leo lacinia. Donec leo est, molestie et lobortis ut, cursus et augue. Morbi vitae ipsum sapien. Nulla a ligula neque, vitae interdum nunc. Integer porta, ante vitae tempus commodo, enim eros ullamcorper justo, facilisis imperdiet diam nunc ut dolor. Suspendisse arcu ipsum, mollis in ullamcorper in, semper non tortor. Morbi vel nisi nisl. Quisque purus quam, euismod id ullamcorper dapibus, ultricies mollis. </div>
<br />
<h2>Free Website Templates</h2>
<div class="text"><span >Duis ullamcorper posuere bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lectus velit, sodales ac molestie id, molestie non neque. <br />
</span> <br />
Proin iaculis felis et est congue luctus. Phasellus sodales rhoncus nibh eu egestas. Proin feugiat tellus id sem dignissim congue. In hac habitasse platea dictumst. Vivamus vel dignissim lectus. Vivamus nec leo nec justo convallis ultricies id vel odio. Duis lectus augue, accumsan eu eleifend in, convallis sit amet arcu.</div>
<div class="read"><a href="#"><img src="metamorph_redornament-images/b_read.gif" alt="" /></a></div>
<br />
<h2>Our Gallery</h2>
<div class="gal">
<div class="img_gal"><img src="metamorph_redornament-images/img2.gif" width="122" height="71" class="img_g" alt="" /><br /><a href="#">Pellentesque</a></div>
<div class="img_gal"><img src="metamorph_redornament-images/img3.gif" width="122" height="71" class="img_g" alt="" /><br /><a href="#">Vestibulum</a></div>
<div class="img_gal"><img src="metamorph_redornament-images/img4.gif" width="122" height="71" class="img_g" alt="" /><br /><a href="#">Praesent</a></div>
<div class="img_gal_last"><img src="metamorph_redornament-images/img5.gif" width="122" height="71" class="img_g" alt="" /><br /><a href="#">Curabitur</a></div>
</div>
<div class="read"><a href="#"><img src="metamorph_redornament-images/b_view.gif" alt="" /></a></div><br />
</div>
<div id="left_bot"></div>
</div>
<div id="right">
<h1>Company News</h1>
<div class="tit_bot">
<div class="list">
<span>Quisque sit amet odio in nisi aliquam lacinia. Nulla facilisi. </span><br /><br />
Suspendisse metus enim, varius in laoreet sit amet, semper a augue. Fusce vitae neque mauris. Morbi in est neque. Proin vitae ipsum risus.
<div class="read"><a href="#"><img src="metamorph_redornament-images/b_read.gif" alt="" /></a></div>
</div>
<div class="list">
<span>Quisque sit amet odio in nisi aliquam lacinia. Nulla facilisi. </span><br /><br />
Suspendisse metus enim, varius in laoreet sit amet, semper a augue. Fusce vitae neque mauris. Morbi in est neque. Proin vitae ipsum risus.
<div class="read"><a href="#"><img src="metamorph_redornament-images/b_read.gif" alt="" /></a></div>
</div>
</div>
<div style="clear: both"><img src="metamorph_redornament-images/spaser.gif" alt="" width="1" height="1" /></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>
</div>
</div>
</body>
</html>
Related examples in the same category