metamorph_ball
<!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: #B4B4B4;
line-height: 20px;
}
#bg2 {
width: 100%;
height: 100%;
background: url(metamorph_ball-images/bg_top.gif) top repeat-x;}
#header {
width:1016px;
background: url(metamorph_ball-images/header.jpg) left top no-repeat;
height: 376px;
}
#logo {
height: 304px;
width: 100%;
background: url(metamorph_ball-images/big_img.jpg) left top no-repeat;
}
#logo H2 {
font-family: Arial, Helvetica, sans-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_l {
float:left;
width:290px;
padding: 185px 0px 0px 14px;
}
.logo_r {
float: right;
width:360px;
padding: 67px 36px 0px 0px;
}
H5 {
font-style:italic;
font-size: 16px;
color: #FFFFFF;
padding: 0px 0px 10px 33px;
font-weight:100;}
.f_ibw {
font-style:italic;
font-size: 12px;
color: #FFFFFF;
font-weight:bold;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-transform: none;
font-weight:100;
}
#buttons{
text-align:center;
height: 66px;
margin-left: 0px;
padding-top: 0px;
background: url(metamorph_ball-images/buttons.jpg) left top no-repeat;
}
#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: 19px;
height: 40px;
}
.but {
width: 201px;
background: url(metamorph_ball-images/but.png) left top no-repeat;
}
#buttons .but:hover {
text-decoration: underline;}
.razd_b {
float:left;
width:2px;
height:43px;
background: url(metamorph_ball-images/b_razd.gif) 0px 15px no-repeat;}
#main {
width: 1016px;
margin: 0px auto;
padding-top: 8px; }
#content{
width: 1016px;
background: url(metamorph_ball-images/cont_razd.gif) 296px 0px repeat-y;
}
#left{
width: 290px;
float: left;
color:#000000;
}
.list { padding: 0px 0px 20px 0px;}
.opt {
background:url(metamorph_ball-images/opt.gif) bottom repeat-x;
height: 38px;}
.opt_a {
padding: 10px 0px 0px 33px;
background:url(metamorph_ball-images/opt_a.gif) 10px 14px no-repeat;
}
.opt_a:hover {
padding: 10px 0px 0px 33px;
background: url(metamorph_ball-images/opt_ah.gif) 10px 14px no-repeat;
}
.opt_a a {
color:#000000;
text-decoration:none;}
.left_b {
padding: 3px 15px 0px 53px;
font-size: 12px;
line-height: 18px;
}
.box10 {
background: url(metamorph_ball-images/img_12.gif) 7px 10px no-repeat #EFEFEF;
width: 288px;
}
.box11{
background: url(metamorph_ball-images/img_13.gif) 7px 10px no-repeat #EFEFEF;
width: 288px;}
.box_bot {
height: 9px;
background:url(metamorph_ball-images/box_bot.gif) left bottom no-repeat;
width: 288px;}
.box_top {
height: 9px;
background: url(metamorph_ball-images/box_top.gif) left top no-repeat;
width: 288px;}
.text{
padding: 10px 10px 10px 12px;
line-height: 18px;
background:url(metamorph_ball-images/bg_text.jpg) left top no-repeat;
}
.text a{
color: #F77900;
font-weight: bold
}
#left .img { float:left;
margin: 6px 15px 5px 0px;
}
#right .img { float:left;
margin: 3px 15px 3px 0px;
}
#left span { color:#F37901;
text-decoration: underline;
font-size:12px;
font-weight:bold;
}
#right span { color:#F37901;
text-decoration: none;
font-size:12px;
font-weight:bold;
}
#left H1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #FFFFFF;
text-align: center;
padding: 17px 0px 20px 0px;
background:url(metamorph_ball-images/tit_left.jpg) left top no-repeat;
}
#right H1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #ffffff;
text-align:left;
padding: 17px 0px 20px 13px;
background: url(metamorph_ball-images/tit_right.jpg) 0px 0px no-repeat;
}
.title { background: url(metamorph_ball-images/right_tit2.gif) left bottom repeat-x;}
.read{
text-align:right;
padding-right:5px;
padding-top: 10px;
font-weight:bold;
font-size:12px;
}
#right{
float: right;
width: 710px;
padding: 0px 0px 0px 0px;
}
#footer{
height: 54px;
font-size: 12px;
color: #ffffff;
text-align: center;
padding: 13px 0px 0px 0px;
background: url(metamorph_ball-images/footer.jpg) 0px 8px no-repeat;
}
#footer a{
color: #ffffff;
font-size: 12px;
text-decoration: none;
}
#footer a:hover{
color: #ffffff;
font-size: 12px;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="main">
<!-- header begins -->
<div id="header">
<div id="buttons">
<a href="#" class="but" title="">Home</a><div class="razd_b"></div>
<a href="#" class="but" title="">Blog</a><div class="razd_b"></div>
<a href="#" class="but" title="">Gallery</a><div class="razd_b"></div>
<a href="#" class="but" title="">About us</a><div class="razd_b"></div>
<a href="#" class="but" title="">Contact us</a>
</div>
<div id="logo">
<div class="logo_l">
<a href="#">metamorph_ball</a>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
</div>
<div class="logo_r">
<h5>Welcome to Our Website</h5>
<span class="f_ibw">Curabitur ac metus arcu. Cras ac sollicitudin sem. </span><br />
Aenean nec risus nisi, a gravida velit. Vestibulum blandit quam in nunc dignissim ornare. Pellentesque id sapien nec nibh laoreet ultrices et at urna. Aenean quis massa justo, in pellentesque
<div class="read"><a href="#"><img src="metamorph_ball-images/read_more.png" alt=""/></a></div>
</div>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="content">
<div id="right">
<h1>Metamorphosis Design</h1>
<div class="text">
<img src="metamorph_ball-images/img1.jpg" class="img" width="122" height="92" alt="" /><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><br />
Vivamus sagittis erat hendrerit orci porttitor fringilla. Donec quis ante convallis massa pharetra condimentum quis eget massa. Donec fringilla elementum lorem sit. amet tempor. Aliquam id arcu ac turpis pulvinar sagittis ac eget libero leo a erat porttitor vestibulum in ut dui. Phasellus et augue et nunc aliquet pellentesque. Fusce commodo sagittis metus, in faucibus lacus placerat in.<br /><br />
<span>Sed fringilla faucibus euismod. </span><br />
Donec eleifend vehicula ligula, a volutpat ante sollicitudin non. Maecenas euismod pharetra magna et commodo. Nam sed arcu et urna consequat ornare. Donec vestibulum varius mi, eget pulvinar orci posuere eget. Cras gravida aliquam
<div class="read"><a href="#"><img src="metamorph_ball-images/read_more.png" alt=""/></a></div>
</div>
<h1>FREE WEBSITE TEMPLATES USEFUL LINKS</h1>
<div class="text">
<ol>
<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>
</ol>
<div class="read"><a href="#"><img src="metamorph_ball-images/read_more.png" alt=""/></a></div>
</div>
<h1>Free Website Templates</h1>
<div class="text">
<img src="metamorph_ball-images/img2.jpg" class="img" width="122" height="92" alt="" /><span>Aliquam a dui ligula, eget faucibus sapien.</span><br />
Aliquam eu augue augue. Nullam urna elit, ornare quis congue at, interdum ac nulla. Etiam gravida quam ut diam fermentum eu fringilla lacus rhoncus. Etiam eleifend ligula ac nunc sagittis non elementum sapien luctus. Curabitur quis elit qua.<br />
<br /><br />
<span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </span><br />
Vestibulum dictum adipiscing tortor, in condimentum felis tincidunt nec. Fusce pharetra cursus leo, sed rhoncus nunc vehicula eu. Phasellus tempor lobortis lacus non tristique. Phasellus eu velit scelerisque justo aliquet condimentum. Class
<div class="read"><a href="#"><img src="metamorph_ball-images/read_more.png" alt=""/></a></div>
</div>
</div>
<div id="left">
<h1>Categories</h1>
<div class="list">
<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="">Cras in ante quam</a>
</div>
</div>
<div class="opt"><div class="opt_a">
<a class="" href="">Phasellus ege</a>
</div>
</div>
<div class="opt"><div class="opt_a">
<a class="" href="">Donec luctus nunc</a>
</div>
</div>
<div class="opt"><div class="opt_a">
<a class="" href="">Nam varius arcu </a>
</div>
</div>
</div>
<h1>Company News</h1>
<div class="box10">
<div class="box_top"></div>
<div class="left_b"><span class="w">Friday, June 12, 2010</span><br />
In hac habitasse platea dictumst. Pel- lentesque porttitor urna dictum mauris
<div class="read"><a href="#"><img src="metamorph_ball-images/read_more.png" alt=""/></a></div>
</div>
<div class="box_bot"></div>
</div>
<div style="height:7px"></div>
<div class="box10">
<div class="box_top"></div>
<div class="left_b"><span class="w">Saturday, June 13, 2010</span><br />
In hac habitasse platea dictumst. Pel- lentesque porttitor urna dictum mauris
<div class="read"><a href="#"><img src="metamorph_ball-images/read_more.png" alt="" /></a></div>
</div>
<div class="box_bot"></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>
</body>
</html>
Related examples in the same category