metamorph_flamepower
<!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: #870000;
font-style: italic;
}
a:hover {
text-decoration: none;
color: #000000;
}
.main p{
color: #000000;
line-height: 20px;
padding-bottom: 10px;
}
.main p:first-letter{
color: #870000;
}
body {
background: #000000;
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
padding-bottom: 25px;
}
#back{
background: url(metamorph_flamepower-images/bg1.jpg) no-repeat top left;
width: 1207px;
margin: 0 auto;
}
#content{
width: 1207px;
text-align: left;
padding-top: 10px;
}
#main_top{
background: url(metamorph_flamepower-images/main_top.jpg);
background-repeat: no-repeat;
background-position: left;
height: 10px;
}
.main{
width: 1014px;
float: right;
clear:both;
background: url(metamorph_flamepower-images/main_bg.jpg);
}
#header {
width: 795px;
float: right;
}
#logo {
height: 60px;
text-align: left;
padding-bottom: 50px;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 16px;
color: #ffffff;
}
#logo H2 a{
font-size: 12px;
}
#menu
{
width: 100%;
height: 123px;
}
#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: 71px;
display: block;
float: left;
padding-top: 52px;
}
.action, #menu a:hover, #menu_foot a:hover{
background: url(metamorph_flamepower-images/menu_hov.png) no-repeat top center;
}
#conblog{
height: 201px;
margin-top: 9px;
margin-bottom: 9px;
padding-right: 40px;
width: 755px;
}
.blog{
background:url(metamorph_flamepower-images/blog.jpg) no-repeat left top;
width: 245px;
height:201px;
}
.blog2{
background:url(metamorph_flamepower-images/blog.jpg) no-repeat left top;
width: 245px;
height:201px;
float:right;
margin-left: 10px;
}
.blogtop{
font-size: 18px;
font-weight:normal;
color: #ffffff;
height: 36px;
padding-top: 12px;
text-align: center;
}
#conblog ul{
padding-left: 0px;
list-style: none;
}
#conblog li{
padding-left: 20px;
background: url(metamorph_flamepower-images/b_ls.png) no-repeat 0px 4px;
padding-bottom: 16px;
}
.link_b a{
color: #000000;
font-style: normal;
text-decoration: none;
}
.link_b a:hover{
color: #870000;
}
.blogcenter{
padding-left: 30px;
padding-right: 15px;
}
.blogcenter .read{
text-align: right;
}
#conblog .read a{
color: #870000;
text-decoration: underline;
}
#conblog .read a:hover{
color: #000000;
text-decoration: none;
}
.main .read{
background: url(metamorph_flamepower-images/read.jpg);
background-repeat: no-repeat;
background-position: right top;
text-align: right;
height: 18px;
padding-top: 1px;
}
.read a{
font-size: 12px;
text-decoration: none;
padding-right: 7px;
color: #ffffff;
}
h4{
font-family: Arial,Helvetica,sans-serif;
font-size: 18px;
color: #870000;
font-weight: normal;
padding-bottom: 5px;
border-bottom: 1px solid #870000;
margin-bottom: 8px;
}
.left{
width: 395px;
float: left;
padding-left: 12px;
padding-right: 15px;
}
.right{
width: 550px;
float: left;
padding-left: 20px;
padding-right: 15px;
}
.link_col{
background: url(metamorph_flamepower-images/link_bg.jpg) repeat-y center;
margin-top: 20px;
}
.col1, .col2, .col3{
width: 161px;
float: left;
}
.col1{
padding-right: 20px;
}
.col2{
padding-left: 15px;
padding-right: 30px;
}
.main_bot{
background: url(metamorph_flamepower-images/main_bot.jpg);
background-repeat: no-repeat;
background-position: left;
height: 10px;
}
#footer {
height: 47px;
width: 1014px;
clear: both;
float: right;
margin-top: 20px;
padding-top: 25px;
background: url(metamorph_flamepower-images/footer.jpg) no-repeat top left;
}
#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: #870000;
font-weight: bold;
}
.right_res
{
float: right;
width: 50%;
}
.right_res a
{
color: #870000;
font-weight: bold;
}
ul{
color: #870000;
padding-left: 20px
}
</style>
</head>
<body>
<div id="back">
<div id="content">
<!-- header begins -->
<div id="header">
<div id="logo">
<h1><a href="#">metamorph_flamePower</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 id="conblog">
<div class="blog2">
<p class="blogtop">Categories</p>
<div class="blogcenter">
<ul>
<li>In hac habitasse platea dictumst. Pellentesque porttitor urna dictum
<div class="read"><a href="#">read more</a></div></li>
<li>Etiam bibendum suscipit dictum. Aenean dictum massa a eros
<div class="read"><a href="#">read more</a></div></li>
</ul>
</div>
</div>
<div class="blog2">
<p class="blogtop">Archives</p>
<div class="blogcenter link_b">
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Nullam a mi ut sapien</a></li>
<li><a href="#">Pellentesque aliquet</a></li>
<li><a href="#">Sed non dolor</a></li>
<li><a href="#">Quisque non nibh</a></li>
</ul>
</div>
</div>
<div class="blog">
<p class="blogtop">Company News</p>
<div class="blogcenter link_b">
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Nullam a mi ut sapien</a></li>
<li><a href="#">Pellentesque aliquet</a></li>
<li><a href="#">Sed non dolor</a></li>
<li><a href="#">Quisque non nibh</a></li>
</ul>
</div>
</div>
</div> </div><div style="clear: both"></div>
<!-- header ends -->
<!-- content begins -->
<div class="main">
<div id="main_top"></div>
<div class="left">
<h4>Metamorphosis Design</h4>
<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.</p>
<img src="metamorph_flamepower-images/img1.jpg" alt="" title="img" style="float: left; padding-right: 10px; padding-top: 6px;"/>
<a href="#">Mauris libero augue, porttitor non fringilla vel, porttitor eu arcu. </a>
<p>In dapibus imperdiet ultricies. Aliquam eleifend lobortis mattis.</p><br /><br />
<img src="metamorph_flamepower-images/img2.jpg" alt="" title="img" style="float: left; padding-right: 10px; padding-top: 6px;"/>
<a href="#">Maecenas bibendum volutpat sodales.</a>
<p>Praesent condimentum laoreet mauris eu placerat. Cras fringilla consequat nisl. </p>
</div>
<div class="right">
<h4>Metamorphosis Design</h4>
<img src="metamorph_flamepower-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. 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="read"><a href="#">read more</a></div>
<h4>Website Design Related Resources</h4>
<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_flamepower-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="link_col">
<div class="col1"><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae massa quis massa tincidunt pretium.</a></div>
<div class="col2"><a href="#">Maecenas sagittis, leo sed ultricies tincidunt, ipsum nulla lacinia augue, sed posuere lacus nunc et mauris.</a></div>
<div class="col3"><a href="#">Cras nec nisl urna. Morbi tincidunt purus neque. Proin lobortis, diam nec sagittis blandit, lorem libero placerat </a></div>
<div style="clear: both"></div>
</div>
</div>
<div style="clear: both"></div>
<div class="main_bot"></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 style="clear: both"></div>
</div>
</div>
<!-- footer ends-->
</body>
</html>
Related examples in the same category