metamorph_lilium
<!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;
color:#000000;
}
a:hover{
text-decoration: none;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
line-height:20px;
background:url(metamorph_lilium-images/bg.jpg) top repeat-x #FBFDF9;
}
#bg_foot { background:url(metamorph_lilium-images/footer.jpg) bottom repeat-x;
width: 100%;}
#main{
width: 989px;
margin: 0px 0px;
padding: 0px 0px 0px 0px;
background: url(metamorph_lilium-images/main_bg.png) repeat-y ;
}
#bot_lf {
background:url(metamorph_lilium-images/bot_lf.jpg) left bottom no-repeat;}
#top_lf {background:url(metamorph_lilium-images/top_lf.jpg) right top no-repeat;
}
#header { width:1014px;
padding: 0px 0px 0px 0px;
height: 234px;
background:url(metamorph_lilium-images/header.jpg) left top no-repeat;
}
#buttons{
width: 560px;
background: url(metamorph_lilium-images/menu.jpg) left top repeat-x;
text-align:center;
height:43px;
margin-right:0px;
padding-left:0px;
float: left;
margin-left: 407px;
}
#buttons a {
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight:bold;
display: block;
float: left;
width: 112px;
height: 30px;
text-decoration: none;
color: #FFFFFF;
padding-top: 7px;
text-align: center;
margin-right: 0px;
background: url(metamorph_lilium-images/but.jpg) left top no-repeat;
}
#buttons a:hover {
text-decoration: none;
background: url(metamorph_lilium-images/but_ov.jpg) left top no-repeat;
color:#FFFFFF;
text-decoration: underline;
}
#logo{
padding: 41px 0px 0px 0px;
height: 112px;
text-align:right;
width: 954px;
}
#logo a {
font-family:Georgia, "Times New Roman", Times, serif;
text-decoration: none;
font-size: 18px;
color: #FFFFFF;
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: #FFFFFF;
}
#content{
width: 1014px;
padding: 0px 0px 0px 0px;
}
#left{
width: 639px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 23px;
float:left;
background: url(metamorph_lilium-images/left.jpg) top repeat-x;
min-height: 590px;
}
#left_top { background: url(metamorph_lilium-images/left_top.jpg) left top no-repeat;
padding: 0px 18px 0px 16px;}
#left_bot {background:url(metamorph_lilium-images/left_bot.gif) left bottom no-repeat;
height: 7px;}
#left_mid { background: url(metamorph_lilium-images/left_mid.jpg) 0px 50px repeat-x #97C670;
}
.left_col {width: 290px;
float:left;
padding: 0px 10px 0px 0px}
.left_right {width: 304px;
float:left;}
#right .list
{
list-style: none;
padding-left: 36px;
padding-right: 12px;
padding-top: 15px;
margin: 0px;
display:block;
background: url(metamorph_lilium-images/fish.png) 1px 19px no-repeat;
}
.tit_bot { background: url(metamorph_lilium-images/tit_bot.png) center top no-repeat;
padding: 0px 0px 0px 0px;
}
.text{
padding: 10px 0px 0px 0px;
}
.img { float:left;
margin: 4px 13px 5px 0px;
}
.gal { padding: 13px 0px 0px 0px;
height: 105px;
}
.img_gal {
text-align: center;
float: left;}
.img_g {
margin: 0px;}
.gal_top {
height: 10px;
width: 605px;
background:url(metamorph_lilium-images/gal_top.png) left top no-repeat;
}
.gal_bot {
height: 10px;
width: 605px;
background:url(metamorph_lilium-images/gal_bot.png) left top no-repeat;
}
.gal_mid {
background:#FFFFFF;
padding: 3px 0px 3px 13px;
height: 82px;
}
.razd_img {width: 31px;
background: url(metamorph_lilium-images/razd_img.gif) 15px 0px repeat-y;
float:left;
height: 82px;}
.img_t { float:left;
margin: 0px 10px 0px 0px;
}
span { color:#496A2D;
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: #FFFFFF;
padding-bottom: 13px;
padding-left: 2px;
padding-top: 14px;
text-align: center;
background: url(metamorph_lilium-images/tit_r.png) bottom repeat-x;
}
#left H2{
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:normal;
color: #496A2D;
padding-bottom: 6px;
padding-left: 2px;
padding-top: 37px;
text-align:left;
background: url(metamorph_lilium-images/tit_l.gif) bottom repeat-x;
}
.read{
text-align:right;
padding-right:5px;
padding-top: 5px;
font-weight:bold;
}
.read a {font-weight:bold;
color: #496A2D;
border-bottom: 1px dotted #496A2D;}
.read_r{
text-align:right;
padding-right:5px;
padding-top: 8px;
}
#right{
float:right;
width: 314px;
margin-right: 3px;
background: url(metamorph_lilium-images/right.jpg) top repeat-x;
padding-top: 0px;
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_lilium-images/fish1.gif) 10px 12px no-repeat;
padding-left: 38px;
}
#footer{
height: 53px;
width: 100%;
font-size: 12px;
color: #FFFFFF;
text-align: center;
clear:both;
padding: 12px 0px 0px 0px;
}
#footer a{
color: #FFFFFF;
font-size: 12px;
text-decoration: none;
}
#footer a:hover{
color: #FFFFFF;
font-size: 12px;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="bg_foot">
<div id="main">
<div id="bot_lf">
<div id="top_lf">
<!-- header begins -->
<div id="header">
<div id="logo"><a href="#">metamorph_lilium</a>
<h3><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h3>
</div>
<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>
<!-- header ends -->
<!-- content begins -->
<div id="content">
<div id="left">
<div id="left_mid">
<div id="left_top">
<h2>Metamorphosis Design</h2>
<div class="text"><img src="metamorph_lilium-images/img1.jpg" width="202" height="136" class="img" alt="" /><span >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sem lorem, interdum at mattis at, eleifend accumsan leo. </span> <br />
<br />
Cras libero mauris, ultrices sit amet rutrum ut, consequat sit amet justo. Nam sit amet nisi augue, sit amet lobortis felis. In fringilla pellentesque posuere. Morbi posuere, nunc quis fringilla mattis, nulla neque auctor nisl, eget laoreet nulla ipsum vel tortor. Mauris luctus venenatis risus interdum venenatis. Sed iaculis bibendum leo. </div>
<h2>Free Website Templates</h2>
<div class="text">
<div class="left_col"><img src="metamorph_lilium-images/img6.jpg" width="122" height="82" class="img" alt="" /><span >Suspendisse eleifend dignissim molestie. </span> <br />
Proin lectus urna, rhoncus ac cursus eu, pulvinar id risus. Cras lorem metus, <br />
condimentum sed porttitor a, ullamcorper molestie erat. Class aptent taciti sociosqu ad litora torquent...
<div class="read"><a href="#">read more</a></div>
</div>
<div class="right_col"><img src="metamorph_lilium-images/img7.jpg" width="122" height="82" class="img" alt="" /><span id="main2"><span id="search">Proin vel nulla dolor, vitae semper augue. </span></span><br />
Nunc nisi sapien, gravida non volutpat sed, rhoncus eget sapien. Aenean adipiscing est <br />
Aenean adipiscing est orci. Integer eu felis porttitor ligula sollicitudin aliquam vel ut mauris. Aenean...
<div class="read"><a href="#">read more</a></div>
</div>
</div>
<h2>Our Gallery</h2>
<div class="gal">
<div class="gal_top"></div>
<div class="gal_mid">
<div class="img_gal"><img src="metamorph_lilium-images/img2.jpg" width="122" height="82" class="img_g" alt="" /></div><div class="razd_img"></div>
<div class="img_gal"><img src="metamorph_lilium-images/img3.jpg" width="122" height="82" class="img_g" alt="" /></div><div class="razd_img"></div>
<div class="img_gal"><img src="metamorph_lilium-images/img4.jpg" width="122" height="82" class="img_g" alt="" /></div><div class="razd_img"></div>
<div class="img_gal"><img src="metamorph_lilium-images/img5.jpg" width="122" height="82" class="img_g" alt="" /></div>
</div>
<div class="gal_bot"></div>
</div>
<div class="read"><a href="#">read more</a></div><br />
</div>
</div>
<div id="left_bot"></div><br />
</div>
<div id="right">
<h1>Company News</h1>
<div class="tit_bot">
<div class="list">
<span>Suspendisse eleifend dignissim molestie. Proin lectus urna, rhoncus ac cursus eu, pulvinar id risus. </span><br />
<br />
Cras lorem metus, condimentum sed porttitor a, ullamcorper molestie erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque a lacinia orci.
<div class="read_r"><a href="#"><img src="metamorph_lilium-images/b_read.png" alt="" /></a></div>
</div>
<div class="list">
<span>Suspendisse eleifend dignissim molestie. Proin lectus urna, rhoncus ac cursus eu, pulvinar id risus. </span><br />
<br />
Cras lorem metus, condimentum sed porttitor a, ullamcorper molestie erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque a lacinia orci.
<div class="read_r"><a href="#"><img src="metamorph_lilium-images/b_read.png" alt="" /></a></div><br />
</div>
</div>
<div style="clear: both"><img src="metamorph_lilium-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
<!-- content ends -->
<!-- footer begins -->
<div id="footer">
Copyright 2010. Designed by <a href="http://www.metamorphozis.com/" title="Free Flash Templates">Free 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>
</div>
</body>
</html>
Related examples in the same category