metamorph_bubbleblue_lt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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="" />
<!-- Begin JavaScript -->
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.tools.js"></script>
<script type="text/javascript" src="lib/jquery.custom.js"></script>
<style type='text/css'>
/*
Design by Metamorphosis Design
http://www.metamorphozis.com
Released for free under a Creative Commons Attribution 2.5 License
*/
*{
margin: 0px;
padding: 0px;
}
img{
padding: 0px;
border: none;
}
a{
color: #000000;
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #a7001c;
}
html{
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #232323;
background: #000000 url(metamorph_bubbleblue_lt-images/bg.jpg) repeat-x top;
height: 100%;
}
h2{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #ffffff;
padding-bottom: 10px;
}
h3{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #ffffff;
padding-bottom: 10px;
}
h4{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #ffffff;
background: url(metamorph_bubbleblue_lt-images/title_1.jpg) no-repeat top left;
width: 989px;
height: 29px;
padding: 10px 0px 10px 15px;
}
h5{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #143aef;
padding-bottom: 10px;
}
#bg_bubble{
background: url(metamorph_bubbleblue_lt-images/bg_bubble.jpg) no-repeat top center;
min-height: 100%;
}
#wrap{
width: 1024px;
margin: 0 auto;
}
#logo{
text-align: right;
padding: 30px 20px 0px 0px;
height: 70px;
}
#logo h1 a{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: normal;
color: #ffffff;
}
#logo small{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic;
font-weight: normal;
color: #ffffff;
}
/*Menu*/
#menu{
width: 354px;
float: left;
}
#menu ul {
padding-left: 0px;
list-style: none;
}
#menu ul li a{
font-family: Arial,Helvetica,sans-serif;
font-size: 24px;
color: #ffffff;
font-weight: normal;
text-decoration: none;
display: block;
background: url(metamorph_bubbleblue_lt-images/menu_bg.png) repeat-x bottom;
height: 25px;
padding-top: 42px;
}
#menu ul li a:hover, #menu ul li .active{
text-align: center;
}
/*header*/
#header_img{
background: url(metamorph_bubbleblue_lt-images/header.jpg) no-repeat;
width: 660px;
height: 338px;
float: right;
}
/*content*/
#content{
width: 1024px;
clear: both;
padding-top: 15px;
}
#content_top{
height: 10px;
background: url(metamorph_bubbleblue_lt-images/content_top.jpg) no-repeat;
}
#content_bg{
padding: 0px 10px 0px 10px;
background: #ffffff;
}
#content_bg p a{
color: #143aef;
}
#content_bot{
height: 10px;
background: url(metamorph_bubbleblue_lt-images/content_bot.jpg) no-repeat;
}
.gray_top_box{
clear: both;
background: url(metamorph_bubbleblue_lt-images/grey_top_box.jpg) no-repeat bottom;
height: 10px;
padding-top: 20px;
}
.gray_bg_box{
background: url(metamorph_bubbleblue_lt-images/grey_bot_bg.jpg) left repeat-y;
}
.grey_box_left{
width: 477px;
padding: 0px 10px 0px 10px;
float:left;
}
.grey_box_right{
margin-left: 10px;
width: 477px;
padding: 0px 10px 0px 10px;
float: right;
}
.gray_bot_box{
clear: both;
background: url(metamorph_bubbleblue_lt-images/grey_bot_box.jpg) no-repeat;
height: 10px;
}
/*footer*/
#footer{
clear: both;
padding: 15px 0px 0px 0px;
}
#footer_con_bg{
background: url(metamorph_bubbleblue_lt-images/footer_con_bg.jpg) repeat-y center;
}
#footer_con_top{
background: url(metamorph_bubbleblue_lt-images/footer_con_top.jpg) no-repeat top;
}
#footer_con_bot{
background: url(metamorph_bubbleblue_lt-images/footer_con_bot.jpg) no-repeat bottom;
min-height: 86px;
padding: 10px;
color: #000000;
}
#footer_con_bot p{
color: #000000;
}
#footer_bot{
text-align: center;
color: #ffffff;
padding-top: 20px;
padding-bottom: 20px;
clear: both;
background: url(metamorph_bubbleblue_lt-images/footer.png) no-repeat center top;
min-height: 33px;
}
#footer_bot a{
color: #ffffff;
}
.foot_col1, .foot_col2, .foot_col3, .foot_col4{
float: left;
}
.foot_col1{
width: 245px;
}
.foot_col2{
width: 210px;
padding-left: 20px;
}
.foot_col3{
width: 230px;
padding-right: 40px;
}
.foot_col4{
width: 230px;
padding-left: 20px;
}
.button_box{
padding-top: 40px;
}
.button_box a{
padding-right: 10px;
}
.ls{
list-style: none;
padding-left: 0px;
}
.ls li{
margin-bottom: 7px;
}
.ls li a{
background: url(metamorph_bubbleblue_lt-images/ls.png) no-repeat 0px 4px;
padding-left: 15px;
color: #000000;
font-weight: normal;
}
.ls li a:hover{
color: #ffffff;
}
.pad_left{
padding-left: 30px;
margin-bottom: 5px;
}
/*read*/
.read{
float: right;
padding-right: 10px;
padding-top: 5px;
}
.read a{
width: 68px;
height: 16px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #143aef;
display:block;
text-align: right;
padding-right: 4px;
background: url(metamorph_bubbleblue_lt-images/read_more.png) no-repeat bottom right;
}
.read2{
float: right;
padding-right: 10px;
padding-top: 3px;
}
.read2 a{
width: 68px;
height: 17px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #ffffff;
display:block;
text-align: right;
padding-right: 6px;
background: url(metamorph_bubbleblue_lt-images/read_more2.png) no-repeat bottom right;
}
.clear{
clear: both;
}
/*about*/
.content_left{
width: 666px;
float: left;
}
.content_left h6{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #ffffff;
background: url(metamorph_bubbleblue_lt-images/title_2.jpg) no-repeat top left;
width: 651px;
height: 29px;
padding: 10px 0px 10px 15px;
}
.content_right{
width: 318px;
float: right;
}
.content_right h6{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #ffffff;
background: url(metamorph_bubbleblue_lt-images/title_3.jpg) no-repeat top left;
width: 303px;
height: 29px;
padding: 10px 0px 10px 15px;
}
.border{
height:1px;
background: url(metamorph_bubbleblue_lt-images/border.jpg) repeat-x center;
clear: both;
padding-bottom: 10px;
padding-top: 10px;
}
.date_news{
text-decoration: underline;
}
/*contact*/
#contact_form fieldset {
border: none;
}
#contact_form input {
margin-bottom: 5px;
}
#contact-submit{
width: 72px;
height: 15px;
color: #ffffff;
background: url(metamorph_bubbleblue_lt-images/read_more2.png);
background-repeat:no-repeat;
background-position:left bottom;
border: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
}
#contact-clear{
width: 72px;
height: 15px;
color: #ffffff;
background: url(metamorph_bubbleblue_lt-images/read_more2.png);
background-repeat:no-repeat;
background-position:left bottom;
border: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
float: right;
}
#con_name, #con_email, #con_website {
width: 646px;
height: 24px;
padding-top: 0px;
padding-left: 10px;
padding-right: 10px;
border: none;
background: url(metamorph_bubbleblue_lt-images/input.jpg);
background-repeat:no-repeat;
background-position:left top;
color: #ffffff;
padding-bottom: 5px;
}
#con_mess {
width: 646px;
height: 86px;
padding-top: 4px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 15px;
border: none;
background: url(metamorph_bubbleblue_lt-images/message.jpg);
background-repeat:no-repeat;
background-position:left top;
color: #ffffff;
margin-bottom: 10px;
}
.contact_news{
padding: 0px 5px 10px 5px;
}
/*gallery*/
.row {
padding-left: 1px;
height: 235px;
width: 1004px;
}
.box_img2 {
width: 314px;
height: 270px;
background: url(metamorph_bubbleblue_lt-images/gallery_bg.jpg) 0px 0px no-repeat;
padding: 10px 0px 10px 10px;
float:left;
}
.box_razd {
width: 14px;
height: 50px;
float: left;
}
.box_img2 h1 {
font-family: Arial, Helvetica, sans-serif;
font-size:24px;
font-weight: 100;
color: #002380;
text-align: left;
padding: 8px 0px 3px 0px;
}
.g_size {
width: 304px;
height: 165px;
display: block;
padding-bottom: 10px;
}
.pirobox_gal1
{
width: 304px;
height: 165px;
display: block;
}
/*blog*/
.ls2{
list-style: none;
padding-left: 0px;
}
.ls2 li{
background: url(metamorph_bubbleblue_lt-images/border.jpg) repeat-x bottom;
margin-bottom: 7px;
padding: 0px 0px 5px 0px;
}
.ls2 li a{
background: url(metamorph_bubbleblue_lt-images/ls2.jpg) no-repeat 0px 4px;
padding-left: 15px;
color: #000000;
font-weight: normal;
}
.ls2 li a:hover{
color: #143aef;
}
.blog_news{
padding-bottom:10px;
}
.news_bar{
padding-bottom:3px;
background: url(metamorph_bubbleblue_lt-images/border.jpg) repeat-x bottom;
margin-bottom: 10px;
}
.news_bar p, .news_bar p a{
color: #143aef;
font-weight: normal;
}
.calendar{
background: url(metamorph_bubbleblue_lt-images/cal_icon.jpg) no-repeat 0px 0px;
float: left;
padding-left: 20px;
padding-right: 20px;
}
.user{
background: url(metamorph_bubbleblue_lt-images/user_icon.jpg) no-repeat 0px 0px;
float: left;
padding-left: 20px;
padding-right: 20px;
}
.com{
background: url(metamorph_bubbleblue_lt-images/com_icon.jpg) no-repeat 0px 0px;
float: left;
padding-left: 20px;
}
/* Header Scroll */
.nivoSlider { position:relative;}
.nivoSlider img { position:absolute; top:0px; left:0px;}
.nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:60; display:none;}
.nivo-slice { display:block; position:absolute; z-index:50; height:100%; }
.nivo-caption { position:absolute; left:0px; bottom:0px; color:#000; width:100%; z-index:89; padding-left: 10px; font-weight: bold}
.nivo-caption p { padding:10px 5px; margin:0;}
.nivo-directionNav a {position:absolute; width:45px; height: 60px; top:45%; z-index:99; cursor:pointer; text-indent:-9999%;}
.nivo-prevNav { background-position: left bottom; left:20px; background:url(metamorph_bubbleblue_lt-images/top_left.png) no-repeat;}
.nivo-nextNav { background-position: left top; right: 0px; background:url(metamorph_bubbleblue_lt-images/top_right.png) no-repeat;}
.nivo-controlNav { bottom:-20px; position:absolute; right:0;}
.nivo-controlNav a { float:left; width:14px; height:14px; display:block; position:relative; z-index:99; cursor:pointer; text-indent:-9999%; background:url(metamorph_bubbleblue_lt-images/scroll_small.png) no-repeat scroll right top;}
.nivo-controlNav a.active { background-position:left top; margin-top:-1px;}
</style>
</head>
<body>
<div id="bg_bubble">
<div id="wrap">
<div id="top_wrap">
<div id="logo">
<h1><a href="#">metamorph_bubbleblue</a></h1>
<a href="#"><small>Company Slogan Goes Here</small></a>
</div>
<div class="header">
<div id="menu">
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="gallery.html">Photo Gallery</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div id="header_img">
<div id="slider_bg">
<div class="waveshow">
<img src="metamorph_bubbleblue_lt-images/header.jpg" alt="" title="Some Text 1 Goes Here" />
<img src="metamorph_bubbleblue_lt-images/header2.jpg" alt="" title="Some Text 2 Goes Here" />
<img src="metamorph_bubbleblue_lt-images/header3.jpg" alt="" title="Some Text 3 Goes Here" />
</div> <!-- waveshow -->
</div> <!-- slider_bg -->
</div>
</div>
</div>
<div id="content">
<div id="content_top"></div>
<div id="content_bg">
<h4>Company Title Goes Here</h4>
<img src="metamorph_bubbleblue_lt-images/img2.jpg" alt="" title="" style="float: right;"/>
<p><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a><br />
Suspendisse vehicula dolor vitae eros molestie facilisis. Cras cursus nisl eget mauris posuere vulputate. Duis adipiscing pulvinar molestie. Etiam massa ipsum, vestibulum a convallis ut, tempor ut odio. Sed ac magna nisi.
</p><br />
<p>
<a href="#">Mauris at augue quis nisl scelerisque tincidunt ut sit amet diam.</a> <br />
Aliquam dapibus mi ac felis porttitor ut iaculis dolor tincidunt. Aliquam imperdiet vehicula massa sed auctor. Sed adipiscing, nunc quis porta auctor, nibh nisl mattis nulla, et lacinia massa purus vitae nunc. Quisque a sollicitudin dui.
Mauris lorem mauris, sagittis eget sollicitudin et, iaculis feugiat diam. Nunc quis arcu quam. Morbi et ante lectus.</p>
<div class="read2">
<a href="#">read more</a>
</div>
<div class="gray_top_box"></div>
<div class="gray_bg_box">
<div class="grey_box_left">
<h5>Lorem Ipsum Dolor</h5>
<img src="metamorph_bubbleblue_lt-images/pic1.jpg" alt="" title="" style="float: left; padding: 0px 15px 10px 0px"/>
<p><a href="#">Maecenas id purus urna, non elementum nibh.</a><br />
Nam arcu augue, lacinia sed sagittis in, faucibus vitae nunc. Mauris non ante vel elit gravida euismod eget nec purus. Cras faucibus arcu in massa facilisis eu lacinia nunc feugiat. Pellentesque non arcu a urna blandit elementum id lobortis non, vestibulum non quam. Quisque nulla magna, porta id sodales vitae, tristique sed dui. Curabitur egestas imperdiet interdum. Vivamus sit </p>
<div class="read2">
<a href="#">read more</a>
</div>
</div>
<div class="grey_box_right">
<h5>Fusce Id Urna Metus</h5>
<img src="metamorph_bubbleblue_lt-images/pic2.jpg" alt="" title="" style="float: left; padding: 0px 15px 10px 0px"/>
<p><a href="#">Fusce id urna metus. Etiam dapibus varius pharetra.</a><br />
Curabitur in dolor suscipit nulla laoreet iaculis. Integer fringilla mauris eu felis pulvinar a euismod lacus tempor. Nunc id rutrum purus. Sed tempor dui at sem pharetra viverra fermentum arcu scelerisque. Mauris lobortis ut nibh non ipsum dignissim laoreet in et sapien. Nullam posuere odio vestibulum augue commodo volutpat. Curabitur placerat malesuada rhoncus. Maecenas magna </p>
<div class="read2">
<a href="#">read more</a>
</div>
</div>
<div class="clear"></div>
</div>
<div class="gray_bot_box"></div>
<div class="clear"></div>
</div>
<div id="content_bot"></div>
</div>
<div id="footer">
<div id="footer_column">
<div id="footer_con_bg">
<div id="footer_con_top">
<div id="footer_con_bot">
<div class="foot_col1">
<h3>Contact Information</h3>
<div class="pad_left" style="background: url(metamorph_bubbleblue_lt-images/home.png) no-repeat left center">
1234 SomeStreet
</div>
<div class="pad_left">
Brooklyn, NY 11201
</div>
<div class="pad_left" style="background: url(metamorph_bubbleblue_lt-images/phone.png) no-repeat left center">
Phone: 1(234) 567 8910
</div>
<div class="pad_left">
Fax: 1(234) 567 8910
</div>
<div class="pad_left" style="background: url(metamorph_bubbleblue_lt-images/contact.png) no-repeat left center">
E-mail:companyname@yahoo.com
</div>
</div>
<div class="foot_col2">
<h3>Services</h3>
<ul class="ls">
<li><a href="#">Service Number 1</a></li>
<li><a href="#">Service Number 2</a></li>
<li><a href="#">Service Number 3</a></li>
<li><a href="#">Service Number 4</a></li>
<li><a href="#">Service Number 5</a></li>
<li><a href="#">Service Number 6</a></li>
<li><a href="#">Service Number 7</a></li>
<li><a href="#">Service Number 8</a></li>
</ul>
</div>
<div class="foot_col3">
<h3>Lorem Ipsum Dolor</h3>
<a href="#"><img src="metamorph_bubbleblue_lt-images/img1.jpg" alt="" title="" style="padding-bottom: 10px;"/></a>
<p>Morbi egestas auctor tempor. Nunc egestas dignissim urna, eu rutrum ligula volutpat bibendum. Pellentesque habitant morbi tristique senectus et netus et </p>
</div>
<div class="foot_col4">
<h3>Nullam Ultrices Auctor</h3>
<h2>Quisque vel neque eu tellus venenatis feugiat. </h2>
<p>Duis nisl neque, pharetra ac ornare vel, elementum sit amet orci. Sed et ultrices tortor. </p>
<div class="read">
<a href="#">read more</a>
</div>
<div class="clear"></div>
<div class="button_box">
<a href="#"><img src="metamorph_bubbleblue_lt-images/facebook.png" alt="" title=""/></a>
<a href="#"><img src="metamorph_bubbleblue_lt-images/twitter.png" alt="" title=""/></a>
<a href="#"><img src="metamorph_bubbleblue_lt-images/yahoo.png" alt="" title=""/></a>
<a href="#"><img src="metamorph_bubbleblue_lt-images/rss.png" alt="" title=""/></a>
<a href="#"><img src="metamorph_bubbleblue_lt-images/youtube.png" alt="" title=""/></a>
</div>
</div>
<div style="clear: both"></div>
</div>
</div>
</div>
</div>
<div id="footer_bot">
<p>Copyright 2011. <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>
<!-- Please DO NOT remove the following notice --><p>Design by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates</a></p><!-- end of copyright notice-->
</div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category