metamorph_redstorm
<!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: #DB0000;
text-decoration:none;
}
a:hover{
text-decoration: underline;
color: #000000;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background: #DC0000 url(metamorph_redstorm-images/back_all.gif) repeat-x;
line-height:20px;
}
#main{
width: 998px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
background:#373737;
border-left: 15px solid #ffffff;
border-right: 15px solid #ffffff;
}
#header { width:1002px;
padding: 0px 0px 0px 0px;
height: 450px;
}
#buttons{
width: 998px;
background: url(metamorph_redstorm-images/menu_back.gif) repeat-x;
text-align:center;
height: 62px;
margin-right:3px;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight:bold;
display: block;
float: left;
width: 147px;
height: 49px;
text-decoration: none;
color: #ffffff;
padding-top: 23px;
text-align: center;
margin-right: 0px;
}
#buttons a:hover {
text-decoration: underline;
background: url(metamorph_redstorm-images/menu_back_r.gif) repeat-x;
}
.logo_text
{
float: left;
padding-top: 10px;
padding-left: 40px;
color: #FFFFFF
}
.logo_text H1
{
font-size: 14px;
font-weight: 900;
}
.logo_text H3
{
font-size: 10px;
}
#logo{
height: 390px;
}
#buttons H3 a{
font-size: 10px;
background:none;
}
#bg_top {
background: url(metamorph_redstorm-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_redstorm-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: #E0E0E0;
min-height: 590px;
}
#left .list
{
list-style: none;
padding-left: 37px;
padding-top: 5px;
margin: 0px;
display:block;
background: url(metamorph_redstorm-images/fish_left.png) 9px 6px no-repeat;
}
.tit_bot { background: url(metamorph_redstorm-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_redstorm-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:#DC0000;
font-weight:bold;
}
.color { color:#DC0000;}
.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_redstorm-images/tit.jpg) center top no-repeat;
}
H2{
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:normal;
color: #DC0000;
padding-bottom: 10px;
padding-left: 4px;
padding-top: 5px;
text-align:left;
background:url(metamorph_redstorm-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: #E0E0E0;
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_redstorm-images/fish_right.png) 10px 13px no-repeat;
padding-left: 38px;
}
#footer{
height: 44px;
width: 998px;
font-size: 10px;
color: #FFFFFF;
padding-top: 8px;
text-align: center;
clear:both;
padding: 10px 0px 10px 0px;
background: url(metamorph_redstorm-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;
}
/* Header Scroll */
.nivoSlider { position:relative;}
.nivoSlider img { position:absolute; top:0px; left:0px;}
.nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:60; display:none;}
.nivo-slice { display:block; position:absolute; z-index:50; height:100%; }
.nivo-caption { position:absolute; left:0px; bottom:0px; color:#fff; width:100%; z-index:89; padding-left: 10px; font-weight: bold; }
.nivo-caption p { padding:10px 5px; margin:0; text-indent:-9999%;}
.nivo-directionNav a {position:absolute; width:45px; height: 60px; top:41%; z-index:99; cursor:pointer; text-indent:-9999%;}
.nivo-prevNav { background-position: left bottom; left:25px; margin-top: 20px; background:url(metamorph_redstorm-images/but_left.png) no-repeat;}
.nivo-nextNav { background-position: left top; right: 0px; margin-top: 20px; background:url(metamorph_redstorm-images/but_right.png) no-repeat;}
.nivo-controlNav { bottom:-20px; position:absolute; right:0;}
.nivo-controlNav a { float:left; width:14px; height:14px; display:block; position:relative; z-index:99; cursor:pointer; text-indent:-9999%; }
.nivo-controlNav a.active { background-position:left top; margin-top:-1px;}
</style>
<!-- Begin JavaScript -->
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.tools.js"></script>
<script type="text/javascript" src="lib/jquery.custom.js"></script>
</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 class="logo_text">metamorph_dreamclouds<br />
<h3>Small Company Slogan Goes Here</h3></div>
</div>
<div id="logo">
<div id="slider_bg">
<div class="waveshow">
<img src="metamorph_redstorm-images/top.jpg" alt="" title="Some Text 1 Goes Here" />
<img src="metamorph_redstorm-images/top2.jpg" alt="" title="Some Text 2 Goes Here" />
<img src="metamorph_redstorm-images/top3.jpg" alt="" title="Some Text 3 Goes Here" />
</div> <!-- waveshow -->
</div> <!-- slider_bg -->
</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_redstorm-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_redstorm-images/but_read.gif" alt="" /></a></div>
</div>
</div>
</div>
<div id="center">
<h2>Metamorphosis Design</h2>
<div class="text"><img src="metamorph_redstorm-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_redstorm-images/but_read.gif" alt="" /></a></div>
<div class="text">
<img src="metamorph_redstorm-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_redstorm-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_redstorm-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_redstorm-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
</div>
<!-- content ends -->
<!-- footer begins -->
<div id="footer">
Copyright 2011. 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