metamorph_metaform
<!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: #264FA4;
text-decoration:none;
}
a:hover{
text-decoration: underline;
color: #264FA4;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background: #4F4E4E;
line-height:20px;
}
#bg {
width:1024px;
background:url(metamorph_metaform-images/bg.gif) left repeat-y;
margin: 0px auto; }
#main{
width: 1000px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
background: #000000;
}
#header { width:1000px;
padding: 0px 0px 0px 0px;
height: 222px;
background:url(metamorph_metaform-images/header.jpg) left top no-repeat;
}
#logo { font-family:Georgia, "Times New Roman", Times, serif;
color:#FFFFFF;
font-size:18px;
font-style:italic;
padding: 28px 0px 0px 634px;
height: 73px;
}
#buttons{
width: 516px;
height: 68px;
background: url(metamorph_metaform-images/menu.jpg) left top no-repeat;
text-align:center;
margin-left: 484px;
}
#buttons ul {
padding-left: 0px;
margin: 0px;
}
#buttons li {
display: inline;
}
#buttons a {
font-family: tahoma, Helvetica, sans-serif;
font-size: 16px;
font-weight:normal;
display: block;
float: left;
width: 103px;
height: 44px;
text-decoration: none;
color: #FFFFFF;
padding-top: 24px;
padding-left: 0px;
margin-left: 0px;
text-align: center;
background:url(metamorph_metaform-images/fish_but.gif) 0px 19px no-repeat;
}
#buttons a:hover {
text-decoration: underline;
background:url(metamorph_metaform-images/fish_but.gif) 0px 19px no-repeat;
}
#content{
width: 974px;
padding: 15px 0px 15px 0px;
background: #FFFFFF;
margin: 0px 13px 0px 13px;
}
#razd {
background:url(metamorph_metaform-images/razd_bg.gif) 325px repeat-y;
width: 978px;
min-height: 650px;
}
#right{
width: 673px;
margin: 0px 13px 0px 0px;
float: right;
}
.text{
padding: 10px 0px 0px 0px;
}
.img { float:left;
margin: 5px 15px 5px 0px;
}
span { color:#264FA4;
font-weight:bold;
}
.pap { color:#08245F;
font-weight:bold;
}
.dot { background: url(metamorph_metaform-images/dot.gif) center repeat-x;
height:20px;}
.line { background:url(metamorph_metaform-images/line.gif) bottom repeat-x;
padding-top: 4px;}
#col_l {float:left;
width:455px;}
#col_r {float: left;
width:186px;
margin-left:18px}
.pap_bg { background:url(metamorph_metaform-images/pap_bg.jpg) left repeat-y;}
.pap_bot { background: url(metamorph_metaform-images/pap_bot.jpg) left bottom no-repeat;
padding: 10px 20px 70px 13px;
}
.pap_top { background: url(metamorph_metaform-images/pap_top.jpg) 0px top no-repeat;}
H1{
font-family: tahoma, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:normal;
color: #375391;
padding-bottom: 5px;
text-align:center;
}
H2{
font-family: tahoma, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:normal;
color: #375391;
padding-bottom: 0px;
padding-left: 0px;
text-align: left;
}
.read{
text-align:right;
padding-right:20px;
font-weight:bold;
}
.read_pap{
text-align:right;
padding-right:0px;
font-weight:bold;
}
#left{
float:left;
width: 259px;
background: url(metamorph_metaform-images/bg_left.jpg) left 25px repeat-x;
margin-left: 8px;
}
#left ul
{
list-style: none;
padding-left:0px;
padding-top:20px;
margin: 0px;
display:block;
padding-bottom: 0px;
}
#left li{
padding-top: 9px;
background: url(metamorph_metaform-images/fish.png) 6px 10px no-repeat;
padding-left: 28px;
}
#footer{
height: 48px;
width: 1000px;
font-size: 10px;
color: #FFFFFF;
padding-top: 8px;
text-align: center;
clear:both;
padding: 30px 0px 15px 0px;
background:url(metamorph_metaform-images/futer.jpg) bottom repeat-x;
}
#footer a{
color: #FFFFFF;
font-size: 10px;
text-decoration: none;
}
#footer a:hover{
color: #FFFFFF;
font-size: 10px;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="bg">
<div id="main">
<!-- header begins -->
<div id="header">
<div id="logo"><a href="#">metamorph_metaform</a> <br />Company Name Goes Here</div>
<div id="buttons">
<ul>
<li class="first"><a href="#" title="">Home</a></li>
<li><a href="#" title="">Blog</a></li>
<li><a href="#" title="">Gallery</a></li>
<li><a href="#" title="">About Us</a></li>
<li><a href="#" title="">Contact Us</a></li>
</ul>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="content">
<div id="right">
<h2>Metamorphosis Design</h2>
<div class="text">
<img src="metamorph_metaform-images/img1.jpg" width="153" height="91" class="img" alt="" />
<span>Vestibulum odio purus, lobortis a tincidunt vitae, pellentesque ac libero.</span> <br />
Suspendisse ante lorem, sodales ac viverra in, lobortis in libero. Fusce metus diam, faucibus a ultrices in, varius id ligula. Vestibulum sed enim gravida enim semper aliquet convallis ac purus. Aenean varius dignissim tristique. Etiam ipsum risus, gravida et rutrum ut, vestibulum eget metus. Nullam viverra enim adipiscing est facilisis dictum iaculis erat...
</div>
<div class="read"><a href="#">read more</a></div><br />
<div>
<div id="col_l">
<h2>Free Website Templates</h2>
<div class="text">
<img src="metamorph_metaform-images/img2.jpg" width="102" height="141" class="img" alt="" />
<span>Donec orci quam, feugiat eget sodales at, tempus eu massa. </span> <br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst. Suspendisse at odio tellus, vitae facilisis felis. Aenean urna nunc, congue vel vulputate ac, molestie id enim. Aenean cursus felis id tellus fringilla non consequat nibh malesuada. Sed imperdiet, velit at malesuada mattis, dolor felis venenatis leo, non aliquam arcu
lectus eget arcu. Etiam sit amet nulla et est laoreet rhoncus. Donec dapibus varius velit eget volutpat. Maecenas lacus libero, hendrerit vitae malesuada sit amet, lacinia et enim. Donec convallis massa ac nisl rutrum condimentum congue commodo tortor. Maecenas eget elit est, quis luctus ante. In odio est, sollicitudin in posuere sit amet, hendrerit id dolor. Cras ut eros elit, sodales suscipit lorem. Aliquam lobortis lorem sed magna malesuada adipiscing. Morbi porttitor...
<div class="read"><a href="#">read more</a></div><br />
</div>
</div>
<div id="col_r">
<div class="pap_bg">
<div class="pap_top">
<div class="pap_bot">
<h1>Lorem ipsum</h1>
<span class="pap">Fusce eleifend turpis.</span><br />
Sit amet dui mollis semper. Nam urna tortor, tincidunt eget viverra quis, varius in tortor. Sed rutrum tempor mauris, et varius nisl...
<div class="read_pap"><a href="#">read more</a></div>
</div>
</div>
</div>
<div class="text">
<div class="line"><span>Donec vitae risus eros.</span></div>
<div class="line"><span>Sed a elit nec dui.</span></div>
<div class="line"><span>Nunc metus ligula, rhoncus nec.</span></div>
<div class="line"><span>Fusce semper gravida nibh.</span></div>
</div>
</div>
</div>
</div>
<div id="left">
<h1>Company News</h1><br />
<ul>
<li><span class="dat">05-11-2009 <br />Lorem ipsum dolor sit amet.</span><br />
Consectetur adipiscing elit. Vestibulum porttitor ligula ut risus molestie fringilla. Ut vestibulum ornare nunc quis...
<div class="read"><a href="#">read more</a></div>
<div class="dot"><img src="metamorph_metaform-images/spaser.gif" width="1" height="1" alt="" /></div>
</li>
<li><span class="dat">05-11-2009 <br />Lorem ipsum dolor sit amet.</span><br />
Consectetur adipiscing elit. Vestibulum porttitor ligula ut risus molestie fringilla. Ut vestibulum ornare nunc quis...
<div class="read"><a href="#">read more</a></div>
<div class="dot"><img src="metamorph_metaform-images/spaser.gif" width="1" height="1" alt="" /></div>
</li>
<li><span class="dat">05-11-2009 <br />Lorem ipsum dolor sit amet.</span><br />
Consectetur adipiscing elit. Vestibulum porttitor ligula ut risus molestie fringilla. Ut vestibulum ornare nunc quis...
<div class="read"><a href="#">read more</a></div>
</li>
</ul>
<br />
</div>
<div style="clear: both"><img src="metamorph_metaform-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
<!-- content ends -->
<!-- footer begins -->
<div id="footer">
Copyright 2010. Designed by <a href="http://www.metamorphozis.com/" title="Free Web Templates">Flash Web 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>
</div>
</body>
</html>
Related examples in the same category