metamorph_redinfinity
<!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: #901111;
text-decoration:underline;
}
a:hover{
text-decoration: underline;
color: #264FA4;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
line-height:20px;
}
#bg {
background: url(metamorph_redinfinity-images/bg.jpg) center repeat-y #000000;
margin: 0px auto;
}
#main{
width: 1000px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
background: url(metamorph_redinfinity-images/main.jpg) left top no-repeat #FFFFFF;
}
#main_bot {
width: 1000px;
background: url(metamorph_redinfinity-images/main_bot.jpg) left bottom no-repeat
}
#header { width:1000px;
padding: 0px 0px 0px 0px;
height: 198px;
background:url(metamorph_redinfinity-images/header.jpg) left top no-repeat;
}
#logo {
height: 124px;
}
#logo h1, #logo p {
margin: 0;
line-height: normal;
}
#logo h1 {
padding: 17px 40px 0px 20px;
font-size: 24px;
color: #6D1313;
background: none;
text-align: right;
}
#logo h2 {
padding: 10px 40px 0 20px;
font-size: 10px;
text-transform: uppercase;
color: #6D1313;
background: none;
text-align: right;
}
#logo a {
text-decoration: none;
color: #6D1313;
}
#buttons{
width: 590px;
height: 64px;
background: url(metamorph_redinfinity-images/menu.jpg) left top no-repeat;
text-align:center;
margin-left: 0px;
float:right;
}
#buttons ul {
padding-left: 0px;
margin: 0px;
}
#buttons li {
display: inline;
}
#buttons a {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight:normal;
display: block;
float: left;
width: 80px;
height: 42px;
text-decoration: none;
color: #6D1313;
padding-top: 22px;
padding-left: 30px;
margin-left: 0px;
margin-right: 0px;
text-align: left;
background:url(metamorph_redinfinity-images/fish_b.gif) 0px 23px no-repeat;
}
#buttons .last_b {width: 100px;}
#buttons a:hover {
text-decoration: underline;
background:url(metamorph_redinfinity-images/fish_b.gif) 0px 23px no-repeat;
}
#content{
width: 975px;
padding: 0px 0px 0px 0px;
background: url(metamorph_redinfinity-images/cont_bg.png);
margin: 0px 0px 0px 12px;
min-height: 600px;
}
#left{
width: 305px;
margin: 84px 0px 0px 0px;
float: left;
}
.left_b { background: url(metamorph_redinfinity-images/fish.gif) 0px 7px no-repeat;
padding-left: 28px;
padding-top: 5px;
width: 263px;}
.text{
padding: 0px 7px 0px 7px;
}
.img { float:left;
margin: 8px 12px 5px 0px;
}
span { color:#5D1310;
font-weight:bold;
}
.dat { text-decoration: none;
color:#831C1C;}
.col_b {color:#831C1C;}
H1{
font-family: Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-weight: 100;
color: #6D1313;
padding-bottom: 5px;
text-align:center;
}
H2{
font-family: Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-weight: 100;
color: #6D1313;
padding-bottom: 3px;
padding-left: 6px;
text-align: left;
background: url(metamorph_redinfinity-images/tit.gif) bottom repeat-x;
}
.read_l{
text-align:right;
padding-right:20px;
padding-top: 5px;
font-weight:bold;
text-decoration:underline;
}
#right{
float:right;
width: 670px;
background: url(metamorph_redinfinity-images/bg_left.jpg) left 25px repeat-x;
margin-right: 0px;
padding: 0px 0px 0px 0px;
}
.right_top { background:url(metamorph_redinfinity-images/right_top.gif) top no-repeat;
height:9px;
width: 670px;
}
.right_bot { background: url(metamorph_redinfinity-images/right_bot.gif) bottom no-repeat;
height:9px;
width: 670px;}
.right_s { background:#DFDEDE;
width: 654px;
padding: 0px 8px 0px 8px;}
.col_l {float:left;
width:310px;
margin-left:7px;
margin-top:5px;
}
.col_r {float: left;
width:320px;
margin-left:15px;
margin-top:5px;
}
#footer{
height: 0px;
width: 698px;
font-size: 12px;
color: #000000;
padding-top: 8px;
text-align: center;
clear:both;
padding: 47px 0px 47px 0px;
background: url(metamorph_redinfinity-images/footer.jpg) center no-repeat;
margin-left: 302px;
}
#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="bg">
<div id="main">
<div id="main_bot">
<!-- header begins -->
<div id="header">
<div id="logo">
<h1>metamorph_redinfinity</h1>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
</div>
<div id="buttons">
<ul>
<li class="first"><a href="#" title="">Home</a></li>
<li><a href="#" title="">Blog</a></li>
<li><a href="#" title="">Gallery</a></li>
<li><a href="#" class="last_b" title="">About us</a></li>
<li ><a href="#" title="" class="last_b">Contact us</a></li>
</ul>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="content">
<div id="left">
<h1>Company News</h1>
<div class="left_b"><span class="dat">05-11-2009</span><br /><span class="col_b">Lorem ipsum dolor sit amet.</span><br />
Consectetur adipiscing elit. Nam elementum justo sit amet urna mollis vel mollis ante viverra. Ut lacinia quam et nunc tempus <br />
pulvinar. Donec posuere laoreet lacus nec ultricies. Vivamus rutrum lacus at nunc viverra suscipit. Cras non arcu erat, at ultrices massa...</div>
<div class="read_l"><a href="#">read more</a></div>
<div class="left_b"><span class="dat">05-11-2009</span><br /><span class="col_b">Lorem ipsum dolor sit amet.</span><br />
Consectetur adipiscing elit. Nam elementum justo sit amet urna mollis vel mollis ante viverra. Ut lacinia quam et nunc tempus <br />
pulvinar. Donec posuere laoreet lacus nec ultricies. Vivamus rutrum lacus at nunc viverra suscipit. Cras non arcu erat, at ultrices massa...</div>
<div class="read_l"><a href="#">read more</a></div>
<div class="left_b"><span class="dat">05-11-2009</span><br /><span class="col_b">Lorem ipsum dolor sit amet.</span><br />
Consectetur adipiscing elit. Nam elementum justo sit amet urna mollis vel mollis ante viverra. Ut lacinia quam et nunc tempus <br />
pulvinar. Donec posuere laoreet lacus nec ultricies. Vivamus rutrum lacus at nunc viverra suscipit. Cras non arcu erat, at ultrices massa...</div>
<div class="read_l"><a href="#">read more</a></div>
</div>
<div id="right">
<div class="right_top"></div>
<div class="right_s">
<h2>Metamorphosis Design</h2>
<div class="text">
<img src="metamorph_redinfinity-images/img1.jpg" width="124" height="93" class="img" alt="" />
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><br />
Proin rhoncus erat in ante adipiscing gravida. Duis nec est nunc. Sed in nisl et tortor feugiat placerat ut in dui. Maecenas et tempus nisl. Quisque at mi ac dolor aliquet iaculis. Morbi ligula enim, tristique a malesuada vitae, viverra eu diam. Donec dictum ultricies mauris, vel vehicula nulla imperdiet eu. Phasellus malesuada turpis rhoncus est condimentum nec auctor risus viverra. Praesent felis urna, tincidunt ut condimentum sed, molestie quis nulla. Nulla ut ante quis purus fermentum porta. Sed auctor iaculis posuere. Pellentesque pulvinar mattis porttitor. <br />
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.<br />
<div class="read_l"><a href="#">read more</a></div>
</div>
<h2>Free Website Templates</h2>
<div class="col_l">
<img src="metamorph_redinfinity-images/img2.jpg" width="124" height="93" class="img" alt="" />
<span>Integer fringilla hendrerit.</span><br />
Tortor at elementum. Curabitur ligula leo, tempor at ultricies ut, euismod ut nibh. Aliquam luctus interdum velit, ac posuere tortor rhoncus et. Suspendisse fauci- bus ipsum augue. Donec vehicula libero eget tellus faucibus mollis. Nullam eget lacus erat, non auctor purus. Fusce facilisis purus nec lacus mattis at ornare lectus pulvinar. Morbi lacus est, egestas vitae viverra eu, pretium a diam. Nulla vitae enim vel libero blandit ornare. Nunc mi magna, convallis eu fermentum ac, elementum at ipsum. Ut tempus mollis tristique. Nam at dolor mi, quis euismod orci. <br />
Ut dapibus lorem in dui accumsan ut iaculis magna adipiscing. Nulla dictum nunc at lectus tincidunt eget egestas nulla pretium. Nunc porta quam id enim mattis euismod in sit amet neque. Mauris laoreet augue ac nisi volutpat ultrices. Nunc mollis, lorem a venenatis... <br />
<div class="read_l"><a href="#">read more</a></div><br />
</div>
<div class="col_r">
<img src="metamorph_redinfinity-images/img3.jpg" width="124" height="93" class="img" alt="" />
<span>Cum sociis natoque.</span><br />
Penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dictum facilisis enim, ac auctor massa mollis a. Donec molestie velit ac elit dignissim mattis. Curabitur et urna id diam aliquam mollis in ac velit. Nam sodales tincidunt turpis sit amet pulvinar. Sed rhoncus libero sed massa dignissim consequat. In hac habitasse platea dictumst. Fusce at ipsum sapien, in consectetur turpis. Mauris imperdiet pellentesque accumsan. Nulla suscipit metus non metus aliquam scelerisque. Proin pellentesque <br />
hendrerit luctus. Duis ut neque purus, eget convallis elit. Sed tempor condimentum mi suscipit rhoncus. Nunc turpis elit, pretium vel ultrices eu, dignissim nec orci. Etiam tincidunt, libero vitae malesuada condimentum, arcu nulla laoreet purus, nec porttitor leo nunc sed ante. Praesent quis pulvinar mi. Aenean vestibulum...<br />
<div class="read_l"><a href="#">read more</a></div><br />
</div>
<div style="clear: both"><img src="metamorph_redinfinity-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
<div class="right_bot"></div>
</div>
<div style="clear: both"><img src="metamorph_redinfinity-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 Web Templates">Free Web 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>
</body>
</html>
Related examples in the same category