metamorph_lensflare
<!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;
}
a:hover{
text-decoration: underline;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background: url(metamorph_lensflare-images/bg.jpg) top center no-repeat #000000;
line-height: 20px;
}
#main {
width: 982px;
margin: 0px auto;
}
#header {
width:982px;
background: url(metamorph_lensflare-images/header.jpg) left top no-repeat;
height: 267px;
}
#logo { font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:18px;
font-style:italic;
padding: 48px 0px 0px 13px;
background: url(metamorph_lensflare-images/big_img.jpg) left top no-repeat;
height: 60px;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 18px;
color: #FFFFFF;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-transform: none;
font-weight:100;
}
#buttons{
width: 982px;
background: url(metamorph_lensflare-images/bg_but.jpg) left top no-repeat;
text-align:center;
padding-top: 10px;
height: 45px;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
display: block;
float: left;
height: 33px;
text-decoration: none;
color: #FFFFFF;
padding-top: 12px;
padding-left: 0px;
text-align: center;
width: 194px;
background: url(metamorph_lensflare-images/but.png) left top no-repeat;
}
#buttons a:hover {
background:url(metamorph_lensflare-images/but_ov.png) left top no-repeat;
text-decoration: underline;
}
.but_p {width: 3px;
float:left;}
#box_all {
height: 210px;}
#box_all h1 {
text-align:center;
font-size:18px;
color:#FFFFFF;
font-weight:100;
padding: 8px 0px 17px 0px;}
#box_all .text {
padding: 0px 15px 0px 20px;}
.box {
width: 320px;
height: 201px;
float: left;
}
.box1 { background:url(metamorph_lensflare-images/box1.gif) ;}
.box2 { background:url(metamorph_lensflare-images/box2.gif) ;}
.box3 { background:url(metamorph_lensflare-images/box3.gif) ;}
.read_box {
text-align:right;
padding-right:10px;
padding-top: 4px;
font-weight:bold;}
.r { color: #8D0711;}
.f { color: #8B0E47;}
.o { color: #CD3800;}
.img_box { float:left;
margin: 6px 10px 3px 0px;
}
#top_tb {
width: 982px;
height: 10px;
background: url(metamorph_lensflare-images/tb_top.gif) center top no-repeat;
}
#bot_tb {
width: 982px;
height: 10px;
background: url(metamorph_lensflare-images/tb_bot.gif) center bottom no-repeat;
}
#tb{
width: 982px;
padding: 0px 0px 0px 0px;
background: url(metamorph_lensflare-images/tb.gif) center repeat-y;
margin: 0px 0px 0px 0px;
}
#left{
width: 622px;
margin: 0px 0px 0px 13px;
float: left;
color:#000000;
}
.right_b { background: url(metamorph_lensflare-images/fish_right.gif) 0px 6px no-repeat;
padding-left: 28px;
padding-right: 5px;
}
.text{
padding: 0px 0px 0px 0px;
}
.img { float:left;
margin: 7px 16px 3px 0px;
}
.img_r { float: right;
margin: 7px 0px 3px 16px;
}
span {font-weight:bold;}
#left span { color:#8D0711;
font-weight:bold;
}
#right span { color:#8D0711;
font-weight:bold;
}
#left H1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #D25B2E;
text-align:left;
padding: 5px 0px 10px 0px;
}
#right H1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #D25B2E;
text-align:left;
padding: 5px 0px 10px 0px;
}
.read{
text-align:right;
padding-right:10px;
padding-top: 5px;
font-weight:bold;
text-decoration:none;
}
.fish_read {
margin: 0px 2px 1px 0px;
}
.read a{
color: #8D0711;}
#right{
float: right;
width: 294px;
margin-right: 16px;
padding: 0px 0px 0px 0px;
}
#footer{
height: 62px;
width: 100%;
font-size: 12px;
color: #FFFFFF;
text-align: center;
clear:both;
padding: 20px 0px 0px 0px;
background: url(metamorph_lensflare-images/foter.gif) 0px 10px no-repeat;
}
#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="main">
<!-- header begins -->
<div id="header">
<div id="buttons">
<a href="#" class="but" title="">Home</a><div class="but_p"></div>
<a href="#" class="but" title="">Blog</a><div class="but_p"></div>
<a href="#" class="but" title="">Gallery</a><div class="but_p"></div>
<a href="#" class="but" title="">About us</a><div class="but_p"></div>
<a href="#" class="but" title="">Contact us</a>
</div>
<div id="logo"><a href="#">metamorph_lensflare</a>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="box_all">
<div class="box box1">
<h1>Lorem ipsum</h1>
<div class="text"><img src="metamorph_lensflare-images/img1.jpg" width="90" height="60" class="img_box" alt="" /><span class="r">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span><br />
Duis consectetur neque nec quam posuere non vehicula felis tincidunt. Sed in erat et leo convallis rhoncus. Ves- tibulum porta porttitor metus et consequat. Integer...
<div class="read_box"><a href="#" class="r">read more</a></div>
</div>
</div><img src="metamorph_lensflare-images/pix.gif" width="10" alt="" style="float:left"/>
<div class="box box2">
<h1>Vivamus non congue</h1>
<div class="text"><img src="metamorph_lensflare-images/img2.jpg" width="90" height="60" class="img_box" alt="" /><span class="f">Vivamus non congue dui. </span><br />
Sed porta dapibus tincidunt. Integer purus enim, aliquam ac sollicitudin ac, tempus nec justo. Maecenas lobortis, ante quis hendrerit porta, est nunc mollis sem, id dapibus quam diam et enim.
<div class="read_box"><a href="#" class="f">read more</a></div>
</div>
</div><img src="metamorph_lensflare-images/pix.gif" width="10" alt="" style="float:left" />
<div class="box box3">
<h1>Donec ligula mi</h1>
<div class="text"><img src="metamorph_lensflare-images/img3.jpg" width="90" height="60" class="img_box" alt="" /><span class="o">Donec ligula mi, euismod vel molestie id, suscipit tempor nisi. </span>
Duis consectetur neque nec quam posuere non vehicula felis tincidunt. Sed in erat et leo convallis rhoncus. Ves- tibulum porta porttitor metus et consequat. Integer...
<div class="read_box"><a href="#" class="o">read more</a></div>
</div>
</div>
</div>
<div id="top_tb"></div>
<div id="tb">
<div id="right">
<h1>Company News</h1>
<div class="right_b"><span>Vivamus augue nibh, malesuada in interdum et, viverra hendrerit dui. </span><br />
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis...<br />
<div class="read"><img src="metamorph_lensflare-images/fish_read.gif" alt="" width="5" height="5" class="fish_read" /><a href="#"> read more</a></div><br />
</div>
<div class="right_b"><span>Vivamus augue nibh, malesuada in interdum et, viverra hendrerit dui. </span><br />
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis...<br />
<div class="read"><img src="metamorph_lensflare-images/fish_read.gif" alt="" width="5" height="5" class="fish_read" /><a href="#"> read more</a></div><br />
</div>
<div class="right_b"><span>Vivamus augue nibh, malesuada in interdum et, viverra hendrerit dui. </span><br />
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis...<br />
<div class="read"><img src="metamorph_lensflare-images/fish_read.gif" alt="" width="5" height="5" class="fish_read" /><a href="#"> read more</a></div><br />
</div>
</div>
<div id="left">
<h1>Metamorphosis Design</h1>
<div class="text"><span>Nunc ac est at arcu ultricies eleifend eget sit amet velit. Sed congue scelerisque<br />
urna, eget gravida risus pellentesque id.</span><br />
<img src="metamorph_lensflare-images/img4.jpg" width="152" height="102" class="img" alt="" />
Donec ligula mi, euismod vel molestie id, suscipit tempor nisi. Cras hendrerit, nibh nec posuere lobortis, nisl ante porta enim, non molestie lorem augue suscipit sapien. Nullam sed ligula diam. Sed sed magna ac erat suscipit consectetur at eu diam. Vivamus augue nibh, malesuada in interdum et, viverra hendrerit dui. <br />
<div class="read"><img src="metamorph_lensflare-images/fish_read.gif" alt="" width="5" height="5" class="fish_read" /><a href="#"> read more</a></div>
<br />
</div>
<h1>Free Website Templates</h1>
<div class="text">
<img src="metamorph_lensflare-images/img5.jpg" width="120" height="80" class="img_r" alt="" /><span>Nullam imperdiet convallis est eleifend posuere. Nam eleifend cursus malesuada. </span><br />
Maecenas volutpat commodo dui, rutrum ullamcorper ante sollicitudin a. Etiam libero dui, condimentum ac faucibus sit amet, dignissim eget augue. In a dolor eu mauris porta laoreet id in enim. Donec pretium lacinia nunc vulputate varius. Nam feugiat pretium libero id sollicitudin. Fusce feugiat, nisl id sollicitudin sagittis, elit arcu tincidunt turpis, vel <br />
augue. In a dolor eu mauris porta laoreet id in enim. Donec pretium lacinia nunc vulputate varius. Nam feugiat pretium libero id sollicitudin. Fusce feugiat, nisl id sollicitudin sagittis, elit arcu tincidunt turpis, vel imperdiet arcu
<div class="read"><img src="metamorph_lensflare-images/fish_read.gif" alt="" width="5" height="5" class="fish_read" /><a href="#"> read more</a></div>
</div>
</div>
<br />
<div style="clear: both"><img src="metamorph_lensflare-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
<div id="bot_tb"></div>
<!-- content ends -->
<!-- footer begins -->
<div id="footer">
Copyright 2010. 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