metamorph_lighting
<!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;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background: url(metamorph_lighting-images/bg1.jpg) top repeat-x #ffffff;
line-height: 18px;
}
#bg2 {
width: 100%;
height: 100%;
background:url(metamorph_lighting-images/bg2.jpg) bottom repeat-x;}
#bg3 {
background: url(metamorph_lighting-images/bg3.jpg) center top no-repeat;
width: 1014px;
margin: 0px auto;
padding-top: 41px;
}
#header {
width:100%;
background: url(metamorph_lighting-images/header.jpg) left top no-repeat;
height: 330px;
}
#logo { font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:18px;
font-style:italic;
padding: 117px 0px 0px 784px;
background: url(metamorph_lighting-images/big_img.jpg) left top no-repeat;
height: 60px;
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_lighting-images/bg_but.jpg) left top no-repeat;
text-align:center;
height: 116px;
margin-left: 444px;
padding-top: 4px;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
display: block;
float: left;
height: 66px;
text-decoration: none;
color: #FFFFFF;
padding-top: 50px;
padding-left: 0px;
text-align: center;
}
.but {
width: 110px;
}
.but:hover { background: url(metamorph_lighting-images/but_hover.png) center center no-repeat;
text-decoration: none;}
#main {
background:url(metamorph_lighting-images/main.gif) left repeat-y;
width: 1014px;}
#main_top {
width: 1014px;
background: url(metamorph_lighting-images/main_top.gif) left top no-repeat ;
padding-bottom: 20px;
}
#main_bot {
width: 1014px;
background: url(metamorph_lighting-images/main_bot.gif) left bottom no-repeat ;
}
#content{
width: 1014px;
padding: 0px 0px 0px 0px;
background: url(metamorph_lighting-images/cont.gif) right repeat-y #FFFFFF;
margin: 0px 0px 0px 0px;
}
#left{
width: 244px;
margin: 0px 0px 0px 10px;
float: left;
color:#000000;
}
.left_b {
padding-right: 5px;
padding-top: 3px;
padding-left: 30px;
font-size: 11px;
background:url(metamorph_lighting-images/fish_left.png) 8px 12px no-repeat;
height: 117px;
}
.box1 { background: url(metamorph_lighting-images/box1.gif) 0px 0px no-repeat;}
.box2 { background: url(metamorph_lighting-images/box2.gif) 0px 0px no-repeat;}
.box3 { background: url(metamorph_lighting-images/box3.gif) 0px 0px no-repeat;}
.box4 { background: url(metamorph_lighting-images/box4.gif) 0px 0px no-repeat;}
.text{
padding: 6px 4px 0px 7px;
}
.img { float:left;
margin: 4px 15px 3px 0px;
}
.img_r { float: right;
margin: 4px 0px 3px 16px;
}
#left span { color:#014377;
text-decoration: underline;
font-size:12px;
}
#center span { color:#014377;
text-decoration: underline;
font-size:12px;
}
.w {color:#ffffff;
line-height: 25px;}
.g {color:#328816;}
#left H1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #FFFFFF;
text-align:left;
padding: 17px 0px 6px 5px;
}
#right H1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #ffffff;
text-align:left;
padding: 14px 0px 0px 136px;
height:30px;
}
.tit_right1 { background:url(metamorph_lighting-images/tit_right1.gif) left 10px no-repeat;}
.tit_right2 { background:url(metamorph_lighting-images/tit_right2.gif) left 10px no-repeat #DCEEFC; }
.read{
text-align:right;
padding-right:5px;
padding-top: 3px;
font-weight:bold;
font-size:12px;
}
.read a{
color: #014377;
text-decoration: underline;}
.read a:hover {
text-decoration:none;}
#right{
float: right;
width: 245px;
margin-right: 10px;
padding: 0px 0px 0px 0px;
}
.right_b { background: #DCEEFC;}
.right_w { background: #ffffff;}
.munth {
font-weight:bold;
background: url(metamorph_lighting-images/fish_left.png) 14px 11px no-repeat;
padding: 5px 0px 5px 50px;
text-decoration:none;}
.munth a{color:#014377;
text-decoration: underline;
font-weight:100;
font-size: 11px;}
.munth a:hover {
text-decoration: none;
}
#center {
width: 485px;
float:left;
margin-left: 10px;}
#center H1 {
background:url(metamorph_lighting-images/tit_c.gif) bottom repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #014377;
text-align:left;
padding: 17px 0px 6px 7px;}
#all_col {
width: 100%;}
.col_left {
float: left;
width:228px;
margin-left: 7px}
.col_right {
float: right;
width: 235px;}
.left_a{
text-decoration: underline;
color: #1A8421;}
.left_a:hover { text-decoration: none;}
.right_a{
text-decoration: underline;
color: #1FB59C;}
.right_a:hover { text-decoration: none;}
#footer{
height: 50px;
width: 100%;
font-size: 12px;
color: #ffffff;
text-align: center;
clear:both;
padding: 13px 0px 0px 0px;
background: url(metamorph_lighting-images/footer.jpg) 0px 0px 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="bg2">
<div id="bg3">
<!-- header begins -->
<div id="header">
<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 id="logo"><a href="#">metamorph_lighting</a>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="content">
<div id="main">
<div id="main_bot">
<div id="main_top">
<div id="right">
<h1 class="tit_right1">Categories</h1>
<div class="right_b">
<div class="munth"><a href="#" >Lorem ipsum</a></div>
<div class="munth"><a href="#" >Cras ullamcorper</a></div>
<div class="munth"><a href="#" >Praesent</a></div>
<div class="munth"><a href="#" >Quisque</a></div>
<div class="munth"><a href="#" >Sed venenatis enim</a></div>
<div class="munth"><a href="#" >Nam dignissim</a></div>
<div class="munth"><a href="#" >Vivamus</a></div>
</div>
<h1 class="tit_right2">Archives</h1>
<div class="right_w fish_10">
<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 class="munth"><a href="#" >July 2010</a></div>
<div class="munth"><a href="#" >August 2010</a></div>
<div class="munth"><a href="#" >September 2010</a></div>
</div>
</div>
<div id="left">
<h1>Company News</h1>
<div class="box1">
<div class="left_b"><span class="w">Friday, Apr.10, 2010</span><br />
Vivamus eget sapien elit. Nullam neque nisi, tempor ac bibendum nec, pulvinar non erat. Ut ut nisi a ante sagittis aliquam. Etiam dui...
<div class="read"><a href="#"> read more</a></div>
</div>
</div>
<div class="box2">
<div class="left_b"><span class="w">Saturday, Apr. 11, 2010</span><br />
Vivamus eget sapien elit. Nullam neque nisi, tempor ac bibendum nec, pulvinar non erat. Ut ut nisi a ante sagittis aliquam. Etiam dui...
<div class="read"><a href="#"> read more</a></div>
</div>
</div>
<div class="box3">
<div class="left_b"><span class="w">Sunday, Apr. 12, 2010</span><br />
Vivamus eget sapien elit. Nullam neque nisi, tempor ac bibendum nec, pulvinar non erat. Ut ut nisi a ante sagittis aliquam. Etiam dui...
<div class="read"><a href="#"> read more</a></div>
</div>
</div>
<div class="box4">
<div class="left_b"><span class="w">Monday, Apr. 13, 2010</span><br />
Vivamus eget sapien elit. Nullam neque nisi, tempor ac bibendum nec, pulvinar non erat. Ut ut nisi a ante sagittis aliquam. Etiam dui...
<div class="read"><a href="#"> read more</a></div>
</div>
</div>
</div>
<div id="center">
<h1>Metamorphosis Design</h1>
<div class="text">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sollicitudin facilisis quam, eget mattis nulla adipiscing vel. </span>
</div>
<div class="text">
<img src="metamorph_lighting-images/img1.jpg" class="img" width="120" height="90" alt="" />
Nullam magna purus, pharetra at tempor in, tristique at neque. Aenean pretium arcu sit amet nulla ultricies convallis consequat lectus tincidunt. Maecenas nibh risus, placerat eu luctus ac, bibendum id lacus. In posuere, urna at interdum varius, tortor dui interdum arcu, in ullamcorper mi felis sit... <br />
<div class="read"><a href="#"> read more</a></div><br />
</div>
<h1>Metamorphosis Design</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/shop/flash_templates.php">Flash Templates</a></li>
<li><a href="http://www.metamorphozis.com/website_hosting/index.php">Top Hosting Providers</a></li>
<li><a href="http://www.metamorphozis.com/contact/contact.php">Support For Free Website Templates</a></li>
</ol>
<br /><br />
</div>
<div id="all_col">
<div class="col_left"><a class="left_a" href="#">Nam vel tortor magna. Nunc molestie velit mauris. Etiam tincidunt dignissim ante non sodales. Pellentesque pulvinar dapibus ligula at molestie. </a><br />
<div class="read"><a href="#"> read more</a></div>
</div>
<div class="col_right"><a class="right_a" href="#">Nunc molestie velit mauris. Etiam tincidunt dignissim ante non sodales. Pellentesque pulvinar dapibus ligula at molestie.</a> <br />
<div class="read"><a href="#"> read more</a></div>
</div>
</div>
</div>
<div style="clear: both"><img src="metamorph_lighting-images/spaser.gif" alt="" width="1" height="1" /></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="Free Website Templates">Free Website Templates</a> for <a href="http://www.flashtemplatesdesign.com/" title="Flash Templates">Flash Templates</a>
</p>
</div>
<!-- footer ends -->
</div>
</div>
</body>
</html>
Related examples in the same category