metamorph_undersea
<!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
*/
*
{
margin: 0px;
padding: 0px;
}
a{
color: #ffffff;
}
a:hover {
text-decoration: none;
color: #ffffff;
}
.main p, .main2 p{
color: #84effd;
line-height: 22px;
padding-bottom: 10px;
}
body {
background: url(metamorph_undersea-images/bg_repeat.jpg);
background-repeat: repeat-y;
background-position: center;
background-color: #024bda;
font: 13px Arial, Helvetica, sans-serif;
color: #383838;
}
#back{
background: url(metamorph_undersea-images/bg.jpg);
background-repeat: no-repeat;
background-position: top center;
}
#content{
margin: 0 auto;
width: 1019px;
text-align: left;
}
#main_top{
background: url(metamorph_undersea-images/main_top.png);
background-repeat: no-repeat;
background-position: left;
height: 12px;
}
.main{
width: 1019px;
margin: 0 auto;
clear:both;
background: url(metamorph_undersea-images/main_bg.png);
padding-bottom: 10px;
}
.main2{
width: 981px;
margin: 0 auto;
clear:both;
padding: 20px;
background: url(metamorph_undersea-images/main_bg.png);
margin-top: 20px;
}
#header {
width: 1019px;
}
#logo {
height: 60px;
text-align: left;
width: 770px;
padding-left: 185px;
padding-top: 90px;
padding-bottom: 60px;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 18px;
color: #ffffff;
}
#logo H2 a
{
font-size: 12px;
}
#logo H1 {
margin: 0px;
padding: 0px;
}
#menu
{
width: 1019px;
height: 52px;
padding-left: 92px;
}
#menu ul {
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
font-family: Arial,Helvetica,sans-serif;
font-size: 16px;
color: #ffffff;
text-align: center;
font-weight: normal;
text-decoration: none;
width: 166px;
height: 32px;
display: block;
float: left;
padding-top: 20px;
margin-right: 1px;
background: url(metamorph_undersea-images/menu_bg.png);
background-repeat: no-repeat;
background-position: left top;
}
.action, #menu a:hover{
width: 166px;
height: 32px;
color: #000000;
background: url(metamorph_undersea-images/menu_hov.png);
background-repeat: no-repeat;
background-position: left top;
}
.main .read{
background: url(metamorph_undersea-images/read.png);
background-repeat: no-repeat;
background-position: right top;
text-align: right;
height: 20px;
padding-top: 2px;
}
.main2 .read{
text-align: right;
height: 20px;
padding-top: 2px;
}
.read a{
font-size: 14px;
text-decoration: none;
padding-right: 18px;
color: #ffffff;
}
.main2 .read a{
font-size: 12px;
}
#blog_col{
background: url(metamorph_undersea-images/col_bg.png);
background-repeat: repeat-y;
background-position: center;
}
#col1_1, #col1_2, #col1_3{
width: 250px;
float: left;
padding-left: 44px;
padding-right: 44px;
}
h1{
font-family: Arial,Helvetica,sans-serif;
font-size: 16px;
color: #99f2fc;
font-weight: bold;
padding-bottom: 20px;
}
#blog_col2{
background: url(metamorph_undersea-images/main_bg2.png);
background-repeat: repeat-y;
background-position: center;
}
.col2_1, .col2_2{
width: 450px;
float: left;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.main2 ul{
list-style: none;
padding-left: 10px;
}
.main2 ul li{
background: url(metamorph_undersea-images/ls.png);
background-repeat: no-repeat;
background-position: 0px 4px;
padding-left: 20px;
padding-bottom: 4px;
}
.main2 ul li a{
font-weight: bold;
text-decoration: none;
color: #002d7e;
}
.main2 ul li a:hover{
color: #ffffff;
}
.main_bot{
background: url(metamorph_undersea-images/main_bot.png);
background-repeat: no-repeat;
background-position: left;
height: 8px;
}
#footer_bg{
background: url(metamorph_undersea-images/footer.jpg);
background-repeat: no-repeat;
background-position: bottom center;
}
#footer {
height: 50px;
width: 1019px;
clear: both;
margin: 0 auto;
padding-top: 30px;
}
#footer p {
margin: 0;
font-size: 10px;
text-align: center;
color: #ffffff;
}
#footer a {
color: #ffffff;
}
</style>
</head>
<body>
<div id="back">
<div id="footer_bg">
<div id="content">
<!-- header begins -->
<div id="header">
<div id="logo">
<h1><a href="#">metamorph_undersea</a></h1>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
</div>
<div id="menu">
<ul>
<li><a href="#" title="" class="action">Home</a></li>
<li><a href="#" title="">Blog</a></li>
<li><a href="#" title="">Gallery</a></li>
<li><a href="#" title="">About</a></li>
<li><a href="#" title="">Contact</a></li>
</ul>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="main_top"></div>
<div class="main">
<div id="blog_col">
<div id="col1_1">
<h1>Aliquam in diam nec felis scelerisque scelerisque vel id </h1>
<p>Nulla condimentum consequat. Maecenas imperdiet pharetra dolor, et venenatis risus semper id. Nulla facilisi. Aliquam in diam nec felis scelerisque scelerisque vel id diam. Donec nec tellus quis magna mattis vehicula. </p>
<div class="read"><a href="#">read more</a></div>
</div>
<div id="col1_2">
<h1>Donec ornare dui vitae ipsum molestie tincidunt. </h1>
<p>Proin congue varius tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac velit nec erat porta condimentum. In vehicula risus vel tellus varius posuere. Nulla magna mauris, tincidunt quis </p>
<div class="read"><a href="#">read more</a></div>
</div>
<div id="col1_3">
<h1>Proin mattis porttitor quam, ultries ornare quam ornare non.</h1>
<p>Curabitur neque lectus, mattis at iaculis at, dapibus eget nisi. Quisque ut diam id dui gravida elementum non in diam. Duis dignissim justo ut diam pellentesque ut venenatis ipsum gravida. Curabitur mollis sem </p>
<div class="read"><a href="#">read more</a></div>
</div><div style="clear: both"></div>
</div>
</div>
<div class="main_bot"></div>
<div class="main2">
<div id="blog_col2">
<div class="col2_1">
<h1>Mauris sed ligula nulla, at luctus metus. </h1>
<img src="metamorph_undersea-images/img1.jpg" alt="" title="img" style="float: left; padding-right: 10px; padding-top: 6px;"/>
<p>Nulla condimentum consequat. Maecenas imperdiet pharetra dolor, et venenatis risus semper id. Nulla facilisi. Aliquam in diam nec felis scelerisque sclerisque id diam.</p>
<div class="read"><a href="#">read more</a></div>
<div style="clear: both"></div>
<img src="metamorph_undersea-images/img2.jpg" alt="" title="img" style="float: left; padding-right: 10px; padding-top: 6px;"/>
<p>Nulla condimentum consequat. Maecenas imperdiet pharetra dolor, et venenatis risus semper id. Nulla facilisi. Aliquam in diam nec felis scelerisque scelerisque id diam.</p>
<div class="read"><a href="#">read more</a></div>
</div>
<div class="col2_2">
<h1>Curabitur lorem dui, ultrices vel scelerisque nec, pharetra nec lorem.</h1>
<ul>
<li><a href="http://www.metamorphozis.com/free_templates/free_templates.php">Free Website Templates</a></li>
<li><a href="http://www.metamorphozis.com/free_flash_templates/free_flash_templates.php">Free Flash 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/shop/easy_flash_templates.php">Easy Flash Templates</a> (no flash experience needed to edit)</li>
<li><a href="http://www.metamorphozis.com/blog/category/free-fonts/">Free Fonts</a></li>
<li><a href="http://www.metamorphozis.com/blog/category/freeicons/">Free Icons</a></li>
<li><a href="http://www.metamorphozis.com/blog/category/free-photoshop-brushes/">Free Photoshop Brushes</a></li>
<li><a href="http://www.metamorphozis.com/blog/feed/">RSS Subscribe</a></li>
</ul>
</div>
<div style="clear: both"></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="Flash Templates">Flash Templates</a> for <a href="http://www.flashtemplatesdesign.com/" title="Free Flash Templates">Free Flash Templates</a></p>
</div>
</div>
</div>
</div>
<!-- footer ends-->
</body>
</html>
Related examples in the same category