metamorph_dreamclouds
<!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{
color: #711419;
text-decoration:none;
}
a:hover{
text-decoration: underline;
color: #000000;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background: #000000;
line-height:20px;
}
#main{
width: 1000px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
background:#000000;
background: url(metamorph_dreamclouds-images/top.jpg) top left no-repeat;
border-left: 1px solid #C0D3DA;
border-right: 1px solid #C0D3DA;
}
#header { width:1002px;
padding: 0px 0px 0px 0px;
height: 368px;
}
#buttons{
width: 1000px;
background: url(metamorph_dreamclouds-images/menu.jpg) left top repeat-x;
text-align:center;
height:145px;
margin-right:3px;
}
#buttons .but1 {
float:left;
background: url(metamorph_dreamclouds-images/but.jpg) center no-repeat;
height:82px;
margin-top: 15px;
margin-right:3px;
}
#buttons .but2 {
float:left;
background: url(metamorph_dreamclouds-images/but.jpg) center no-repeat;
height:82px;
margin-top: 30px;
margin-right:3px;
}
#buttons .but3 {
float:left;
background: url(metamorph_dreamclouds-images/but.jpg) center no-repeat;
height:82px;
margin-top: 45px;
margin-right:3px;
}
#buttons .but4 {
float:left;
background: url(metamorph_dreamclouds-images/but.jpg) center no-repeat;
height:82px;
margin-top: 0px;
margin-right:3px;
}
#buttons .but5 {
float:left;
background: url(metamorph_dreamclouds-images/but.jpg) center no-repeat;
height:82px;
margin-top: 34px;
margin-right:3px;
}
#buttons a {
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight:bold;
display: block;
float: left;
width: 147px;
height: 49px;
text-decoration: none;
color: #07233E;
padding-top: 33px;
text-align: center;
margin-right: 0px;
}
#buttons a:hover {
text-decoration: underline;
}
#logo{
background: url(metamorph_dreamclouds-images/logo.jpg) center top no-repeat;
height: 284px;
padding: 25px 0px 0px 796px;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 16px;
color: #FFFFFF;
font-weight: bold;
}
#logo H3 a{
font-size: 10px;
background:none;
}
#bg_top {
background: url(metamorph_dreamclouds-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_dreamclouds-images/cont_bot.jpg) bottom repeat-x;
width:978px;
padding: 11px;
}
#content{
width: 965px;
padding: 7px 6px 7px 6px;
background: #FFFFFF;
}
#left{
width: 247px;
padding: 4px;
margin: 0px;
float:left;
background: url(metamorph_dreamclouds-images/left.jpg) top repeat-x;
min-height: 590px;
}
#left .list
{
list-style: none;
padding-left: 37px;
padding-top: 5px;
margin: 0px;
display:block;
background: url(metamorph_dreamclouds-images/fish_left.png) 9px 6px no-repeat;
}
.tit_bot { background: url(metamorph_dreamclouds-images/tit_bot.png) center top no-repeat;
padding: 16px 5px 0px 0px;
}
#center{float:left;
padding: 13px 0px 0px 0px;
width:443px;
background: url(metamorph_dreamclouds-images/tit.png) left 28px repeat-x;
margin: 0px 0px 0px 6px;
}
.text{
padding: 10px 0px 0px 0px;
}
.img { float:left;
margin: 2px 17px 5px 0px;
}
span { color:#1C4461;
font-weight:bold;
}
.color { color:#3774A0;}
.dat { text-decoration:underline;}
H1{
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:normal;
color: #FFFFFF;
height: 34px;
padding-left: 0px;
padding-top: 14px;
text-align:center;
background:url(metamorph_dreamclouds-images/tit.jpg) center top no-repeat;
}
H2{
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:normal;
color: #1C4461;
padding-bottom: 10px;
padding-left: 4px;
padding-top: 5px;
text-align:left;
background:url(metamorph_dreamclouds-images/tit_cent.gif) bottom repeat-x;
}
.read{
text-align:right;
padding-right:5px;
padding-top: 4px;
}
.read_top{
text-align:right;
padding-right:30px;
padding-top: 10px;
}
.right{
float:right;
width: 247px;
padding: 4px;
margin: 0px;
background: url(metamorph_dreamclouds-images/right.jpg) top repeat-x;
min-height: 260px;
}
.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_dreamclouds-images/fish_right.png) 10px 13px no-repeat;
padding-left: 38px;
}
#footer{
height: 45px;
width: 1000px;
font-size: 10px;
color: #FFFFFF;
padding-top: 8px;
text-align: center;
clear:both;
padding: 10px 0px 10px 0px;
background: url(metamorph_dreamclouds-images/footer.jpg) left top 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="buttons">
<div class="but1"><a href="#" class="razd_but" title="">Home</a></div>
<div class="but2"><a href="#" class="razd_but" title="">Blog</a></div>
<div class="but3"><a href="#" class="razd_but" title="">Gallery</a></div>
<div class="but4"><a href="#" class="razd_but" title="">About Us</a></div>
<div class="but5"><a href="#" title="">Contact Us</a></div>
</div>
<div id="logo"><a href="#">metamorph_dreamclouds</a>
<h3><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h3>
</div>
</div>
<!-- header ends -->
<div id="cont_out">
<!-- content begins -->
<div id="content">
<div id="left">
<h1>Company News</h1>
<div class="tit_bot">
<div class="list"><span class="dat">05-11-2009 </span><br /><span>Lorem ipsum dolor sit amet.</span><br />
Consectetur adipiscing elit. Phasellus at pretium metus. Suspendisse cursus urna eu diam malesuada in blandit enim dignissim. Curabitur ut quam nisi, sed ultrices mauris. Phasellus placerat velit vel dolor placerat gravida. Aliquam eu enim sagittis lorem pretium varius. Vestibulum velit eros, mattis
<div class="read"><a href="#"><img src="metamorph_dreamclouds-images/but_read.gif" alt="" /></a></div>
</div>
<div class="list"><span class="dat">05-11-2009 </span><br /><span>Lorem ipsum dolor sit amet.</span><br />
Consectetur adipiscing elit. Phasellus at pretium metus. Suspendisse cursus urna eu diam malesuada in blandit enim dignissim. Curabitur ut quam nisi, sed ultrices mauris. Phasellus placerat velit vel dolor placerat gravida. Aliquam eu enim sagittis lorem pretium varius. Vestibulum velit eros, mattis...
<div class="read"><a href="#"><img src="metamorph_dreamclouds-images/but_read.gif" alt="" /></a></div>
</div>
</div>
</div>
<div id="center">
<h2>Metamorphosis Design</h2>
<div class="text"><img src="metamorph_dreamclouds-images/img1.jpg" width="129" height="81" class="img" alt="" /><span class="color">Curabitur quis sapien viverra risus blandit convallis. </span> <br />
Aliquam eu velit eget arcu ullamcorper pretium. Pha- sellus a dui quis felis porttitor iaculis. Proin commodo sollicitudin ornare. Cras elementum dolor ut mauris...</div>
<div class="read"><a href="#"><img src="metamorph_dreamclouds-images/but_read.gif" alt="" /></a></div>
<div class="text">
<img src="metamorph_dreamclouds-images/img2.jpg" width="129" height="81" class="img" alt="" />
<span class="color">Etiam laoreet facilisis molestie. </span> <br />
Pellentesque laoreet orci at nunc pharetra tempus. Curabitur cursus metus condimentum elit vehicula vel suscipit arcu varius. Ut tincidunt quam lorem... </div>
<div class="read"><a href="#"><img src="metamorph_dreamclouds-images/but_read.gif" alt="" /></a></div><br />
<h2>Metamorphosis Design</h2>
<div class="text"><span class="color">Etiam laoreet facilisis molestie. </span> <br />
Pellentesque laoreet orci at nunc pharetra tempus. Curabitur cursus metus condimentum elit vehicula vel suscipit arcu varius. Ut tincidunt quam lorem. Nunc sapien mauris, ultricies et interdum at, pulvinar quis augue. Ut at dictum augue. In eget urna nec nisi pharetra pharetra. Morbi malesuada justo nunc, nec luctus tellus. Mauris hendrerit urna eget lacus aliquam euismod. Sed dictum velit in tortor bibendum viverra. Duis egestas ultricies tempus. Suspendisse auctor condimentum cursus. Integer ligula quam, egestas eget sollicitudin eget, ultricies eget dui. Pellentesque non velit a quam interdum gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque... </div>
<div class="read"><a href="#"><img src="metamorph_dreamclouds-images/but_read.gif" alt="" /></a></div><br />
</div>
<div class="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>
</div>
<div class="right">
<h1>Meta</h1>
<div class="tit_bot">
<ul>
<li><a href="">In a nunc tellus, ac adipiscing est.</a></li>
<li><a href="">Donec luctus nulla non odio.</a></li>
<li><a href="">Sed tincidunt ultrices nunc, a gravida. </a></li>
<li><a href="">Pellentesque condimentum risus. </a></li>
<li><a href="">Fusce eget nibh eget elit molestie.</a></li>
</ul>
</div>
</div>
<div style="clear: both"><img src="metamorph_dreamclouds-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
</div>
<!-- content ends -->
<!-- footer begins -->
<div id="footer">
Copyright 2009. Designed by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash 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