metamorph_darkmare
<!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
{
padding:0px;
margin: 0px;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background: url(metamorph_darkmare-images/bg1.jpg) top repeat-x #ffffff;
line-height: 18px;
}
#bg {
width: 100%;
background: url(metamorph_darkmare-images/bg_img.jpg) top center no-repeat #000000; }
#bg_but {
width: 100%;
background: url(metamorph_darkmare-images/bg_but.gif) 0px 133px repeat-x;}
#bg_foot {
width: 100%;
background: url(metamorph_darkmare-images/bg_foot.gif) bottom repeat-x;}
#bg_2 {
background: url(metamorph_darkmare-images/bg3.jpg) center top no-repeat;
width: 1014px;
margin: 0px auto;
padding-top: 41px;
}
#main { width: 1014px;
margin: 0px auto;}
#header {
width:100%;
background: url(metamorph_darkmare-images/header.jpg) left top no-repeat;
height: 181px;
}
#logo { font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:18px;
font-style:italic;
padding: 48px 0px 0px 15px;
height: 86px;
width: 285px;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 16px;
color: #FFFFFF;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-transform: none;
font-weight:100;
}
#buttons{
background: url(metamorph_darkmare-images/bg_but.jpg) left top no-repeat;
text-align:center;
height: 36px;
margin-left: 0px;
padding-top: 0px;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
display: block;
float: left;
height: 27px;
text-decoration: none;
color: #FFFFFF;
padding-top: 9px;
padding-left: 0px;
text-align: center;
}
.but {
width: 200px;
}
.but:hover { background: url(metamorph_darkmare-images/but_hover.gif) left top repeat-x ;
text-decoration: none;}
#main {
background:url(metamorph_darkmare-images/main.gif) left repeat-y;
width: 1014px;}
#content{
width: 1014px;
}
#left{
width: 261px;
float: left;
color:#000000;
background: #FFFFFF;
}
.left_b {
padding-right: 25px;
padding-top: 3px;
padding-left: 48px;
padding-bottom: 10px;
background:url(metamorph_darkmare-images/fish_left.png) 8px 12px no-repeat;
height: 117px;
}
.box10 {
background: url(metamorph_darkmare-images/img_10.gif) 5px 10px no-repeat;
height:auto;
}
.box11 { background: url(metamorph_darkmare-images/img_11.gif) 5px 10px no-repeat;
}
.text{
padding: 6px 20px 0px 9px;
}
.img { float:left;
margin: 4px 15px 3px 0px;
}
#left span { color:#770101;
font-size:12px;
}
.font_it {
font-style:italic;
color: #FCD8D8;
}
.w {
line-height: 25px;
font-weight:bold;}
H1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #FFFFFF;
text-align: center;
padding: 8px 0px 12px 5px;
background: url(metamorph_darkmare-images/tit_l.jpg) top repeat-x #FFFFFF;
}
#right H1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #ffffff;
text-align: center;
height:30px;
}
.read{
text-align:right;
margin:0px;
padding: 7px 2px 0px 2px;
background:url(metamorph_darkmare-images/bg_read.gif) 0px 11px no-repeat;
}
.read a {
font-size:11px;
color:#FFFFFF;
height:13px;
text-decoration:none;
}
.read_c{
text-align:right;
margin:0px;
padding: 0px 0px 0px 2px;
}
.read_cb{
text-align:right;
margin:0px;
background: url(metamorph_darkmare-images/read1.gif) right bottom no-repeat #E2E2E2;
line-height: 11px;
}
.read_cb a {
font-size:11px;
color:#FFFFFF;
text-decoration:none;
padding: 0px 2px 0px 2px;
}
#right{
float: right;
width: 261px;
}
.right_w { background: #ffffff;
padding: 0px 0px 20px 0px;}
.munth {
font-weight:bold;
background: url(metamorph_darkmare-images/fish_munth.gif) 17px 12px no-repeat;
padding: 5px 0px 5px 37px;
text-decoration:none;}
.munth a{color:#000000;
text-decoration: none;
font-weight:100;
font-size: 12px;}
.munth a:hover {
text-decoration: underline;
}
#center {
width: 472px;
float:left;
margin-left: 10px;
color:#FFFFFF;}
.text a
{
color: #ffffff
}
.cent_box {
background: #E2E2E2;
float:left;
width: 148px;
}
.cent_box_text {
padding: 11px 5px 0px 10px;
color: #000000;
font-style:italic;
}
.float_left {
float:left;}
#center H1 {
background: url(metamorph_darkmare-images/tit_r.gif) left top no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #FFFFFF;
text-align:left;
padding: 9px 0px 15px 9px;}
#all_col {
width: 100%;}
#footer{
height: 62px;
width: 100%;
font-size: 12px;
color: #ffffff;
text-align: center;
clear:both;
padding: 28px 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">
<div id="bg_but">
<div id="bg_foot">
<div id="main">
<!-- header begins -->
<div id="header">
<div id="logo"><a href="#">metamorph_darkmare</a>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
</div>
<div id="buttons">
<a href="#" class="but" title="">Home</a>
<a href="#" class="but" title="">Blog</a>
<a href="#" class="but" title="">Gallery</a>
<a href="#" class="but" title="">About us</a>
<a href="#" class="but" title="">Contact us</a>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="content">
<div id="right">
<h1>Categories</h1>
<div class="right_w">
<div class="munth"><a href="#" >Fusce id turpis non ante porttitor</a></div>
<div class="munth"><a href="#" >In a nibh est, in rutrum elit.</a></div>
<div class="munth"><a href="#" >In id sapien augue, id ornare leo.</a></div>
<div class="munth"><a href="#" >Nunc quis nibh sed nisi blandit.</a></div>
<div class="munth"><a href="#" >Etiam nec tortor erat, eu tincidnt</a></div>
<div class="munth"><a href="#" >Etiam bibendum velit sed mi </a></div>
<div class="munth"><a href="#" >Nunc ac ante bibendum erat </a></div>
</div><img height="10" src="metamorph_darkmare-images/spaser.gif" alt="" />
<h1>Archives</h1>
<div class="right_w">
<div class="munth"><a href="#" >January 2010</a></div>
<div class="munth"><a href="#" >February 2010</a></div>
<div class="munth"><a href="#" >March 2010</a></div>
<div class="munth"><a href="#" >April 2010</a></div>
<div class="munth"><a href="#" >May 2010</a></div>
<div class="munth"><a href="#" >June 2010</a></div>
</div>
</div>
<div id="left">
<h1>Company News</h1>
<div class="box10">
<div class="left_b"><span class="w">Friday, Apr.10, 2010<br />
Lorem ipsum dolor sit amet. </span>
Consectetur adipiscing elit. Ut consectetur tempor augue sit amet suscipit. Vivamus dictum, enim eu semper viverra, est<br />
</div>
<div class="read"><a href="#">read more</a></div>
</div><br />
<div class="box11">
<div class="left_b"><span class="w">Saturday, Apr. 11, 2010<br />
Lorem ipsum dolor sit amet.</span>
Consectetur adipiscing elit. Ut consectetur tempor augue sit amet suscipit. Vivamus dictum, enim eu semper viverra, est
</div>
<div class="read"><a href="#">read more</a></div>
</div>
</div>
<div id="center">
<h1>Metamorphosis Design</h1>
<div class="text">
<img src="metamorph_darkmare-images/img1.jpg" class="img" width="150" height="112" alt="" />
<span class="font_it">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet ligula vel leo venenatis posuere. </span><br /><br />
Proin dictum adipiscing ultricies. Cras sollicitudin bibendum tristique. Suspendisse vitae augue a erat convallis molestie sed ut tellus. Sed et ante
<br />nisl magna, bibendum eget vehicula ut, iaculis eu est. Nulla facilisi. Cras pulvinar ante viverra diam aliquet sed feugiat dolor tincidunt. Vestibulum consectetur, neque non volutpat egestas, urna purus dapibus neque, eu ullamcorper urna quam at elit. Duis fermentum imperdiet lacus et feugiat. Aenean placerat vehicula <br /><br />
<div class="read_c"><a href="#"><img src="metamorph_darkmare-images/read2.gif" alt="" /></a></div><br />
</div>
<h1>Free Website Templates</h1>
<div class="text">
<ol>
<li><a href="http://www.metamorphozis.com/free_templates/free_templates.php">Free Website Templates</a></li>
<li><a href="http://www.metamorphozis.com/free_flash_templates/free_flash_templates.php">Free Flash Templates</a></li>
<li><a href="http://www.metamorphozis.com/shop/flash_templates.php">Flash Templates</a></li>
<li><a href="http://www.metamorphozis.com/shop/easy_flash_templates.php">Easy Flash Templates</a> (no flash experience needed to edit)</li>
<li><a href="http://www.metamorphozis.com/website_hosting/index.php">Top Hosting Providers</a></li>
</ol>
<br />
<div class="read_c"><a href="#"><img src="metamorph_darkmare-images/read2.gif" alt="" /></a></div><br />
</div>
<h1>Free Website Templates</h1>
<div class="text">
<img src="metamorph_darkmare-images/img2.jpg" class="img" width="120" height="90" alt="" />
<span class="font_it">Phasellus vestibulum lacus ipsum.</span><br />
<br />
Fusce imperdiet, elit vel posuere posuere, dolor libero ornare eros, ullamcorper luctus est nisi eu enim. Sed varius neque vitae lectus tempus malesuada. Praesent <br />
<br />
<div class="read_c"><a href="#"><img src="metamorph_darkmare-images/read2.gif" alt="" /></a></div><br />
</div>
<div class="text">
<img src="metamorph_darkmare-images/img3.jpg" class="img" width="120" height="90" alt="" />
<span class="font_it">Donec malesuada ultrices purus vel rhoncus. </span><br />
<br />
Sed sapien sapien, bibendum ac congue eu, fermen- tum ac dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin auctor, lacus id porta ultricies,<br />
<br />
<div class="read_c"><a href="#"><img src="metamorph_darkmare-images/read2.gif" alt="" /></a></div><br />
</div>
<div id="all_col">
<div class="float_left"><img width="5" src="metamorph_darkmare-images/spaser.gif" alt="" /></div>
<div class="cent_box">
<div class="cent_box_text">
Phasellus vestibulum lacus ipsum. Fusce imperdiet, elit vel posu- ere posuere, dolor libero ornare eros.<br /><br />
</div>
<div class="read_cb"><a href="#">read more</a></div>
</div>
<div class="float_left"><img width="10" src="metamorph_darkmare-images/spaser.gif" alt="" /></div>
<div class="cent_box">
<div class="cent_box_text">
Sed varius neque vitae lectus tempus male- suada. Praesent mi justo, vulputate a condi- mentum vel, vestibulum <br /><br /></div>
<div class="read_cb"><a href="#">read more</a></div>
</div>
<div class="float_left"><img width="10" src="metamorph_darkmare-images/spaser.gif" alt="" /></div>
<div class="cent_box">
<div class="cent_box_text">
Cras sollicitudin biben- dum tristique. Suspendi- sse vitae augue a erat convallis molestie sed ut tellus. Sed et ante <br /><br /></div>
<div class="read_cb "><a href="#">read more</a></div>
</div>
</div>
</div>
</div>
<!-- content ends -->
<!-- footer begins -->
<div id="footer">
<p>Copyright 2010. <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></p>
<p>Design by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates</a> for <a href="http://www.flashtemplatesdesign.com/" title="Free Flash Templates">Free Flash Templates</a></p></div>
<!-- footer ends -->
</div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category