metamorph_nightsky
<!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: underline;}
#left a {
color:#092443;
}
#right a{
color: #CACED7;
}
a:hover{
text-decoration: none;
color: #FFFFFF;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
line-height:20px;
background: url(metamorph_nightsky-images/bg.jpg) top repeat-x #050507;
}
#main {
width: 1015px;
margin-left: 9px;
background: url(metamorph_nightsky-images/bg_cont.jpg) 0px 414px repeat-x #6D84AA;
border-left: 5px solid #D5D6D8;
border-right: 5px solid #D5D6D8;
margin: 0px auto;
}
#header {
width:1014px;
padding: 0px 0px 0px 0px;
height: 468px;
background: url(metamorph_nightsky-images/big.jpg) left top no-repeat;
}
#logo { font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:18px;
font-style:italic;
padding: 320px 83px 0px 0px;
float:right;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 16px;
color: #ffffff;
font-weight: bold;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-transform: none;
}
#buttons{
width: 500px;
height: 468px;
background: url(metamorph_nightsky-images/but_bg.jpg) top repeat-x;
text-align:center;
margin-left: 0px;
float:right;
padding-left: 60px;
float:left;
}
#buttons a {
font-family: tahoma, Helvetica, sans-serif;
font-size: 18px;
font-weight: 100;
display: block;
float: left;
height: 34px;
text-decoration: none;
color: #FFFFFF;
padding-top: 17px;
text-align: center;
background:url(metamorph_nightsky-images/fish_b.gif) 0px 23px no-repeat;
text-transform:lowercase;
}
.but_1 {
width: 88px;
margin-top: 190px;
}
.but_2 {
width: 92px;
margin-top: 382px;
}
.but_3 {
width: 95px;
margin-top: 212px;
}
.but_4 {
width: 95px;
margin-top: 314px;
}
.but_5 {
width: 95px;
margin-top: 140px;
}
#buttons a:hover {
text-decoration: underline;
background: url(metamorph_nightsky-images/but_over.jpg) repeat-x;
}
#content{
width: 1005px;
padding: 0px 0px 0px 0px;
background: url(metamorph_nightsky-images/cont_bg.png);
margin: 0px 0px 0px 10px;
}
#right{
width: 279px;
margin: 0px 11px 0px 0px;
float: right;
color:#000000;
}
.right_b { background: url(metamorph_nightsky-images/fish.png) 10px 19px no-repeat;
padding-left: 31px;
padding-top: 15px;
width: 243px;}
.text{
padding: 0px 0px 0px 0px;
}
.img { float:left;
margin: 5px 12px 5px 0px;
}
span { color:#0D2C55;
font-weight:bold;
}
.dat { text-decoration: underline;
color:#C8CFD8;}
.col_b {color:#C8CFD8;}
#right H1{
font-family: Tahoma, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #ffffff;
text-align:center;
background: url(metamorph_nightsky-images/tit.png) left top no-repeat;
height: 33px;
padding-top: 10px;
text-transform:lowercase;
}
#left H2{
font-family: Tahoma, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #08295A;
padding-bottom: 10px;
padding-top: 4px;
text-align: left;
background: url(metamorph_nightsky-images/tit_right.jpg) bottom repeat-x;
width: 100%;
}
.read{
text-align:right;
padding-right:20px;
padding-top: 5px;
font-weight:bold;
text-decoration:none;
}
#left{
float: left;
width: 704px;
background: url(metamorph_nightsky-images/bg_left.jpg) left 25px repeat-x;
margin-right: 0px;
padding: 0px 0px 0px 0px;
}
.tit_bot { background:url(metamorph_nightsky-images/bot_bg.png) left top no-repeat;}
.left_top { background:url(metamorph_nightsky-images/left_top.gif) top no-repeat;
height:8px;
width: 704px;
}
.left_bot { background: url(metamorph_nightsky-images/left_bot.gif) bottom no-repeat;
height:8px;
width: 704px;}
.left_s { background: url(metamorph_nightsky-images/bg_left.png);
width: 680px;
padding: 0px 12px 0px 12px;
min-height: 455px;}
#footer{
height: 42px;
width: 100%;
font-size: 10px;
color: #FFFFFF;
text-align: center;
clear:both;
padding: 14px 0px 0px 0px;
background: url(metamorph_nightsky-images/footer.jpg) bottom repeat-x;
}
#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_nightsky</a><h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2></div>
<div id="buttons">
<div ><a href="#" class="but_1" title="">Home</a></div>
<div ><a href="#" class="but_2" title="">Blog</a></div>
<div><a href="#" class="but_3" title="">Gallery</a></div>
<div><a href="#" class="but_4" title="">About us</a></div>
<div ><a href="#" class="but_5" title="">Contact us</a></div>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="content">
<div id="right">
<h1>Company News</h1>
<div class="tit_bot">
<div class="right_b"><span class="dat">05-01-2010</span><br /><span class="col_b">Morbi sit amet fringilla dolor. </span><br />
Morbi sit amet fringilla dolor. <br />
Phasellus tempor elementum metus vitae imperdiet. Nulla orci neque, convallis sed suscipit nec, iaculis nec odio. Phasellus sagittis sodales semper. Integer aliquam lectus a lectus mollis mollis rhoncus felis vestibulum. Etiam faucibus ipsum ac... </div>
<div class="read"><a href="#">read more</a></div>
<div class="right_b"><span class="dat">05-01-2010</span><br /><span class="col_b">Morbi sit amet fringilla dolor. </span><br />
Morbi sit amet fringilla dolor. <br />
Phasellus tempor elementum metus vitae imperdiet. Nulla orci neque, convallis sed suscipit nec, iaculis nec odio. Phasellus sagittis sodales semper. Integer aliquam lectus a lectus mollis mollis rhoncus felis vestibulum. Etiam faucibus ipsum ac... </div>
<div class="read"><a href="#">read more</a></div>
</div>
</div>
<div id="left">
<div class="left_top"></div>
<div class="left_s">
<h2>Metamorphosis Design</h2>
<div class="col_l">
<img src="metamorph_nightsky-images/img1.jpg" width="124" height="94" class="img" alt="" />
<span>Aenean tincidunt magna tortor.</span><br />
Donec lectus sem, sagittis in volutpat eu, vulputate adipiscing sapien. Praesent et libero turpis. Donec consectetur est dui. Nulla facilisi. Fusce ac arcu porta eros tempor sodales id ut est. Quisque nec eros vel enim laoreet adipiscing sed nec massa. Aliquam metus nisi, mattis non tincidunt et, facilisis vel dolor. Donec venenatis dictum adipiscing. Curabitur accumsan elit vel... <br />
<div class="read"><a href="#">read more</a></div>
</div><br />
<div class="col_l">
<img src="metamorph_nightsky-images/img2.jpg" width="124" height="95" class="img" alt="" />
<span>Sed sit amet augue nisi. </span><br />
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas id mauris eget mauris consectetur hendrerit. Mauris tempus risus nec eros porttitor at gravida magna dignissim. Praesent lobortis sodales dapibus. Sed et lacus fermentum augue imperdiet egestas. Suspendisse faucibus elementum tortor sed malesuada. Nulla laoreet...<br />
<div class="read"><a href="#">read more</a></div>
</div>
<div style="clear: both"><img src="metamorph_nightsky-images/spaser.gif" alt="" width="1" height="1" /></div><br />
<h2>Free Website Templates</h2>
<div class="text">
<span>Fusce ac arcu porta eros tempor sodales id ut est. </span><br />
Quisque nec eros vel enim laoreet adipiscing sed nec massa. Aliquam metus nisi, mattis non tincidunt et, facilisis vel dolor. Donec venenatis dictum adipiscing. Curabitur accumsan elit vel metus rutrum quis euismod leo vehicula. Suspendisse vel ligula ut felis adipiscing molestie. Suspendisse facilisis scelerisque sagittis. Proin nulla nibh, gravida suscipit <br />
<div class="read"><a href="#">read more</a></div>
</div>
</div>
<div class="left_bot"></div>
</div>
<div style="clear: both"><img src="metamorph_nightsky-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
<!-- content ends -->
<!-- footer begins -->
<div id="footer">
Copyright 2009. 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>
</body>
</html>
Related examples in the same category