metamorph_models
<!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: #FFFFFF;
text-decoration:none;
}
a:hover{
text-decoration: underline;
color: #FFFFFF;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
line-height:20px;
background: url(metamorph_models-images/bg.jpg) top repeat-x #187808;
margin-bottom: 30px;
}
#main {
width: 1183px;
margin: 0px auto;
}
#header {
width:676px;
padding: 0px 0px 0px 0px;
height: 197px;
}
#logo { font-family: Arial, Helvetica, sans-serif;
color:#000000;
font-size:18px;
font-style:italic;
padding: 40px 0px 0px 10px;
height: 79px;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 16px;
color: #000000;
font-weight: bold;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-transform: none;
}
#buttons_bg { background:#FFFFFF;
width: 676px;
height:78px;
padding-top: 7px;
}
#buttons{
width: 669px;
height: 71px;
background: url(metamorph_models-images/but_bg.jpg) left top no-repeat;
text-align:center;
margin-left: 7px;
float:right;
padding-left: 0px
}
.but {
background:url(metamorph_models-images/fish_but.gif) right no-repeat;
height:71px;
float:left;}
.but_1 {background:url(metamorph_models-images/fish_but.gif) right no-repeat;
height:71px;
float:left;
margin-left:3px;}
#buttons a {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight:normal;
display: block;
float: left;
width: 127px;
height: 46px;
text-decoration: none;
color: #FFFFFF;
padding-top: 25px;
margin-right:3px;
text-align: center;
}
#buttons a:hover {
text-decoration: underline;
background: url(metamorph_models-images/b_over.gif) right 2px repeat-x;
margin-right:3px;
}
#content{
width: 1183px;
padding: 0px 0px 0px 0px;
background: url(metamorph_models-images/bg_right.gif) right repeat-y #FFFFFF;
margin: 0px 0px 0px 0px;
min-height: 580px;
}
#left{
width: 676px;
margin: 0px 0px 0px 0px;
float: left;
color:#000000;
background:url(metamorph_models-images/bg.jpg)
}
.white { background: #FFFFFF;
padding: 0px 20px 0px 10px;}
.right_b { background: url(metamorph_models-images/fish.gif) 10px 18px no-repeat;
padding-left: 30px;
padding-top: 15px;
width: 290px;}
.text{
padding: 0px 0px 0px 0px;
}
.img { float:left;
margin: 5px 12px 5px 0px;
}
.img_g { margin-right: 44px;
}
span { color:#2FA61B;
font-weight:bold;
}
.dat { text-decoration: underline;
color:#2FA61B;}
#left H2{
font-family: Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-weight: 100;
color: #469339;
padding-bottom: 9px;
padding-top: 10px;
padding-left: 0px;
text-align: left;
background: url(metamorph_models-images/tit_right.jpg) bottom repeat-x;
width: 100%;
}
.read_r{
text-align:right;
padding-right:10px;
padding-top: 8px;
font-weight:bold;
text-decoration:none;
color:#FFFFFF;
}
.big_img { width: 507px;
height:481px;
background:url(metamorph_models-images/big.jpg) left top no-repeat;}
#right{
float:right;
width: 507px;
background: url(metamorph_models-images/bg_right.gif) right repeat-y #FFFFFF;
margin-right: 0px;
padding: 0px 0px 0px 0px;
}
#right H1{
font-family: Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-weight: 100;
color: #187808;
text-align:center;
background: url(metamorph_models-images/tit_r.gif) bottom repeat-x;
height: 32px;
padding-top: 15px;
}
.tit_bot {
width: 328px;
margin-left:1px;}
#footer{
height: 62px;
width: 1014px;
font-size: 12px;
color: #000000;
text-align: center;
clear:both;
padding: 16px 0px 0px 0px;
background: url(metamorph_models-images/footer.jpg) left top no-repeat;
}
#footer a{
color: #000000;
font-size: 12px;
text-decoration: none;
}
#footer a:hover{
color: #000000;
font-size: 12px;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="main">
<!-- header begins -->
<!-- header ends -->
<!-- content begins -->
<div id="content">
<div id="left">
<div id="header">
<div id="logo"><a href="#">metamorph_models</a>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
</div>
<div id="buttons_bg">
<div id="buttons">
<div class="but_1"><a href="#" title="">Home</a></div>
<div class="but"><a href="#" title="">Blog</a></div>
<div class="but"><a href="#" title="">Gallery</a></div>
<div class="but"><a href="#" title="">About us</a></div>
<div class="but"><a href="#" title="">Contact us</a></div>
</div>
</div>
</div>
<div class="white">
<h2>Metamorphosis Design</h2>
<span><img src="metamorph_models-images/img1.jpg" width="122" height="162" class="img" alt="" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span><br />
Proin id purus ligula, a facilisis sapien. Integer lorem mi, luctus ut gravida posuere, rutrum a leo. Etiam fringilla egestas rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque ligula felis, congue vitae viverra sed, semper ac lorem. Morbi ut purus eros. Quisque ornare porttitor augue id volutpat. Pellentesque ut libero ut quam tincidunt vestibulum ac sit amet ligula. Donec varius, ipsum vitae volutpat elementum, nisl nisl facilisis nisl, vitae bibendum tortor mi sit amet sem. Curabitur pharetra sapien at nibh volutpat pharetra. Donec pharetra ante sollicitudin lacus euismod a lacus euismod a elementum nunc gravida. Duis quis lacus tortor. Sed vel justo arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ullamcorper malesuada elementum. <br />
<div class="read_r"><a href="#"><img src="metamorph_models-images/b_read.gif" alt="" /></a></div>
<h2>Free Website Templates</h2>
<div class="text">
<span>Maecenas sodales consequat leo. </span><br />
Aliquam vel purus quam, et mollis erat. Ut a felis eu nisl vehicula tempor eu ullamcorper tellus. Duis augue sem, vehicula non accumsan et, elementum vitae tellus. In tortor quam, venenatis in dapibus in, facilisis sed purus. In hac habitasse platea dictumst. Sed sit amet dui mauris. Integer mauris quam, cursus eget tincidunt in, pretium... <br />
<div class="read_r"><a href="#"><img src="metamorph_models-images/b_read.gif" alt="" /></a></div>
<h2>Our Gallery</h2>
<img src="metamorph_models-images/img2.jpg" class="img_g" alt="" /><img src="metamorph_models-images/img3.jpg" class="img_g" alt="" /><img src="metamorph_models-images/img4.jpg" class="img_g" alt="" /><img src="metamorph_models-images/img5.jpg" alt="" />
<div class="read_r"><a href="#"><img src="metamorph_models-images/b_view.gif" alt="" /></a></div>
</div><br />
<div style="clear: both"><img src="metamorph_models-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
</div>
<div id="right">
<div class="big_img"></div>
<div class="tit_bot">
<h1>Company News</h1>
<div class="right_b"><span class="dat">05-01-2010</span><br /><span class="col_b">Quisque non mauris nulla. </span><br />
Aliquam feugiat dignissim posuere. Nulla nisl mi, semper vel auctor ut, tincidunt semper purus. Etiam ut libero nulla, mollis porta augue. Nulla pharetra pharetra consequat. Vestibulum egestas risus ac... </div>
<div class="read_r"><a href="#"><img src="metamorph_models-images/b_read.gif" alt="" /></a></div>
<div class="right_b"><span class="dat">05-01-2010</span><br /><span class="col_b">Quisque non mauris nulla. </span><br />
Aliquam feugiat dignissim posuere. Nulla nisl mi, semper vel auctor ut, tincidunt semper purus. Etiam ut libero nulla, mollis porta augue. Nulla pharetra pharetra consequat. Vestibulum egestas risus ac... </div>
<div class="read_r"><a href="#"><img src="metamorph_models-images/b_read.gif" alt="" /></a></div>
</div>
</div>
<div style="clear: both"><img src="metamorph_models-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
<!-- content ends -->
<!-- footer begins -->
<div id="footer">
Copyright 2009. Designed by <a href="http://www.metamorphozis.com/" title="Website Templates">Website 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