metamorph_melancholy_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: #666666;
background: url(metamorph_melancholy_lt-images/bg.jpg) top left no-repeat #373737;
line-height: 16px;
}
#main {
width: 1010px;
margin: 0px auto;
background:url(metamorph_melancholy_lt-images/main.jpg) right top no-repeat;}
#header {
height: 158px;
}
#logo {
padding: 24px 0px 0px 97px;
height: 81px;
}
#logo a {
text-decoration: none;
font-size: 16px;
color: #ffffff;
font-style: italic;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: 100;
padding-left: 35px;
}
#buttons{
text-align:center;
height: 53px;
margin-left: 0px;
padding: 0px 0px 0px 20px;
background: url(metamorph_melancholy_lt-images/buttons.jpg) top repeat-x;
}
#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: 18px;
height: 35px;
width: 190px;
}
.but {
}
#buttons .but:hover {
text-decoration: none;
background: url(metamorph_melancholy_lt-images/but_hov.jpg) 2px repeat-x;}
.top { height:272px;
background: url(metamorph_melancholy_lt-images/top.jpg) left top no-repeat;
padding: 0px 0px 0px 0px;}
.circl { background: url(metamorph_melancholy_lt-images/circl.gif) left top no-repeat;
height: 14px;
width: 13px;
margin: 0px 7px 0px 0px;
float: right;
}
.circl:hover {
background:url(metamorph_melancholy_lt-images/circl_hov.gif) left top no-repeat; }
#content{
background: #FFFFFF;
padding: 8px 8px 8px 8px;
}
.ram {
border: 1px solid #FFFFFF;
padding: 10px 18px 10px 18px;
background: url(metamorph_melancholy_lt-images/ram.jpg) bottom repeat-x #F0F0F0;}
.content_razd{
background: url(metamorph_melancholy_lt-images/content_razd.gif) 674px repeat-y;
padding: 0px 0px 0px 0px;
clear:both;
}
h3 {
color: #BB4214;
font-weight: 100;
font-size: 18px;
text-align: left;
padding: 8px 0px 8px 0px;
}
.razd_col {
background:url(metamorph_melancholy_lt-images/razd_col.jpg) 30px top no-repeat;
height: 183px;
float:left;
width: 60px;}
.home_box {
float: left;
width: 280px;
padding: 0px 0px 0px 0px;}
.row_ind {}
a {
color: #666666;
text-decoration: none;}
a:hover {
color: #666666;
text-decoration: underline;}
#left{
width: 652px;
float: left;
margin-left: 0px;
padding: 0px 0px 0px 0px;
}
.img_l { float:left;
margin: 0px 15px 0px 0px;
}
.img_r { float: right;
margin: 0px 0px 0px 15px;
}
H1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #B95C12;
text-align: left;
padding: 0px 0px 0px 0px;
line-height: 20px;
}
.a_h1 {
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #B95C12;
text-align: left;
padding: 0px 0px 0px 0px;
line-height: 20px;
}
.a_h1:hover { text-decoration:underline;
color: #B95C12;}
.read{
display:block;
float:right;
height: 19px;
width: 84px;
text-align: center;
padding: 0px 0px 0px 0px;
text-decoration: none;
color: #B95C12;
text-decoration: none;
font-size:12px;
font-weight: bold;
}
.read:hover {
text-decoration: underline;
color: #B95C12;
}
.razd_h {
height: 30px;
background: url(metamorph_melancholy_lt-images/razd_v.gif) 15px repeat-x;
clear:both;
}
#right{
float: right;
width: 284px;
margin-right: 0px;
}
.span_dat {
color: #002380;
text-decoration: underline;}
.spis {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis li {
padding: 2px 0px 0px 15px;
background: url(metamorph_melancholy_lt-images/spis.gif) 0px 7px no-repeat;
}
#content .spis a:hover {
text-decoration: underline;
}
#content .spis a {
color:#666666;
text-decoration:none;
font-weight: bold;}
#bottom {
width: 100%;
background: url(metamorph_melancholy_lt-images/bottom.jpg) left bottom no-repeat;
color: #ffffff;
padding: 0px 0px 0px 0px;
height: 273px;
}
.bottom_h2 { background:url(metamorph_melancholy_lt-images/bottom_h2.jpg) top repeat-x;}
.bottom_razd { background: url(metamorph_melancholy_lt-images/bottom_razd.png) 340px bottom no-repeat;
height: 273px;}
.bottom_text { padding: 0px 0px 0px 12px;}
#bottom h2{
font-family: Arial, Helvetica, sans-serif;
padding: 16px 0px 24px 0px;
font-size: 18px;
text-align: center;
color: #ffffff;
font-weight: 100;
line-height: 20px;
background: url(metamorph_melancholy_lt-images/h1_bottom.jpg) left top no-repeat;
}
.b_col1 {
width: 287px;
float: left;
margin-left: 30px;
}
.b_col2 {
width: 254px;
float: left;
margin-left: 75px;
}
.b_col3 {
width: 234px;
float: left;
margin-left: 75px;
text-align: left;
}
.b_col3 ul {
list-style:none;
padding: 0px 0px 0px 40px;}
.b_col3 li {
padding: 8px 0px 0px 20px;
background: url(metamorph_melancholy_lt-images/fish1.gif) 0px 14px no-repeat;
}
.b_col3 ul a:hover {
text-decoration:underline;
}
.b_col3 ul a {
color:#ffffff;
font-weight: bold;
text-decoration:none;}
.fu_i {
padding: 0px 14px 0px 0px;
vertical-align: middle ;
}
.b_col2 ul {
list-style:none;
padding: 0px 0px 0px 40px;}
.b_col2 li {
padding: 8px 0px 2px 0px;
background: none;
}
.b_col2 li a {
color:#ffffff;
text-decoration: none;
font-weight: bold;
}
.b_col2 li a:hover {
text-decoration: underline;
}
#footer{
height: 67px;
font-size: 12px;
color: #ffffff;
text-align: center;
padding: 25px 0px 0px 0px;
background: url(metamorph_melancholy_lt-images/footer.jpg) 0px 15px no-repeat;
font-weight: 100;
}
#footer a{
color: #ffffff;
font-size: 12px;
text-decoration: none;
font-weight: 100;
}
#footer a:hover{
color: #ffffff;
font-size: 12px;
text-decoration: underline;
font-weight: 100;
}
/* blog */
.datc_comment {
height: 25px;
width: 100%;
background: url(metamorph_melancholy_lt-images/datc_comment.gif) top repeat-x;
padding-top: 8px;
padding: 6px 0px 4px 0px;
}
.datc {
float: left;
width: 132px;
color: #7B3401;}
.datc_comment a {
color: #626262;
font-weight: 100;
text-decoration:none;
}
.datc_comment a:hover {
text-decoration:underline;
}
.comment {
float: left;
width: 146px;}
.bloger {
float: left;
width: 152px;}
.text{
padding: 10px 15px 15px 0px;
background: #FFFFFF;
clear:both;
}
.a_non {
text-decoration: none;
color: #142B23;}
.a_non a:hover {
text-decoration: none;}
.spis2 {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis2 li {
padding: 6px 0px 4px 15px;
background: url(metamorph_melancholy_lt-images/spis2.gif) 0px bottom no-repeat;
}
#content .spis2 a:hover {
text-decoration: none;
color:#FF0000;
}
#content .spis2 a {
color:#666666;
text-decoration:none;
font-weight: 100;}
/* gallery */
.row {
padding: 0px 0px 0px 2px;
}
.box_img2 {
width: 300px;
background: url(metamorph_melancholy_lt-images/box_img.jpg) left top no-repeat;
padding: 10px 10px 0px 10px;
float:left;
height: 227px;
}
.box_img2_text {
padding: 0px 0px 0px 0px;}
.box_razd {
width: 14px;
height: 50px;
float: left;
}
.img_height
{
height: 123px;
}
.gal_num {
width:16px;
height:22px;
padding: 3px 0px 0px 9px;
display:block;
background: url(metamorph_melancholy_lt-images/gal_num.gif) left top no-repeat;
color: #FFFFFF;
font-size: 14px;
margin: 0px 10px 0px 0px;
text-decoration:none;
float: left;}
.gal_num:hover {
text-decoration: underline;
color:#FFFFFF;}
/* contact us */
.input_txt2 {
width: 585px;
border: none;
background: url(metamorph_melancholy_lt-images/input_txt2.gif) left top repeat-x;
padding: 7px 10px 6px 10px;
color:#ffffff;
font-weight: 100;
font-family:Arial, Helvetica, sans-serif;
}
.text_area2 {
width: 585px;
height:121px;
font-size: 12px;
border: none;
background: url(metamorph_melancholy_lt-images/text_area2.gif) 0px 0px repeat-x;
padding: 7px 10px 7px 10px;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
font-weight: 100;
}
.submit2 {
background: url(metamorph_melancholy_lt-images/read.gif) top repeat-x;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
color: #B95C12;
text-decoration: none;
padding: 2px 2px 2px 2px;
width: 74px;
margin: 0px 20px 0px 0px;
height: 19px;
font-weight: bold;
}
.cont_text { padding: 0px 0px 0px 7px;
}
/*
scroll styles here
*/
.item { width: 994px; height:272px;}
.item img {float:left;}
.item h2 { border:none; margin-bottom:15px;}
.scrollable { position:relative; overflow:hidden; width: 994px; height: 272px;}
.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:5px 0; padding-right: 20px;}
.navi a { width: 13px; cursor:pointer; height: 14px; float:left; margin:0 0 0 3px; background:url(metamorph_melancholy_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_melancholy_lt-images/circl_hov.gif) no-repeat scroll right top}
.header1
{
width: 994px; height: 272px;
background: url(metamorph_melancholy_lt-images/top.jpg) no-repeat;
}
.header2
{
width: 994px; height: 272px;
background: url(metamorph_melancholy_lt-images/top2.jpg) no-repeat;
}
.header3
{
width: 994px; height: 272px;
background: url(metamorph_melancholy_lt-images/top3.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="main">
<!-- header begins -->
<div id="header">
<div id="logo">
<a href="#">metamorph_melancholy</a>
<h2><a href="#" id="metamorph">Small Company Slogan Goes Here</a></h2>
</div>
<div id="buttons">
<a href="index.html" class="but" title="">Home</a>
<a href="about_us.html" class="but" title="">About Us</a>
<a href="gallery.html" class="but" title="">Gallery</a>
<a href="blog.html" class="but" title="">Blog</a>
<a href="contact_us.html" class="but" title="">Contact us</a>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="content">
<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> <!-- items -->
</div> <!-- scrollable -->
<div class="navi"></div> <!-- create automatically the point dor the navigation depending on the numbers of items -->
<div style="clear: both"></div>
<div style="height:10px"></div>
<div style="padding: 0px 0px 0px 13px;">
<div class="home_box">
<h3>Your Options</h3>
<div style="height:10px"></div>
<img src="metamorph_melancholy_lt-images/img11.jpg" class="img_l" alt="" /><b>Cras hendrerit est nec libero ornare sagittis. </b><br /><br />
a mauris suscipit porta aliquet turpis interdum. Donec eget nisi id </div>
<div class="razd_col"></div>
<div class="home_box">
<h3>Company News </h3>
<div style="height:10px"></div>
<img src="metamorph_melancholy_lt-images/img12.jpg" class="img_l" alt="" /><b>Donec interdum dignissim risus et vestibulum.</b><br />
Donec eget nisi id magna tempor laoreet. Etiam egesa mauris suscipit porta aliquet turpis inter- dum. Donec eget nisi id magna
<div style="height:10px"></div>
</div><div class="razd_col"></div>
<div class="home_box">
<h3>Have a Question?</h3>
<div style="height:10px"></div>
<img src="metamorph_melancholy_lt-images/img13.jpg" class="img_l" alt="" /><b>Cras hendrerit est nec libero ornare sagittis. </b><br />
Donec interdum dignissim risus et vestibulum.<br /><br />
a mauris suscipit porta aliquet turpis interdum. Donec eget nisi id
</div>
<div style="clear: both;"></div>
</div>
<div style="height:10px"></div>
<div style="border: 1px solid #666666;">
<div class="ram">
<h1>Some Company Header Goes Here</h1>
<div style="height:5px"></div>
<b>Cras hendrerit est nec libero ornare sagittis.</b><br />
Donec interdum dignissim risus et vestibulum. Aenean convallis ipsum a mauris suscipit porta aliquet turpis interdum. Donec eget nisi id magna tempor laoreet. Etiam egestas pulvinar nunc, eu dictum est sagittis vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer turpis est, vulputate at cursus a, suscipit quis diam. Cras condimentum metus ut neque lobortis condimentum. Aenean ornare turpis eget sapien venenatis sodales nec vitae sem. Lorem ipsum dolor sit
<div style="height:20px">
<a href="#" class="read read_bg2">read more...</a>
</div>
</div>
</div>
<div style="height:20px"></div>
<div>
<div style=" float: left; width: 430px;">
<h1>Pellentesque et dui lectus, quis tempus lorem</h1>
<div style="height:15px"></div>
<img src="metamorph_melancholy_lt-images/img14.jpg" class="img_l" alt="" />
<div style=" width: 210px; float:right">
<ul class="spis">
<li><a href="#">Donec luctus luctus faucibus. </a></li>
<li><a href="#">Mauris venenatis arcu vel urna</a></li>
<li><a href="#">Morbi mi sapien, malesuada</a></li>
<li><a href="#">Condimentum id, mattis eu </a></li>
<li><a href="#">Sed non dui vel ipsum gravida </a></li>
<li><a href="#">Nulla imperdiet, nibh gravida</a></li>
</ul>
</div>
</div>
<div class="razd_col" style="width: 80px"></div>
<div style=" float: left; width: 195px; ">
<div style="height:35px"></div>
<b>Donec luctus luctus faucibus.</b><br />
Mauris venenatis arcu vel urna imperdiet vitae malesuada urna aliquet. Morbi mi sapien, malesuada nec condimentum id, mattis eu lacus. Sed non dui vel ipsum
</div>
<div class="razd_col" style="width: 80px"></div>
<div style=" float: left; width: 190px; ">
<div style="height:35px"></div>
<b>Sed non dui vel ipsum gravida</b> ultricies. Nulla imperdiet, nibh gravida placerat accumsan, elit turpis dictum metus, nec euismod justo diam vitae ipsum.
</div>
<div style="clear: both"></div>
</div>
<div style="clear: both; height: 12px;"></div>
</div>
<!-- content ends -->
<div style="height: 7px;"></div>
<!-- bottom begin -->
<div class="cont_top"></div>
<div id="bottom">
<div class="bottom_h2">
<div class="bottom_razd">
<div class="b_col1">
<h2>Contact Information</h2>
<div style="height:25px"></div>
<b>Suspendisse rutrum interdum lacinia.</b> Suspendisse tempus aliquet elit sit amet pellen- tesque. Donec iaculis pulvinar mauris, ac vulputate justo pretium quis. Morbi id magna ac tortor <br />
<br />
<b>Quisque luctus, mi ornare</b> Suspendisse tempus aliquet elit sit amet pellentesque. Donec iaculis pulvinar mauris, ac vulputate justo
</div>
<div class="b_col2">
<h2>Share with Others</h2>
<div style="height:25px"></div>
<ul>
<li><img src="metamorph_melancholy_lt-images/fu_i1.png" class=" fu_i" alt="" /><a href="#">Lorem ipsum dolor</a></li>
<li><img src="metamorph_melancholy_lt-images/fu_i2.png" class=" fu_i" alt="" /><a href="#">Maecenas in turpis </a></li>
<li><img src="metamorph_melancholy_lt-images/fu_i3.png" class=" fu_i" alt="" /><a href="#">Morbi fringilla libero</a></li>
<li><img src="metamorph_melancholy_lt-images/fu_i4.png" class=" fu_i" alt="" /><a href="#">In venenatis metus vel </a></li>
</ul>
</div>
<div class="b_col3">
<h2>Useful Resources</h2>
<div style="height:25px"></div>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Maecenas in turpis </a></li>
<li><a href="#">Morbi fringilla libero</a></li>
<li><a href="#">In venenatis metus vel </a></li>
<li><a href="#">Donec cursus quam ac </a></li>
</ul>
</div>
<div style="clear: both; height:1px;"></div>
</div>
</div>
</div>
<!-- bottom end -->
<!-- footer begins -->
<div id="footer">
Copyright 2011. 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