metamorph_bubblesonblue
<!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_bubblesonblue-images/bg.jpg) top center no-repeat #0E76BD;
line-height: 18px;
padding-bottom: 23px;
}
#main {
width: 1014px;
margin: 0px auto;
}
#header {
width:100%;
background: url(metamorph_bubblesonblue-images/header.jpg) left top no-repeat;
height: 323px;
}
#logo { font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:18px;
font-style:italic;
padding: 62px 0px 0px 667px;
background: url(metamorph_bubblesonblue-images/big_img.jpg) left top no-repeat;
height: 60px;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 18px;
color: #FFFFFF;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-transform: none;
font-weight:100;
}
#buttons{
width: 665px;
background: url(metamorph_bubblesonblue-images/bg_but.jpg) left top no-repeat;
text-align:center;
height: 46px;
margin-left: 350px;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
display: block;
float: left;
height: 34px;
text-decoration: none;
color: #FFFFFF;
padding-top: 12px;
padding-left: 0px;
text-align: center;
}
.but1 { background: url(metamorph_bubblesonblue-images/but1.png) left top no-repeat;
width: 134px;
}
.but1:hover { background:url(metamorph_bubblesonblue-images/but11.png) left top no-repeat;}
.but2 { background: url(metamorph_bubblesonblue-images/but2.png) left top no-repeat;
width: 132px;
}
.but2:hover { background:url(metamorph_bubblesonblue-images/but22.png) left top no-repeat;}
.but3 { background: url(metamorph_bubblesonblue-images/but3.png) left top no-repeat;
width: 132px;
}
.but3:hover { background:url(metamorph_bubblesonblue-images/but33.png) left top no-repeat;}
.but4 { background: url(metamorph_bubblesonblue-images/but4.png) left top no-repeat;
width: 132px;
}
.but4:hover { background:url(metamorph_bubblesonblue-images/but44.png) left top no-repeat;}
.but5 { background: url(metamorph_bubblesonblue-images/but5.png) left top no-repeat;
width: 135px;
}
.but5:hover { background:url(metamorph_bubblesonblue-images/but55.png) left top no-repeat;}
#buttons a:hover {
text-decoration: underline;
}
#box_all {
height: 251px;
background:url(metamorph_bubblesonblue-images/all_box.jpg) left top no-repeat;
padding-top: 10px;}
#box_all h1 {
text-align:center;
font-size:18px;
color:#FFFFFF;
font-weight:100;
padding: 12px 0px 23px 0px;}
#box_all .text {
padding: 0px 10px 0px 20px;}
.box_munth {
float: left;
width: 132px;
padding: 0px 0px 0px 13px}
.munth {
color:#FFFFFF;
font-weight:bold;
background: url(metamorph_bubblesonblue-images/box_fish1.png) 0px 11px no-repeat;
padding: 7px 0px 7px 28px;
text-decoration:none;}
.munth a{color:#FFFFFF;
font-weight:bold;
text-decoration:none;}
.munth:hover {
text-decoration: none;
background: url(metamorph_bubblesonblue-images/box_fish.png) 0px 11px no-repeat;
}
h5 {
font-weight: 100;
font-size:18px;
color:#10156F;
padding: 13px 0px 5px 0px}
.box {
width: 206px;
height: 240px;
float: left;
}
.box_razd {float:left; width: 10px; height: 10px;}
.box1 { background:url(metamorph_bubblesonblue-images/box1.png) ;}
.box2 { background:url(metamorph_bubblesonblue-images/box2.png) ;}
.box3 { background:url(metamorph_bubblesonblue-images/box3.png) ;
width: 211px}
.box4 { background:url(metamorph_bubblesonblue-images/box4.png) ;}
.b { color: #0E76BD;
font-weight:100;
font-style:italic;}
.g { color: #0D748A;
font-weight:100;
font-style:italic;}
.gr { color: #0E9A40;
font-weight:100;
font-style:italic;}
.o { color: #DE7C09;
font-weight:100;
font-style:italic;}
.img_box { float:left;
margin: 6px 7px 3px 0px;
}
#top_tb {
width: 1014px;
height: 19px;
background: url(metamorph_bubblesonblue-images/tb_top.jpg) right bottom no-repeat #FFFFFF;
}
#bot_tb {
width: 1014px;
height: 19px;
background: url(metamorph_bubblesonblue-images/tb_bot.jpg) right top no-repeat #FFFFFF;
}
#tb{
width: 1014px;
padding: 0px 0px 0px 0px;
background: url(metamorph_bubblesonblue-images/tb_bg.gif) right repeat-y #FFFFFF;
margin: 0px 0px 0px 0px;
}
#left{
width: 330px;
margin: 0px 0px 0px 12px;
float: left;
color:#000000;
}
.right_b {
padding-left: 52px;
padding-right: 5px;
}
.fish_10 { background: url(metamorph_bubblesonblue-images/fish_10.gif) 0px 0px no-repeat;}
.fish_11 { background: url(metamorph_bubblesonblue-images/fish_11.gif) 0px 0px no-repeat;}
.text{
padding: 0px 0px 0px 0px;
}
.img { float:left;
margin: 7px 16px 3px 0px;
}
.img_r { float: right;
margin: 7px 0px 3px 16px;
}
span {font-weight:bold;}
#left span { color:#000000;
font-weight:bold;
font-size:14px;
}
#right span {
font-weight:bold;
}
.bl {color:#2A3A83;}
#left H1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #2A3A83;
text-align:left;
padding: 5px 0px 10px 0px;
}
#right H1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #2A3A83;
text-align:left;
padding: 5px 0px 10px 0px;
}
.read{
text-align:right;
padding-right:5px;
padding-top: 6px;
font-weight:bold;
}
.pad_view {padding-right:15px;}
.read a{
color: #0056CC;
text-decoration: underline;}
.read a:hover {
text-decoration:none;}
#right{
float: right;
width: 620px;
margin-right: 18px;
padding: 0px 0px 0px 0px;
}
.col { width: 620px;}
.col_left { float:left;
width: 203px;}
.images {
height: 200px;
padding-top: 3px;}
.img_col { float:left;
margin: 7px 7px 0px 0px;}
.col_right { float: right;
width: 417px;
padding-top: 8px;}
#footer{
height: 50px;
width: 100%;
font-size: 12px;
color: #FFFFFF;
text-align: center;
clear:both;
padding: 13px 0px 0px 0px;
background: url(metamorph_bubblesonblue-images/footer.jpg) 0px 0px 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="but1" title="">Home</a>
<a href="#" class="but2" title="">Blog</a>
<a href="#" class="but3" title="">Gallery</a>
<a href="#" class="but4" title="">About us</a>
<a href="#" class="but5" title="">Contact us</a>
</div>
<div id="logo"><a href="#">metamorph_bubblesonblue</a>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
</div>
</div>
<!-- header ends -->
<!-- table begins -->
<div id="box_all">
<div class="box_munth">
<h5>Categories</h5>
<div class="munth"><a href="#" >January 2010</a></div>
<div class="munth"><a href="#" >February 2010</a></div>
<div class="munth"><a href="#" >March 2010</a></div>
<div class="munth"><a href="#" >April 2010</a></div>
<div class="munth"><a href="#" >May 2010</a></div>
<div class="munth"><a href="#" >June 2010</a></div>
</div>
<div class="box box1">
<h1>Pellentesque habitant</h1>
<div class="text"><img src="metamorph_bubblesonblue-images/img1.jpg" width="90" height="60" class="img_box" alt="" /><span class="b">Pellentesque habitant morbi tristique senectus.</span><br />
Netus et malesuada fames ac turpis egestas. Duis ullamcor- per felis ac nibh fringilla tristique. Mauris malesuada
<div class="read"><a href="#" >read more</a></div>
</div>
</div><div class="box_razd"></div>
<div class="box box2">
<h1>Lorem ipsum dolor</h1>
<div class="text"><img src="metamorph_bubblesonblue-images/img2.jpg" width="90" height="60" class="img_box" alt="" /><span class="o">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
Aliquam arcu nulla, porttitor a semper non, tempor id sem. Vivamus eget suscipit lorem. Cras commodo, tellus eu...
<div class="read"><a href="#" >read more</a></div>
</div>
</div><div class="box_razd"></div>
<div class="box box3">
<h1>Nulla facilisi</h1>
<div class="text"><img src="metamorph_bubblesonblue-images/img3.jpg" width="90" height="60" class="img_box" alt="" /><span class="g">Nulla facilisi. Curabitur tristique magna eu.</span>Sapien pharetra ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<div class="read"><a href="#" >read more</a></div>
</div>
</div><div class="box_razd"></div>
<div class="box box4">
<h1>Nunc mauris tortor</h1>
<div class="text"><img src="metamorph_bubblesonblue-images/img4.jpg" width="90" height="60" class="img_box" alt="" /><span class="gr">Nunc mauris tortor, feugiat quis ullamcor- per eget. . </span>
Hendrerit eget dui. Suspend- isse potenti. Mauris luctus erat sit amet est consequat vulpu- tate. Donec non placerat erat.
<div class="read"><a href="#" >read more</a></div>
</div>
</div>
</div>
<div id="top_tb"></div>
<div id="tb">
<div id="right">
<h1>Metamorphosis Design</h1>
<div class="text"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><br />
<div class="col">
<div class="col_left">
<div class="images" >
<img src="metamorph_bubblesonblue-images/img5.jpg" width="90" height="60" class="img_col" alt="" /><img src="metamorph_bubblesonblue-images/img6.jpg" width="90" height="60" class="img_col" alt="" /><br />
<img src="metamorph_bubblesonblue-images/img7.jpg" width="90" height="60" class="img_col" alt="" /><img src="metamorph_bubblesonblue-images/img8.jpg" width="90" height="60" class="img_col" alt="" /><br />
<img src="metamorph_bubblesonblue-images/img9.jpg" width="90" height="60" class="img_col" alt="" /><img src="metamorph_bubblesonblue-images/img10.jpg" width="90" height="60" class="img_col" alt="" /><br />
</div>
<div class="read pad_view"><a href="#">view more</a></div>
</div>
<div class="col_right">
<span class="bl">Donec posuere nisi non dolor scelerisque vehicula.</span> Fusce sollicitudin felis eget nibh tincidunt lobortis. Donec malesuada, neque eu ornare auctor, quam mauris dictum quam, eget condimentum risus massa ut purus.<br /><br />
<span class="bl">Sed metus ligula, pulvinar vitae vestibulum id, placerat eget risus.</span> Sed eros odio, tristique nec scelerisque eu, sollicitudin et libero. Quisque mi magna, laoreet ac pulvinar a, dapibus ut elit. Ut ac odio at mi dictum dictum et nec tortor. <br />
<br />
<span class="bl">Suspendisse potenti.</span> Aliquam ipsum massa, laoreet et volutpat vel, biben- dum a justo. Fusce eget odio nibh, in faucibus enim. Praesent in risus nec </div>
<div class="read"><a href="#"> read more</a></div>
</div>
</div>
</div>
<div id="left">
<h1>Company News</h1>
<div class="right_b fish_10"><span>Friday, Apr.10, 2010</span><br />
Nulla facilisi. Curabitur tristique magna eu sapien pharetra ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus gravida odio ut erat volutpat <br />
<div class="read"><a href="#"> read more</a></div>
<br />
</div>
<div class="right_b fish_11"><span>Saturday, Apr.11, 2010</span><br />
Nulla facilisi. Curabitur tristique magna eu sapien pharetra ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus gravida odio ut erat volutpat <br />
<div class="read"><a href="#"> read more</a></div>
</div>
</div>
<div style="clear: both"><img src="metamorph_bubblesonblue-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
<div id="bot_tb"></div>
<!-- table ends -->
<!-- footer begins -->
<div id="footer">
Copyright 2010. Designed by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash 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