metamorph_beauty
<!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;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background: url(metamorph_beauty-images/bg.jpg) top center no-repeat #76B4E5;
line-height: 20px;
}
#main_bg {
width: 1046px;
background: url(metamorph_beauty-images/main_bg.png) left repeat-y;
margin: 0px auto;}
#main {
width: 1010px;
margin: 0px auto;}
#header {
width:1010px;
background: url(metamorph_beauty-images/logo.jpg) left top no-repeat;
height: 390px;
}
#logo {
height: 233px;
background: url(metamorph_beauty-images/big_img.jpg) left top no-repeat;
padding: 108px 0px 0px 800px;
}
#logo H2 {
font-family: Georgia, "Times New Roman", Times, serif;
color:#FFFFFF;
font-size:18px;
font-style:italic;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 16px;
color: #FFFFFF;
}
#logo H2 a{
font-size: 12px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight:100;
}
#buttons{
text-align:center;
height: 39px;
margin-left: 0px;
padding-left: 0px;
background: url(metamorph_beauty-images/bg_but.gif) top repeat-x;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
display: block;
float: left;
text-decoration: none;
color: #FFFFFF;
text-align: center;
padding-top: 11px;
height: 28px;
}
.but {
width: 202px;
}
#buttons .but:hover {
background:url(metamorph_beauty-images/but_hov.gif) top repeat-x ;}
#content{
width: 100%;
}
#left{
width: 696px;
float: left;
color:#000000;
margin-left: 9px;
}
.munth_box {
padding: 3px 15px 0px 39px;
background: url(metamorph_beauty-images/fish_left.gif) 6px 7px no-repeat;
}
.left_box {
border: 1px solid #ABD4F4;
}
.text{
padding: 0px 20px 15px 9px;
}
.left_col {
float:left;
width:537px;}
.right_col {
float: right;
width: 107px;
}
.img_l { float:left;
margin: 3px 15px 3px 0px;
}
.img_r { float: right;
margin: 3px 6px 3px 10px;
}
.span_right { color: #004880;
font-size:12px;
font-weight:bold;
}
.span_left { color: #77D468;
font-size:12px;
font-weight:bold;
}
#left H1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #0D6000;
text-align: left;
padding: 10px 0px 20px 10px;
background: url(metamorph_beauty-images/title.gif) top repeat-x;
}
#right H1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #496A2D;
text-align: center;
padding: 10px 0px 10px 10px;
background: url(metamorph_beauty-images/title.gif) top repeat-x;
}
.read_r{
text-align:right;
padding-right:5px;
padding-top: 0px;
}
.read_r a {
font-weight:bold;
font-size:12px;
color: #77D468;
text-decoration:underline;
}
.read_r a:hover {
font-weight:bold;
font-size:12px;
color: #77D468;
text-decoration: none;
}
.read_l{
text-align:right;
padding-right:5px;
padding-bottom: 3px;
background: url(metamorph_beauty-images/b_read.gif) right 0px no-repeat;
}
.read_l a {
font-weight:bold;
font-size:12px;
color: #117C00;
text-decoration: none;
padding-right: 2px;
}
.read_l a:hover {
font-size:12px;
color: #000000;
text-decoration: none;
}
#right{
float: right;
width: 285px;
margin-right: 9px;
}
#right_bg{
background: url(metamorph_beauty-images/right_bg.gif) left repeat-y;
padding: 0px 18px 0px 18px;
}
.opt {
background:url(metamorph_beauty-images/opt.gif) right bottom no-repeat;
height: 30px;}
.opt_a {
padding: 10px 0px 0px 27px;
background: url(metamorph_beauty-images/fish1.gif) 4px 15px no-repeat;
}
.opt_a:hover {
}
.opt_a a {
color:#004880;
text-decoration:none;}
.dat { padding: 10px 5px 0px 27px;
background:url(metamorph_beauty-images/fish1.gif) 4px 15px no-repeat;}
#footer{
height: 40px;
font-size: 11px;
color: #ffffff;
text-align: center;
padding: 12px 0px 0px 0px;
background: url(metamorph_beauty-images/footer.gif) bottom repeat-x;
}
#footer a{
color: #ffffff;
font-size: 11px;
text-decoration: none;
}
#footer a:hover{
color: #ffffff;
font-size: 11px;
text-decoration: underline;
}
.left_res
{
width: 50%;
float: left;
}
.left_res a
{
color: #4E6E33;
font-weight: bold;
}
.right_res
{
float: right;
width: 50%;
}
.right_res a
{
color: #4E6E33;
font-weight: bold;
}
ul{
color: #4E6E33;
}
</style>
</head>
<body>
<div id="main_bg">
<div id="main">
<!-- header begins -->
<div id="header">
<div id="logo">
<a href="#">metamorph_beauty</a>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
</div>
<div id="buttons">
<a href="#" class="but" title="">Home</a>
<a href="#" class="but" title="">Blog</a>
<a href="#" class="but" title="">Gallery</a>
<a href="#" class="but" title="">About us</a>
<a href="#" class="but" title="">Contact us</a>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="content">
<div id="right">
<h1>Categories</h1>
<div class="opt"><div class="opt_a">
<a class="" href="">Lorem ipsum dolor</a>
</div>
</div>
<div class="opt"><div class="opt_a">
<a class="" href="">Nam gravida elit scelerisque</a>
</div></div>
<div class="opt"><div class="opt_a">
<a class="" href="">Ut commodo turpis id eros bibendum </a>
</div>
</div>
<div class="opt"><div class="opt_a">
<a class="" href="">Proin lacinia dignissim magna</a>
</div>
</div>
<div class="opt"><div class="opt_a">
<a class="" href="">Curabitur quis velit eros</a>
</div>
</div>
<div class="opt"><div class="opt_a">
<a class="" href="">Pellentesque et orci et mi adipiscing</a>
</div>
</div><br />
<h1>Categories</h1>
<div class="dat">
<span class="span_right">Quisque in lorem non odio sollicitudin ullam- corper tempor in lorem.</span><br />
Morbi aliquam molestie est, pharetra hendre- rit metus fermentum et.<br />
<div class="read_r"><a href="#">read more</a></div>
</div>
<div class="dat">
<span class="span_right">Maecenas pretium nisl vestibulum mi adip- iscing eget tempus nibh varius.</span><br />
Pellentesque at felis vel orci vehicula placerat<br />
<div class="read_r"><a href="#">read more</a></div>
</div>
<div class="dat">
<span class="span_right">Maecenas tristique justo ultrices metus gravida sodales tempus ante sollicitudin.</span><br />
Phasellus vitae neque arcu, nec lobortis ligula.<br />
<div class="read_r"><a href="#">read more</a></div>
</div>
</div>
<div id="left">
<div class="left_box">
<h1>Metamorphosis Design</h1>
<div class="text">
<img src="metamorph_beauty-images/img1.jpg" class="img_l" width="150" height="200" alt="" /> <span class="span_left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor lacus quis est rutrum porta. </span><br />
<div style="height:10px"></div>
Nullam vulputate, erat sit amet scelerisque auctor, sapien velit convallis nisi, at interdum nisl quam sit amet felis. Integer accumsan, nibh non fringilla tempus, risus nunc luctus elit, vel egestas est felis eget elit. Duis nulla nulla, vehicula non placerat et, ornare vitae velit. Aliquam erat volutpat. Nam nisl sapien, ullamcorper id malesuada id, bibendum sit amet erat. Mauris faucibus metus turpis. Duis bibendum lacinia lectus non venenatis. Pellentesque diam justo, dignissim eget suscipit eu, condimentum nec libero. Nam odio tortor, sollicitudin non iaculis fringilla, scelerisque quis magna. Donec condimentum<br />
<br />
<div class="read_l"><a href="#">read more</a></div>
</div>
</div>
<div style="height:11px"></div>
<div class="left_box">
<h1>Website Design Related Resources</h1>
<div class="text">
<div class="left_col">
<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_beauty-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 style="clear: both"></div>
</div>
</div>
<div style="height:11px"></div>
<div class="left_box">
<h1>Metamorphosis Design</h1>
<div class="text">
<div class="left_col">
<span class="span_left">Duis posuere sapien neque, vel commodo neque. Sed dolor nisi, luctus in rutrum eu, rhoncus eu lorem.
</span><br /><div style="height:10px"></div>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In dictum porttitor diam, ut bibendum lacus imperdiet in. Proin at imperdiet lacus. Praesent eros dolor, ultrices nec rutrum sed, varius nec ante. Ut eu lectus eu massa convallis facilisis vitae eget urna. Donec eu mi metus. Etiam ornare urna a neque congue porttitor. Fusce nulla massa, cursus sed porttitor non, tempus nec sapien. Phasellus sed ipsum in enim luctus suscipit. Nulla sed diam odio. Aliquam vestibulum euismod augue, id feugiat sapien suscipit pulvinar. Aliquam nec <br /><br />
<div class="read_l width"><a href="#">read more</a></div>
</div>
<div class="right_col"><img src="metamorph_beauty-images/img2.jpg" class="img_r" width="100" height="133" alt="" /></div>
<div style="clear: both"></div>
</div>
</div>
</div>
<div style="clear: both"></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>
<!-- footer ends -->
</div>
</div>
</body>
</html>
Related examples in the same category