metamorph_catsworld
<!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{
text-decoration:none;
color:#7B5C3C;
}
a:hover{
text-decoration: underline;
color:#7B5C3C;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
line-height:20px;
background:url(metamorph_catsworld-images/bg.jpg) top repeat-x #7B5C3C;
}
#main{
width: 778px;
margin: 0px auto;
padding: 11px 18px 0px 18px;
background: #FFDEAD;
}
#header { width:776px;
padding: 0px 0px 0px 0px;
height: 456px;
}
#buttons{
width: 761px;
background: url(metamorph_catsworld-images/but_bg.jpg) left top repeat-x;
text-align:center;
height:70px;
margin-right:0px;
padding-left:12px;
}
#buttons a {
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight:bold;
display: block;
float: left;
width: 151px;
height: 40px;
text-decoration: none;
color: #FFFFFF;
padding-top: 18px;
text-align: center;
margin-right: 0px;
background: url(metamorph_catsworld-images/but.jpg) left top no-repeat;
}
#buttons a:hover {
text-decoration: underline;
background: url(metamorph_catsworld-images/b_over.png) left top repeat-x;
color:#FFFFFF;
}
#logo{
background: url(metamorph_catsworld-images/logo.jpg) center top no-repeat;
height: 326px;
padding: 45px 0px 0px 33px;
}
#logo a {
font-family:Georgia, "Times New Roman", Times, serif;
text-decoration: none;
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
}
#logo H3 a{
font-size: 10px;
background:none;
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic;
}
#content{
width: 776px;
padding: 0px 0px 0px 0px;
background: url(metamorph_catsworld-images/top.gif) no-repeat #FFFFFF;
}
#content_bot { background:url(metamorph_catsworld-images/bot.gif) bottom no-repeat;
padding: 0px 0px 0px 19px;}
#left{
width: 460px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
float:left;
background: url(metamorph_catsworld-images/left.jpg) top repeat-x;
min-height: 590px;
}
.tit_bot { background: url(metamorph_catsworld-images/tit_bot.png) center top no-repeat;
padding: 7px 6px 0px 13px;
}
.text{
padding: 10px 0px 0px 0px;
}
.img { float:left;
margin: 2px 17px 5px 0px;
}
span { color:#7B5C3C;
font-weight:bold;
}
.color { color:#3774A0;}
.dat { text-decoration:underline;}
.AC {
height: 25px;
padding: 5px 0px 0px 0px;}
.munth {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight:bold;
background:url(metamorph_catsworld-images/fish_m.gif) 0px 3px no-repeat;
padding: 0px 0px 0px 24px;
width: 150px;
float:left;
height:25px;}
.com {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight:bold;
background: url(metamorph_catsworld-images/fish_c.gif) 6px 6px no-repeat;
padding: 0px 0px 0px 24px;
width: 90px;
float: right;
height:25px;}
#right{
float:right;
width: 255px;
margin-right: 0px;
background: url(metamorph_catsworld-images/right.jpg) top repeat-x;
padding: 7px 0px 0px 0px;
margin-right: 8px;
}
#right .list
{
list-style: none;
padding-left: 25px;
padding-top: 5px;
padding-bottom: 0px;
margin: 0px;
display:block;
background: url(metamorph_catsworld-images/fish_l.gif) 0px 7px no-repeat;
}
#right H1{
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:normal;
color: #FFFFFF;
height: 29px;
padding-top: 8px;
padding-left: 24px;
text-align: left;
background: url(metamorph_catsworld-images/tit_r.gif) center top no-repeat;
}
#left H2{
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:normal;
color: #892825;
padding-bottom: 5px;
padding-left: 3px;
padding-top: 16px;
text-align:left;
background: url(metamorph_catsworld-images/tit.gif) bottom repeat-x;
}
.read{
text-align:right;
padding-right:5px;
padding-top: 5px;
}
.read_r{
text-align:right;
padding-right:5px;
padding-top: 6px;
padding-bottom: 7px;
background: url(metamorph_catsworld-images/tit.gif) bottom repeat-x;
}
.read_r a {
color: #FA0000;
font-size: 11px;
font-weight:bold;
font-family:Tahoma, Helvetica, sans-serif}
#right ul
{
list-style: none;
padding-left:0px;
padding-top:0px;
margin: 0px;
display:block;
padding-bottom: 0px;
}
#right li{
padding-top: 5px;
background: url(metamorph_catsworld-images/fish_s.gif) 24px 13px no-repeat;
padding-left: 39px;
}
.ban {
width: 242px;
background:url(metamorph_catsworld-images/lb_bg.jpg) left top no-repeat;
height:176px;}
.ban H3 {
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
padding: 9px 0px 9px 0px;}
.text_ban {
color:#FFFFFF;
padding: 0px 15px 0px 19px}
.read_ban {
text-align:right;
margin: 5px 10px 0px 0px;
}
.ban a {
font-weight:bold;
color:#FF6700;
text-decoration:underline;
}
.ban a:hover {
text-decoration:none ;
color:#FF6700;
}
#footer{
height: 54px;
width: 776px;
font-size: 12px;
color: #7B5C3C;
text-align: center;
clear:both;
padding: 10px 0px 0px 0px;
}
#footer a{
color: #7B5C3C;
font-size: 12px;
text-decoration: none;
}
#footer a:hover{
color: #7B5C3C;
font-size: 12px;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="main">
<!-- header begins -->
<div id="header">
<div id="buttons">
<div ><a href="#" class="razd_but" title="">Home</a></div>
<div ><a href="#" class="razd_but" title="">Blog</a></div>
<div ><a href="#" class="razd_but" title="">Gallery</a></div>
<div ><a href="#" class="razd_but" title="">About Us</a></div>
<div ><a href="#" title="">Contact Us</a></div>
</div>
<div id="logo"><a href="#">metamorph_catsworld</a>
<h3><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h3>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="content">
<div id="content_bot">
<div id="left">
<h2>Metamorphosis Design</h2>
<div class="text"><span >Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> <br />
Proin congue ante ut magna dignissim euismod. Nam sem lacus, pellentesque at porttitor aliquam, lobortis a nulla. Curabitur non nibh sit amet turpis interdum ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut nunc urna, tempor sed scelerisque a, lacinia ac elit. Mauris congue dignissim consectetur. Curabitur iaculis cursus vestibulum. Nulla id mollis mi. Donec varius congue elementum. In nibh sapien, semper a hendrerit nec, sagittis nec turpis. Sed molestie fermentum ligula ac commodo. Vestibulum ac lacus </div>
<div class="AC">
<div class="munth"><a>April 11, 2010</a></div><div class="com"><a>Comments (14)</a></div><br />
</div>
<h2>Second Text Header Goes Here</h2>
<div class="text"><img src="metamorph_catsworld-images/img1.jpg" width="102" height="69" class="img" alt="" /><span>Dolor sit amet, consectetur adipiscing</span> <br />
Proin congue ante ut magna dignissim euismod. Nam sem lacus, pellentesque at porttitor aliquam, lobortis a nulla. Curabitur non nibh sit amet turpis interdum ultricies. Class<br /></div>
<div class="text"> <span>Dolor am sem lacus, pntesqam sem lacus, pellentesq,</span><br />
Proin congue ante ut magna dignissim euismod. Nam sem lacus, pellentesque at porttitor aliquam, lobortis a nulla. Curabitur non nibh sit amet turpis interdum ultri-cies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos</div>
<div class="text"><img src="metamorph_catsworld-images/img2.jpg" width="102" height="69" class="img" alt="" /><span>Dolor sit amet, consectetur adipiscing</span> <br />
Proin congue ante ut magna dignissim euismod. Nam sem lacus, pellentesque at porttitor aliquam, lobortis a nulla. Curabitur non nibh sit amet turpis interdum ultricies. Class </div><br />
</div>
<div id="right">
<h1>Archives</h1>
<div class="tit_bot">
<ul>
<li><a href="">Donec egestas purus sed nisl </a></li>
<li><a href="">Sed dignissim placerat tellus </a></li>
<li><a href="">Donec egestas purus sed nisl</a></li>
<li><a href="">Nulla a diam nec magna </a></li>
<li><a href="">Sed et arcu porta quam aliquam </a></li>
<li><a href="">Morbi metus sapien, congue</a></li>
<li><a href="">Nullam aliquet nisl eu mi convallis </a></li>
<li><a href="">Praesent eros velit, vulputate id pretium in</a></li>
</ul>
<br />
</div>
<h1>Latest News</h1>
<div class="tit_bot">
<div class="list">Maecenas fringilla ante vel dui porttitor condimentum.</div>
<div class="read_r"><a href="#">read more</a></div>
<div class="list">Etiam pellentesque est eu sem pellentesque posuere.</div>
<div class="read_r"><a href="#">read more</a></div>
<div class="list">Aenean sit amet mi quis odio lobortis fermentum.</div>
<div class="read_r"><a href="#">read more</a></div><br />
</div>
</div>
<div style="clear: both"><img src="metamorph_catsworld-images/spaser.gif" alt="" width="1" height="1" /></div>
<!-- content ends -->
</div>
</div>
<!-- footer begins -->
<div id="footer">
Copyright 2009. Designed by <a href="http://www.metamorphozis.com/" title="Free Website Templates">Free 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