metamorph_aquaearth_lt
<!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="" />
<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
*/
*
{
border: 0;
margin: 0;
}
img
{
border: 0px;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #20262D;
background: url(metamorph_aquaearth_lt-images/bg_body.jpg) top repeat-x #24292F;
line-height: 16px;
}
#bg {
background: url(metamorph_aquaearth_lt-images/bg.jpg) right top no-repeat}
#main {
width: 900px;
margin: 0px auto;
background:url(metamorph_aquaearth_lt-images/main.jpg) right top no-repeat;}
#header {
height: 207px;
}
#logo {
height: 110px;
padding: 55px 0px 0px 0px;
}
#logo a {
text-decoration: none;
font-size: 14px;
font-weight:bold;
color: #20262D;
}
#logo H3 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: left;
}
#buttons{
text-align:center;
height: 42px;
margin-left: 0px;
background: url(metamorph_aquaearth_lt-images/buttons.png) center top no-repeat;
padding-left: 14px;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: 100;
display: block;
float: left;
text-decoration: none;
color: #ffffff;
text-align: center;
padding-top: 15px;
height: 27px;
width: 117px;
background:url(metamorph_aquaearth_lt-images/but.png) left 5px no-repeat;
}
.but {
}
#buttons .but:hover {
text-decoration: none;
background:url(metamorph_aquaearth_lt-images/but.png) left top no-repeat;
padding-top: 10px;
height: 32px;}
.but_razd { width: 3px;
height: 40px;
float:left;}
.cont_top { background: url(metamorph_aquaearth_lt-images/cont_top.png) top no-repeat;
height: 12px;}
.cont_bot { background: url(metamorph_aquaearth_lt-images/cont_bot.png) bottom no-repeat;
height: 12px;}
#content{
background: #B7E3D9;
padding: 0px 15px 0px 15px;
}
.top_img {
width: 870px;
height: 229px;
background:url(metamorph_aquaearth_lt-images/top_img.jpg) left top no-repeat;}
.circl_all {
background:url(metamorph_aquaearth_lt-images/circl_all.gif) left top no-repeat;
height: 30px;
vertical-align:top;
margin-top: 10px;
}
.circl { background: url(metamorph_aquaearth_lt-images/circl.gif) left top no-repeat;
height: 25px;
width: 25px;
margin: 3px 7px 0px 0px;
float:right; }
.circl:hover {
background:url(metamorph_aquaearth_lt-images/circl_hov.gif) left top no-repeat; }
.box_home {
float: left;
padding: 0px 15px 0px 15px;
width: 250px;}
.box_home_bg {background: url(metamorph_aquaearth_lt-images/box_home_bg.gif) left repeat-y;}
.box_home_top { background:url(metamorph_aquaearth_lt-images/box_home_top.gif) left top no-repeat;
height: 10px;}
.box_home_bot { background:url(metamorph_aquaearth_lt-images/box_home_bot.gif) left bottom no-repeat;
height: 10px;}
.float_left {float:left;}
.razd_v { background:url(metamorph_aquaearth_lt-images/i_razd.gif) left 15px repeat-x;
height: 30px;
clear: both;}
#left{
width: 265px;
float: left;
color:#20262D;
margin-left: 0px;
padding: 0px 0px 0px 0px;
}
.img_l { float:left;
margin: 0px 15px 5px 0px;
}
.img_r { float: right;
margin: 0px 0px 0px 15px;
}
H1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: bold;
color: #0C4930;
text-align: left;
padding: 0px 0px 0px 0px;
line-height: 20px;
}
.h1_left { padding: 5px 0px 7px 0px;
border-bottom: 2px solid #37BCA1;
color: #20262D;}
H2{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: bold;
color: #ffffff;
text-align: left;
padding: 0px 0px 0px 0px;
line-height: 20px;
}
.read{
display:block;
float:right;
height: 22px;
width: 70px;
text-align: center;
padding: 3px 0px 0px 0px;
text-decoration: none;
font-size:12px;
color: #ffffff;
background: url(metamorph_aquaearth_lt-images/read.png) left top no-repeat;
margin-top: 5px;
}
.read:hover {
font-size:12px;
text-decoration: underline;
}
#right{
float: right;
width: 589px;
margin-right: 0px;
}
.span_dat {
color: #002380;
text-decoration: underline;}
#bottom {
width: 100%;
background:url(metamorph_aquaearth_lt-images/bottom.jpg) left top no-repeat #24292F;
color:#FFFFFF;
padding: 0px 0px 0px 0px;
}
.bottom_bot {
width: 100%;
background:url(metamorph_aquaearth_lt-images/bottom_bot.gif) left bottom no-repeat;
color:#FFFFFF;
padding: 15px 0px 15px 15px;
}
#bottom h2{
font-family: Arial, Helvetica, sans-serif;
padding: 0px 0px 0px 0px;
font-size: 18px;
text-align: left;
color: #ffffff;
font-weight: 100;
line-height: 20px;
}
.b_col1 {
width: 136px;
height: 204px;
float: left;
margin-left: 0px;
background:url(metamorph_aquaearth_lt-images/razd_bot.gif) bottom repeat-x;
}
.b_col2 {
width: 220px;
height: 204px;
float: left;
margin-left: 30px;
line-height: 25px;
background:url(metamorph_aquaearth_lt-images/razd_bot.gif) bottom repeat-x;
}
.b_col3 {
width: 238px;
height: 204px;
float: left;
margin-left: 28px;
text-align: left;
}
.b_col4 {
width: 153px;
height: 204px;
float: left;
margin-left: 30px;
text-align: left;
}
.b_col4 ul {
list-style:none;
padding: 0px 0px 0px 0px;}
.b_col4 li {
padding: 8px 0px 2px 0px;
background: none;
}
.b_col4 li a {
color:#FFFFFF;
text-decoration: none;
}
.b_col4 li a:hover {
text-decoration: underline;
}
.fu_i {
padding: 0px 14px 0px 0px;
vertical-align: middle ;
}
.b_col1 ul {
list-style:none;
padding: 0px 0px 0px 0px;}
.b_col1 li {
padding: 8px 0px 0px 20px;
background: url(metamorph_aquaearth_lt-images/fish2.gif) 0px 14px no-repeat;
}
.b_col1 ul a:hover {
text-decoration:underline;
}
.b_col1 ul a {
color:#ffffff;
text-decoration:none;
font-weight: 100;}
#footer{
height: 60px;
font-size: 12px;
color: #ffffff;
text-align: center;
padding: 18px 0px 0px 0px;
background: url(metamorph_aquaearth_lt-images/footer.jpg) 0px 15px no-repeat;
}
#footer a{
color: #ffffff;
font-size: 12px;
text-decoration: none;
}
#footer a:hover{
color: #ffffff;
font-size: 12px;
text-decoration: underline;
}
/* blog */
.a_h1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: bold;
color: #0C4930;
text-align: left;
padding: 0px 0px 0px 0px;
line-height: 20px;
text-decoration: none;
}
.a_h1:href {
text-decoration: underline;}
.right_box_top { background: url(metamorph_aquaearth_lt-images/right_box_top.gif) left top no-repeat;
height: 14px;}
.right_box_bot {background: url(metamorph_aquaearth_lt-images/right_box_bot.gif) left bottom no-repeat;
height: 8px;}
.text{
padding: 0px 15px 0px 15px;
background: #33B29D;
clear:both;
}
.img_h1 { float: left;
padding: 0px 10px 0px 0px;}
.span_munth {
color:#FFFFFF;
font-size:10px;}
.dat_img {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #ffffff;
float:left;
width: 67px;
height: 55px;
padding: 10px 0px 0px 0px;
margin-right: 15px;
background:url(metamorph_aquaearth_lt-images/dat_img.gif) 0px 0px no-repeat;
text-align:center;
}
.a_non {
text-decoration: none;
color: #20262D;}
.a_non:hover {
text-decoration: underline;}
.a_und {
text-decoration: underline;
color: #20262D;}
.a_und:hover {
text-decoration: none;}
.datc_coment {
height: 20px;
width: 100%;
background: url(metamorph_aquaearth_lt-images/datc_coment.gif) top repeat-x;
padding: 0px 0px 5px 0px;}
.datc {
float: left;
width: 346px;}
.coment {
float: right;
width: 146px;
text-align:right;}
.spis {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis li {
padding: 6px 0px 3px 0px;
background: url(metamorph_aquaearth_lt-images/i_razd.gif) bottom repeat-x;
}
.spis a:hover {
text-decoration: none;
padding: 6px 0px 3px 5px;
color: #20262D;
}
.spis a {
color:#303030;
text-decoration:none;
font-weight: bold;}
.und { text-decoration:underline;}
/* gallery */
.row {
background: url(metamorph_aquaearth_lt-images/row_top.gif) left top no-repeat #59C5B1;
}
.row_bot {
background: url(metamorph_aquaearth_lt-images/row_bot.gif) left bottom no-repeat;
padding: 15px 0px 15px 15px;
}
.box_img2 {
width: 270px;
background: url(metamorph_aquaearth_lt-images/box_img.jpg) left top no-repeat;
padding: 0px 0px 0px 0px;
float:left;
}
.img_height
{
height: 155px;
}
.box_razd {
width: 15px;
height: 50px;
float: left;
}
/* about us */
/* contact us */
.input_txt2 {
width: 529px;
border: none;
background: url(metamorph_aquaearth_lt-images/input_txt2.gif) left top repeat-x;
padding: 7px 15px 7px 15px;
color:#20262D;
}
.text_area2 {
width: 529px;
height:118px;
font-size: 14px;
border: none;
background: url(metamorph_aquaearth_lt-images/text_area2.gif) 0px 0px repeat-x;
padding: 8px 15px 8px 15px;
color:#20262D;
font-family:Arial, Helvetica, sans-serif;
}
.submit2 {
background: url(metamorph_aquaearth_lt-images/but_read.gif) top repeat-x;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
color: #ffffff;
text-decoration: none;
padding: 0px 2px 5px 2px;
height: 28px;
width: 70px;
margin: 0px 15px 0px 0px;
background: url(metamorph_aquaearth_lt-images/read.png) left top no-repeat;
}
.lh {
line-height: 22px;
}
/*
scroll styles here
*/
.item { width: 870px; height:229px;}
.item img {float:left;}
.item h2 { border:none; margin-bottom:15px;}
.scrollable { position:relative; overflow:hidden; width: 870px; height: 229px;}
.scrollable .items { width:20000em; position:absolute;}
.scrollable .items div { float:left;}
.scrollable .items .item { overflow:hidden;}
.scrollable .items .item p { line-height:16px;}
.navi { width:auto; height:20px; float:right; margin: 3px 0; padding-right: 20px;}
.navi a { width: 25px; cursor:pointer; height: 25px; float:left; margin:0 0 0 3px; background:url(metamorph_aquaearth_lt-images/circl.gif) no-repeat scroll right top; display:block; font-size:1px;}
.navi a:hover, .navi a.active { background-position:left top; margin:0 0 0 3px; background:url(metamorph_aquaearth_lt-images/circl_hov.gif) no-repeat scroll right top}
.header1
{
width: 870px; height: 229px;
background: url(metamorph_aquaearth_lt-images/top_img.jpg) no-repeat;
}
.header2
{
width: 870px; height: 229px;
background: url(metamorph_aquaearth_lt-images/top_img2.jpg) no-repeat;
}
.header3
{
width: 870px; height: 229px;
background: url(metamorph_aquaearth_lt-images/top_img3.jpg) no-repeat;
}
.header4
{
width: 870px; height: 229px;
background: url(metamorph_aquaearth_lt-images/top_img4.jpg) no-repeat;
}
/* ------------------------------------------------------------------------
DO NOT CHANGE
------------------------------------------------------------------------- */
div.pp_overlay {background: #000;display: none;left: 0;position: absolute;top: 0;width: 100%;z-index: 9500;}
div.pp_pic_holder {display: none;position: absolute;width: 100px;z-index: 10000;}
</style>
</head>
<body>
<div id="bg">
<div id="main">
<!-- header begins -->
<div id="header">
<div id="logo">
<a href="#">metamorph_aquaearth</a>
<h3><a href="#" id="metamorph">Small Company Slogan Goes Here</a></h3>
</div>
<div id="buttons">
<a href="index.html" class="but" title="">Home</a><div class="but_razd"></div>
<a href="blog.html" class="but" title="">Blog</a><div class="but_razd"></div>
<a href="gallery.html" class="but" title="">Gallery</a><div class="but_razd"></div>
<a href="about_us.html" class="but" title="">About us</a><div class="but_razd"></div>
<a href="contact_us.html" class="but" title="">Contact us</a>
</div>
</div>
<!-- header ends -->
<div class="cont_top"></div>
<!-- content begins -->
<div id="content">
<div class="top_img">
<div class="scrollable">
<div class="items">
<div class="item">
<div class="header1"></div>
</div> <!-- item -->
<div class="item">
<div class="header2"></div>
</div> <!-- item -->
<div class="item">
<div class="header3"></div>
</div> <!-- item -->
<div class="item">
<div class="header4"></div>
</div> <!-- item -->
</div> <!-- items -->
</div> <!-- scrollable -->
<div class="circl_all"><div class="navi"></div></div> <!-- create automatically the point dor the navigation depending on the numbers of items -->
</div>
<div style="clear: both"></div>
<div style="height: 15px"></div>
<div class="box_home_top"></div>
<div class="box_home_bg">
<div class=" box_home">
<img src="metamorph_aquaearth_lt-images/img11.gif" style="float: left" alt="" />
<div style="height:3px"></div>
<h1>Lorem ipsum dolor.</h1>
<div style="height:7px; clear:both"></div>
<b>Sit amet, consectetur adipiscing elit.</b><br />
Sed enim ante, faucibus in pharetra et, condimentum non lorem. Vestibulum tempor ligula est. Nulla tellus mi, sodales tincidunt ultrices vehicula, mattis vel justo. Sed in nisl leo, sit amet ornare enim.
<div style="height:30px">
<a href="#" class="read">read more</a>
</div>
</div>
<div class="float_left" style="width: 15px; height: 10px;"></div>
<div class=" box_home">
<img src="metamorph_aquaearth_lt-images/img12.gif" style="float: left" alt="" />
<div style="height:3px"></div>
<h1>Vestibulum vel lacus </h1>
<div style="height:7px; clear:both"></div>
<b>Interdum non id massa.</b><br />
Nulla mollis, magna quis feugiat faucibus, risus lorem lacinia justo, et adipiscing tortor lacus in nunc. Duis in tellus vel ipsum bibendum gravida. Nunc eget mi id risus tempor rhoncus. Integer lectus sapien.
<div style="height:30px">
<a href="#" class="read">read more</a>
</div>
</div>
<div class="float_left" style="width: 15px; height: 10px;"></div>
<div class=" box_home">
<img src="metamorph_aquaearth_lt-images/img13.gif" style="float: left" alt="" />
<div style="height:3px"></div>
<h1>Cras aliquam quam eget.</h1>
<div style="height:7px; clear:both"></div>
<b>Accumsan eu lobortis urna mollis.</b><br />
Sed a tellus orci, a luctus enim. Aliquam congue nisi quis felis porttitor vestibulum. Nam eget metus dui, eu consectetur urna. Donec sed mauris quis nisl iaculis ullamcorper.
<div style="height:30px">
<a href="#" class="read">read more</a>
</div>
</div>
<div style="clear: both"></div>
</div>
<div class="box_home_bot"></div>
<div style="height:15px"></div>
<div class="box_home_top"></div>
<div class="box_home_bg">
<div class=" box_home">
<h1>Our team.</h1>
<div style="height:10px"></div>
<div style="width:250px; height: 165px;"><img src="metamorph_aquaearth_lt-images/img14.jpg" alt="" /></div>
<div style="height:7px; clear:both"></div>
<b>Ut tellus erat, ultricies sed cursus sit amet. </b><br />
Vestibulum vel nibh. Sed suscipit lobortis massa, imperdiet feugiat ante bibendum et.
<div style="height:30px">
<a href="#" class="read">read more</a>
</div>
</div>
<div class="float_left" style="width: 15px; height: 10px;"></div>
<div class=" box_home">
<h1>Perfect proposition.</h1>
<div style="height:10px"></div>
<div style="width:250px; height: 165px;"><img src="metamorph_aquaearth_lt-images/img15.jpg" alt="" /></div>
<div style="height:7px; clear:both"></div>
<b>Aliquam erat volutpat. </b><br />
Donec lobortis bibendum pellentesque. Sed lobortis, arcu sit amet tempus interdum.
<div style="height:30px">
<a href="#" class="read">read more</a>
</div>
</div>
<div class="float_left" style="width: 15px; height: 10px;"></div>
<div class=" box_home">
<h1>Suspendisse vitae laoreet.</h1>
<div style="height:10px"></div>
<div style="width:250px; height: 165px;"><img src="metamorph_aquaearth_lt-images/img16.jpg" alt="" /></div>
<div style="height:7px; clear:both"></div>
<b>Integer malesuada porttitor elit</b><br />
Donec vel nulla a enim iaculis tempus. Nullam quis dolor suscipit nulla.
<div style="height:30px">
<a href="#" class="read">read more</a>
</div>
</div>
<div style="clear: both"></div>
</div>
<div class="box_home_bot"></div>
<div style="height:15px"></div>
<!-- bottom begin -->
<div id="bottom">
<div class="bottom_bot">
<div class="b_col1">
<h2>Services</h2>
<div style="height:5px"></div>
<ul>
<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>
</ul>
</div>
<div class="b_col2">
<h2>Contact Information</h2>
<div style="height:10px"></div>
1234 SomeStreet<br />
Brooklyn, NY 11201<br />
Phone: 1(234) 567 8910<br />
Fax: 1(234) 567 8910<br />
E-mail: companyname@yahoo.com
</div>
<div class="b_col3">
<h2>Recent Posts</h2>
<div style="height:10px"></div>
<b>Donec lobortis bibendum pellentesque.</b> Sed lobortis, arcu sit amet tempus interdum, dui sem convallis turpis, sed eleifend arcu urna sit amet lacus.<br /><br />
<b>Nunc justo est, suscipit at laoreet vel,</b> placerat eget velit. Quisque iaculis facilisis dui, sed sagittis sapien aliquam tincidunt.
</div>
<div class="b_col4">
<h2>Follow Us</h2>
<div style="height:5px"></div>
<ul>
<li><img src="metamorph_aquaearth_lt-images/fu_i1.gif" class=" fu_i" alt="" /><a href="#"><strong>Subscribe to Blog</strong></a></li>
<li><img src="metamorph_aquaearth_lt-images/fu_i2.gif" class=" fu_i" alt="" /><a href="#"><strong>Be a fan on Facebook</strong></a></li>
<li><img src="metamorph_aquaearth_lt-images/fu_i3.gif" class=" fu_i" alt="" /><a href="#"><strong>RSS Feed</strong></a></li>
<li><img src="metamorph_aquaearth_lt-images/fu_i4.gif" class=" fu_i" alt="" /><a href="#"><strong>Follow us on Twitter</strong></a></li>
</ul>
</div>
<div style="clear: both;"></div>
</div>
</div>
<!-- bottom end -->
<div style="clear: both; height: 1px;"></div>
</div>
<div class="cont_bot"></div>
<!-- content ends -->
<!-- footer begins -->
<div id="footer">
Copyright 2009. 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>
</div>
</body>
</html>
Related examples in the same category