metamorph_outerspace
<!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:#32A5E7;
}
#right a{
color: #32A5E7;
}
a:hover{
text-decoration: none;
color: #32A5E7;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background: url(metamorph_outerspace-images/bg.gif);
}
#main {
width: 1015px;
margin-left: 9px;
background: url(metamorph_outerspace-images/main.jpg) left top no-repeat;
margin: 0px auto;
}
#header {
width:1015px;
padding: 0px 0px 0px 0px;
height: 358px;
background: url(metamorph_outerspace-images/big.jpg) left top no-repeat;
}
#logo { font-family: Georgia, "Times New Roman", Times, serif;
color:#FFFFFF;
font-size:18px;
font-style:italic;
padding: 88px 75px 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: Georgia, "Times New Roman", Times, serif;
text-transform: none;
}
#buttons{
width: 237px;
background: url(metamorph_outerspace-images/but_bg.jpg) top repeat-x;
text-align:center;
margin-left: 0px;
float:right;
padding-left:41px;
padding-top: 28px;
float:left;
}
#buttons a {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: 100;
display: block;
float: left;
height: 40px;
text-decoration: none;
color: #FFFFFF;
padding-top: 20px;
text-align: left;
}
.but_1 {
width: 196px;
margin-left: 35px;
padding-left: 55px;
background: url(metamorph_outerspace-images/but_fish.png) top left no-repeat ;
}
.but_2 {
width: 196px;
padding-left: 57px;
background: url(metamorph_outerspace-images/but_fish.png) top left no-repeat ;
}
#buttons a:hover {
text-decoration: underline;
}
#content{
width: 972px;
padding: 0px 0px 0px 0px;
background: #FFFFFF;
margin: 0px 0px 0px 19px;
}
#right{
width: 275px;
margin: 0px 6px 0px 0px;
float: right;
color:#000000;
}
.right_b { background: url(metamorph_outerspace-images/fish.gif) 0px 4px no-repeat;
padding-left: 36px;
padding-top: 15px;
width: 226px;}
.text{
padding: 0px 0px 0px 11px;
}
.img { float:left;
margin: 5px 16px 5px 0px;
}
#right span { color:#001B50;
font-weight:bold;
}
#left span { color:#32A5E7;
font-weight:bold;
}
.dat { text-decoration: underline;
color:#001B50;
line-height:25px;}
.col_b {color:#C8CFD8;}
#right H1{
font-family: Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-weight: 100;
color: #ffffff;
text-align:center;
background: url(metamorph_outerspace-images/tit_right.gif) left top no-repeat;
height: 32px;
padding-top: 12px;
}
#left H2{
font-family: Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-weight: 100;
color: #FFFFFF;
width: 668px;
padding-top: 12px;
padding-left: 14px;
text-align: left;
background: url(metamorph_outerspace-images/tit_left.gif) left top no-repeat;
width: 100%;
height: 42px;
}
.read{
text-align:right;
padding-right:10px;
padding-top: 5px;
font-weight:bold;
text-decoration:none;
}
#left{
float: left;
width: 682px;
background: url(metamorph_outerspace-images/bg_left.jpg) left 25px repeat-x;
margin-left: 5px;
padding: 0px 0px 0px 0px;
}
.left_l { width:320px;
float: left;
padding-left: 10px;}
.left_r { width:333px;
float: right;
padding-left: 0px;}
.tit_bot { background:url(metamorph_outerspace-images/bot_bg.png) left top no-repeat;}
.top { background: url(metamorph_outerspace-images/top_cont.gif) top no-repeat;
height:10px;
width: 972px;
margin: 0px 0px 0px 19px;
}
.bot { background: url(metamorph_outerspace-images/bot_cont.png) bottom no-repeat;
height:10px;
width: 972px;
margin: 0px 0px 0px 19px;
}
#footer{
height: 48px;
width: 100%;
font-size: 12px;
color: #FFFFFF;
text-align: center;
clear:both;
padding: 17px 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="main">
<!-- header begins -->
<div id="header">
<div id="logo"><a href="#">metamorph_outerspace</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_1" title="">Gallery</a></div>
<div><a href="#" class="but_2" title="">About us</a></div>
<div><a href="#" class="but_1" title="">Contact us</a></div>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div class="top"></div>
<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">Cras tincidunt convallis auctor. </span><br />
Donec orci quam, lobortis vitae luctus in, accumsan at risus. Nunc auctor com- modo bibendum. Praesent porta inter- dum quam, ac fringilla odio aliquam... </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">Cras tincidunt convallis auctor. </span><br />
Donec orci quam, lobortis vitae luctus in, accumsan at risus. Nunc auctor com- modo bibendum. Praesent porta inter- dum quam, ac fringilla odio aliquam... </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">Cras tincidunt convallis auctor. </span><br />
Donec orci quam, lobortis vitae luctus in, accumsan at risus. Nunc auctor com- modo bibendum. Praesent porta inter- dum quam, ac fringilla odio aliquam... </div>
<div class="read"><a href="#">read more</a></div>
</div><br />
</div>
<div id="left">
<h2>Metamorphosis Design</h2>
<div class="text">
<img src="metamorph_outerspace-images/img1.jpg" width="202" height="141" class="img" alt="" />
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><br />
Nullam tempus elit nec eros vulputate consectetur sagittis orci commodo. Integer placerat molestie mi, non lacinia lectus fermentum sit amet. Suspendisse tortor mi, vulputate eu ultricies eu, condimentum id odio. Etiam luctus mauris sagittis enim tempus placerat. Vestibulum at purus nec tellus vehicula luctus at nec felis. In dolor magna, pellentesque in porttitor et, vestibulum sed mi. Pellentesque vel lorem libero, eu rhoncus massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Pellentesque convallis viverra ipsum in pharetra. Morbi dapibus tellus et nisi placerat vestibulum. Maecenas rhoncus feugiat odio, et sollicitudin eros condimentum vitae. Aliquam a dapibus tellus. Cum sociis natoque penatibus et... <br />
<div class="read"><a href="#">read more</a></div>
</div><br />
<div style="clear: both"><img src="metamorph_outerspace-images/spaser.gif" alt="" width="1" height="1" /></div>
<h2>Free Website Templates</h2>
<div class="left_l"><img src="metamorph_outerspace-images/img2.jpg" width="122" height="92" class="img" alt="" />
<span>Curabitur ac varius sapien. </span><br />
Suspendisse faucibus erat vel tortor tincidunt blandit. Etiam ipsum nisi, interdum a suscipit vel, volutpat at ligula. Integer est arcu, sollicitudin vel egestas nec, blandit et velit. Aliquam cursus... <br />
<div class="read"><a href="#">read more</a></div></div>
<div class="left_r"><img src="metamorph_outerspace-images/img3.jpg" width="122" height="92" class="img" alt="" />
<span>Ut nec augue velit.</span><br />
Etiam lacinia pharetra lectus at porta. Fusce sed elit leo. In rutrum, leo a pulvinar elementum, velit ipsum facilisis sem, eu bibendum odio nisl vitae justo. Cras pharetra, felis vestibulum laoreet dignissim...<br />
<div class="read"><a href="#">read more</a></div></div>
</div><br />
<div style="clear: both"><img src="metamorph_outerspace-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
<div class="bot"></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