metamorph_blackandred
<!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_blackandred-images/bg.jpg) top repeat-x #000000;
}
#main{
width: 1014px;
margin: 0px auto;
padding: 52px 0px 0px 0px;
background: url(metamorph_blackandred-images/top.jpg) top left no-repeat;
}
#header { width:1014px;
padding: 0px 0px 0px 0px;
height: 126px;
background: url(metamorph_blackandred-images/head.jpg) top repeat-x #000000;
}
#buttons{
width: 1000px;
background: url(metamorph_blackandred-images/menu.jpg) left top repeat-x;
text-align:center;
height:43px;
margin-right:0px;
padding-left:3px;
}
#buttons a {
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight:bold;
display: block;
float: left;
width: 150px;
height: 30px;
text-decoration: none;
color: #FFFFFF;
padding-top: 13px;
text-align: center;
margin-right: 0px;
background: url(metamorph_blackandred-images/but.jpg) left top no-repeat;
}
#buttons a:hover {
text-decoration: underline;
background: url(metamorph_blackandred-images/but_ov.gif) left top no-repeat;
color:#6E0004;
}
#logo{
background: url(metamorph_blackandred-images/logo.jpg) center top no-repeat;
height: 53px;
padding: 30px 0px 0px 786px;
}
#logo a {
font-family:Georgia, "Times New Roman", Times, serif;
text-decoration: none;
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
}
#logo H3 a{
font-size: 10px;
background:none;
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic;
}
#bg_top {
background: url(metamorph_blackandred-images/bg_top.jpg) left top no-repeat;
height:304px;
width:317px;
float:left;}
#text_top {
color:#000000;
width:234px;
margin: 11px 0px 0px 19px;}
#cont_out {
background: url(metamorph_blackandred-images/cont_bot.jpg) bottom repeat-x;
width:978px;
padding: 11px;
}
#content{
width: 1014px;
padding: 2px 0px 0px 0px;
background: #FFFFFF;
}
#left{
width: 762px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 4px;
float:left;
background: url(metamorph_blackandred-images/left.jpg) top repeat-x;
min-height: 590px;
}
.left1 {
background:url(metamorph_blackandred-images/left1.jpg) left top no-repeat;
padding: 0px 4px 0px 4px;
}
.left2 {
background:url(metamorph_blackandred-images/left2.jpg) left top no-repeat;
padding: 0px 4px 0px 4px;
}
#right .list
{
list-style: none;
padding-left: 38px;
padding-top: 5px;
padding-bottom: 10px;
margin: 0px;
display:block;
background: url(metamorph_blackandred-images/fish1.gif) 7px 12px no-repeat;
}
.tit_bot { background: url(metamorph_blackandred-images/tit_bot.png) center top no-repeat;
padding: 7px 5px 0px 0px;
}
.text{
padding: 10px 0px 0px 10px;
}
.img { float:left;
margin: 2px 17px 5px 0px;
}
.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: #FFFFFF;
height: 29px;
padding-left: 11px;
padding-top: 8px;
text-align: left;
background: url(metamorph_blackandred-images/tit_r.jpg) center top no-repeat;
}
#left H2{
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:normal;
color: #892825;
padding-bottom: 5px;
padding-left: 7px;
padding-top: 16px;
text-align:left;
background: url(metamorph_blackandred-images/tit_l.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_blackandred-images/right.jpg) top repeat-x;
}
#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_blackandred-images/fish1.gif) 10px 12px no-repeat;
padding-left: 38px;
}
.ban {
width: 242px;
background:url(metamorph_blackandred-images/lb_bg.jpg) left top no-repeat;
height:176px;}
.ban H3 {
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
padding: 9px 0px 9px 0px;}
.text_ban {
color:#FFFFFF;
padding: 0px 15px 0px 19px}
.read_ban {
text-align:right;
margin: 5px 10px 0px 0px;
}
.ban a {
font-weight:bold;
color:#FF6700;
text-decoration:underline;
}
.ban a:hover {
text-decoration:none ;
color:#FF6700;
}
#footer{
height: 54px;
width: 1014px;
font-size: 10px;
color: #FFFFFF;
text-align: center;
clear:both;
padding: 10px 0px 0px 0px;
background: url(metamorph_blackandred-images/footer.jpg) left top repeat-x #000000;
}
#footer a{
color: #FFFFFF;
font-size: 10px;
text-decoration: none;
}
#footer a:hover{
color: #FFFFFF;
font-size: 10px;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="main">
<!-- header begins -->
<div id="header">
<div id="logo"><a href="#">metamorph_blackandred</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 class="left1">
<h2>Metamorphosis Design</h2>
<div class="text"><img src="metamorph_blackandred-images/img1.jpg" width="238" height="160" class="img" alt="" /><span >Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> <br />
Nunc euismod imperdiet tellus a posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin fermentum lorem quis neque euismod tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce a ligula ante. Ut tincidunt ultricies vulputate. Nulla facilisi. Nam ac tempus neque. Donec interdum velit vel eros molestie at imperdiet eros tempus. Proin eget risus metus. Vestibulum pharetra eleifend sapien porta molestie. Quisque aliquam facilisis est sit amet eleifend. Nam hendrerit aliquam neque, quis malesuada elit tempus nec. Vestibulum ultricies leo ut nisl molestie accumsan. Etiam id <br />
adipiscing elit. Nunc euismod imperdiet tellus a posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin fermentum lorem quis neque euismod tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce a ligula ante. Ut tincidunt ultricies vulputate. Nulla facilisi. Nam ac tempus neque.
</div><br /><br />
</div>
<div class="left2">
<h2>Free Website Templates</h2><br />
<div><img src="metamorph_blackandred-images/img2.jpg" height="95" width="142" class="img_t" alt="" /><img src="metamorph_blackandred-images/img3.jpg" height="95" width="142" class="img_t" alt="" /><img src="metamorph_blackandred-images/img4.jpg" height="95" width="142" class="img_t" alt="" /><img src="metamorph_blackandred-images/img5.jpg" height="95" width="142" class="img_t" alt="" /><img src="metamorph_blackandred-images/img6.jpg" height="95" width="142" alt="" /></div>
<div class="read"><a href="#"><img src="metamorph_blackandred-images/b_view.png" alt="" /></a></div><br />
</div>
<div class="text"><span>Pellentesque quis orci odio, sed consectetur sapien. </span> <br />
Mauris vitae odio odio, non convallis ante. Curabitur fermentum hendrerit velit a mollis. Nullam eget mi ut leo tempus tincidunt. Donec non neque ut purus ullamcorper aliquam. Cras adipiscing suscipit nisi quis mollis. Vestibulum in justo libero, ac aliquet erat. Nulla euismod eleifend orci sed malesuada. Nullam fermentum tempor viverra. Praesent adipiscing risus at nisl vulputate fringilla. Vivamus... </div>
<div class="read"><a href="#"><img src="metamorph_blackandred-images/b_read.png" alt="" /></a></div>
</div>
<div id="right">
<h1>Categories</h1>
<div class="tit_bot">
<ul>
<li><a href="">Nullam commodo augue sed nisi. </a></li>
<li><a href="">Ut eu ligula quis dolor suscipit.</a></li>
<li><a href="">Sed faucibus lacus in purus.</a></li>
<li><a href="">Fusce eget nibh eget elit molestie. </a></li>
<li><a href="">Aenean sed nulla arcu, in aliqua.</a></li>
<li><a href="">Fusce in odio eros, vel convallis. </a></li>
<li><a href="">Maecenas sit amet odio metus.</a></li>
</ul>
<br />
</div>
<h1>Company News</h1>
<div class="tit_bot">
<div class="list"><span class="dat">05-01-2010</span><br />
<span>Mauris non blandit ligula.</span><br />
Sed lobortis rhoncus egestas. Fusce eu ante at nulla ultrices...
<div class="read_r"><a href="#"><img src="metamorph_blackandred-images/b_read.png" alt="" /></a></div>
</div>
<div class="list"><span class="dat">05-01-2010</span><br />
<span>Mauris non blandit ligula.</span><br />
Sed lobortis rhoncus egestas. Fusce eu ante at nulla ultrices...
<div class="read_r"><a href="#"><img src="metamorph_blackandred-images/b_read.png" alt="" /></a></div>
</div>
<div class="ban">
<h3>Lorem ipsum dolor</h3>
<div class="text_ban"><b>Sed ac mi dolor.</b> <br />
Mauris purus quam, iaculis et suscipit sed, laoreet at leo. Sed commodo adipiscing nibh, quis tempus turpis luctus id. Vivamus vehicula tristique... </div>
<div class="read_ban"><a class="" href="">read more</a></div>
</div><br />
</div>
<div style="clear: both"><img src="metamorph_blackandred-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="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