metamorph_icybreeze
<!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{
color: #000000;
line-height: 22px;
padding-bottom: 10px;
}
body {
background: #010e80;
font: 13px Arial, Helvetica, sans-serif;
color: #000000;
}
#back{
background: url(metamorph_icybreeze-images/bg1.jpg) no-repeat top right;
width: 1200px;
margin: 0 auto;
}
#content{
margin: 0 auto;
width: 1016px;
text-align: left;
padding-top: 10px;
}
#main_top{
background: url(metamorph_icybreeze-images/main_top.png);
background-repeat: no-repeat;
background-position: left;
height: 14px;
}
.main{
width: 1016px;
margin: 0 auto;
clear:both;
background: url(metamorph_icybreeze-images/main_bg2.png);
padding-bottom: 10px;
}
#header {
width: 1019px;
height: 220px;
}
#logo {
height: 60px;
text-align: left;
width: 770px;
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;
}
#menu
{
width: 516px;
height: 37px;
padding-left: 100px;
padding-right: 100px;
background: url(metamorph_icybreeze-images/menu_bg.png) no-repeat top left;
}
#menu ul {
list-style: none;
padding-left: 0px;
}
#menu li {
display: inline;
padding-left: 0px;
}
#menu a {
font-family: Arial,Helvetica,sans-serif;
font-size: 16px;
color: #ffffff;
text-align: center;
font-weight: normal;
text-decoration: none;
width: 20%;
height: 30px;
display: block;
float: left;
padding-top: 7px;
}
.action, #menu a:hover, #menu_foot a:hover{
color: #000000;
}
.main .read{
background: url(metamorph_icybreeze-images/read.png);
background-repeat: no-repeat;
background-position: right bottom;
text-align: right;
height: 16px;
padding-top: 0px;
}
.read a{
font-size: 11px;
text-decoration: none;
padding-right: 5px;
color: #ffffff;
}
.main2 .read a{
font-size: 12px;
}
#blog_col{
background: url(metamorph_icybreeze-images/col_bg.png);
background-repeat: repeat-y;
background-position: center;
}
h1{
font-family: Georgia,'Times New Roman',times,serif;
font-size: 20px;
color: #010e80;
font-weight: normal;
padding-bottom: 15px;
}
.col2_1, .col2_2{
width: 470px;
float: left;
padding-left: 20px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
}
.date {
height: 20px;
padding-top: 10px;
}
.dateleft{
background:url(metamorph_icybreeze-images/date_02.png) no-repeat 0px 2px;
padding-left: 20px;
height: 16px;
margin-top: 4px;
width:90px;
margin-left: 150px;
float:right;
}
.dateright{
margin-top: 2px;
background:url(metamorph_icybreeze-images/date_01.png) no-repeat left;
padding-left: 25px;
height: 16px;
float: left;
}
.dateleft a,.dateright a{
color: #010e80;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight:normal;
}
.gallery{
padding-top: 20px;
padding-bottom: 5px;
}
.gallery img{
padding-right: 12px;
}
.block_link{
padding-top: 20px;
}
.link_left, .link_right{
width: 175px;
float: left;
}
.link_left{
padding-right: 30px;
}
.main_bot{
background: url(metamorph_icybreeze-images/main_bot.png);
background-repeat: no-repeat;
background-position: left;
height: 14px;
}
#footer_bg{
background: url(metamorph_icybreeze-images/bg2.jpg) no-repeat bottom left;
}
#menu_foot{
margin-top: 20px;
width: 498px;
height: 29px;
padding-left: 100px;
padding-right: 100px;
float: right;
background: url(metamorph_icybreeze-images/menu_foot.png) no-repeat top left;
}
#menu_foot ul {
list-style: none;
padding-left: 0px;
}
#menu_foot li {
display: inline;
padding-left: 0px;
}
#menu_foot a {
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
color: #ffffff;
text-align: center;
font-weight: normal;
text-decoration: none;
width: 20%;
height: 23px;
display: block;
float: left;
padding-top: 6px;
}
#footer {
height: 50px;
width: 719px;
clear: both;
margin: 0 auto;
padding-top: 30px;
padding-left: 300px;
}
#footer p {
margin: 0;
font-size: 10px;
text-align: center;
color: #ffffff;
}
#footer a {
color: #ffffff;
}
.left_res
{
width: 50%;
float: left;
}
.left_res a
{
color: #010E80;
font-weight: bold;
}
.right_res
{
float: right;
width: 50%;
}
.right_res a
{
color: #010E80;
font-weight: bold;
}
ul{
color: #010E80;
padding-left: 20px;
}
</style>
</head>
<body>
<div id="back">
<div id="footer_bg">
<div id="content">
<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>
<!-- header begins -->
<div id="header">
<div id="logo">
<h1><a href="#">metamorph_icybreeze</a></h1>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="main_top"></div>
<div class="main">
<div id="blog_col2">
<div class="col2_1">
<h1>Metamorphosis Design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc euismod dignissim quam, quis varius lorem luctus vitae. Nullam commodo, arcu non egestas tristique, orci ipsum euismod leo, et dignissim mauris quam nec purus. Sed vitae mauris libero, eu sodales ipsum. Mauris vel arcu ut odio congue ornare. Aenean quis libero non arcu feugiat semper vitae ut nisl. Quisque ac odio elit, non vehicula erat. Phasellus auctor dolor et mi tempor posuere. Vivamus congue consequat augue, id imperdiet nisi scelerisque et. Cras ut leo quis ante ornare dignissim. Suspendisse lorem dolor, feugiat non rutrum nec, ultricies ut risus. Donec lectus risus, sagittis venenatis pretium vel, vestibulum non nisl. Maecenas vehicula dignissim ante sit amet molestie. Aenean vel mauris non purus commodo pellentesque. Cras cursus dignissim mauris sed gravida. Phasellus viverra semper turpis et fermentum. Phasellus et magna leo, luctus </p>
<div class="date">
<div class="dateright"><a href="#">April 11, 2009</a></div>
<div class="dateleft"><a href="#">Comments(14)</a></div>
</div>
<div style="clear: both"></div>
<div class="gallery">
<img src="metamorph_icybreeze-images/img2.jpg" alt="" title="img" />
<img src="metamorph_icybreeze-images/img3.jpg" alt="" title="img" />
<img src="metamorph_icybreeze-images/img4.jpg" alt="" title="img" />
</div>
<div class="read"><a href="#">view more</a></div>
</div>
<div class="col2_2">
<h1>Metamorphosis Design</h1>
<img src="metamorph_icybreeze-images/img1.jpg" alt="" title="img" style="float: left; padding-right: 10px; padding-top: 6px;"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc euismod dignissim quam, quis varius lorem luctus vitae. Nullam commodo, arcu non egestas tristique, orci ipsum euismod leo, et dignissim mauris quam nec purus. Sed vitae mauris libero, eu sodales ipsum. Mauris vel arcu ut odio congue ornare. Aenean quis libero non arcu feugiat semper vitae ut nisl. Quisque ac odio elit, non vehicula erat. Phasellus auctor dolor et mi tempor posuere. Vivamus congue consequat augue, id imperdiet nisi scelerisque et. </p>
<div class="read"><a href="#">read more</a></div>
<div class="date">
<div class="dateright"><a href="#">April 11, 2009</a></div>
<div class="dateleft"><a href="#">Comments(14)</a></div>
</div>
<h1>Website Design Related Resources</h1>
<div class="text">
<div class="left_res">
<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/website_hosting/index.php">Top Hosting Providers</a></li>
</ul>
</div>
<div class="right_res">
<ul>
<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/freemetamorph_icybreeze-images/">Free Images</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/category/free-wallpapers/">Free Wallpapers</a></li>
<li><a href="http://www.metamorphozis.com/blog/feed/">RSS Subscribe</a></li>
</ul>
</div>
<div style="clear: both"></div>
</div>
<div class="block_link">
<div class="link_left">
<a href="#">Vivamus condimentum dapibus ligula sed feugiat. </a>
</div>
<div class="link_right">
<a href="#">Integer at lectus ultrices tellus aliquam posuere sit amet sit amet elit. </a>
</div>
</div>
</div>
<div style="clear: both"></div>
</div>
</div>
<div class="main_bot"></div>
<div class="main2">
</div>
<!--content ends -->
<!--footer begins -->
<div id="menu_foot">
<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 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