metamorph_bluemess_lt2
<!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: #000000;
background: url(metamorph_bluemess_lt2-images/body_bg.jpg) top repeat-x #FFFFFF;
line-height: 20px;
}
#bg{
background: url(metamorph_bluemess_lt2-images/bg.jpg) center top no-repeat;
}
/* search */
#search {
padding-top: 0px;
padding-left:0px;
height: 40px;
width: 313px;
float: left;
background: url(metamorph_bluemess_lt2-images/search_bg.png) left top no-repeat;
margin: 0px 0px 0px 587px;
}
#search form {
margin: 0px;
}
#search input {
float: left;
font: 12px Arial, Helvetica, sans-serif;
}
#search-text {
width: 228px;
height: 17px;
font-size: 12px;
padding: 12px 5px 6px 12px;
border: none;
vertical-align: middle;
color: #ffffff;
margin: 0px 0px 0px 0px;
border: 0px;
position:relative;
background: none;
}
#search-submit {
width: 62px;
padding: 1px 0px 5px 0px;
background: url(metamorph_bluemess_lt2-images/but_search.png) 0px 0px no-repeat;
border: none;
margin-left: 0px;
margin-top: 10px;
text-align:center;
color:#FFFFFF;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#main {
width: 900px;
margin: 0px auto;
background:url(metamorph_bluemess_lt2-images/main.jpg) right top no-repeat;}
#header {
width:900px;
height: 208px;
}
#logo {
padding: 0px 0px 0px 0px;
height: 113px;
}
#logo H2 {
font-family: Arial, Helvetica, sans-serif;
color:#000000;
font-size:18px;
font-style:italic;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 16px;
color: #000000;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight:100;
}
/* buttons */
#buttons{
text-align:center;
height: 30px;
margin: 0px auto;
padding: 10px 0px 0px 20px;
background: url(metamorph_bluemess_lt2-images/buttons.png) center top no-repeat;
width: 880px;
}
#buttons a {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
display: block;
float: left;
text-decoration: none;
color: #0059FF;
text-align: center;
padding-top: 0px;
font-weight:100;
width: 170px;
}
#buttons .but:hover {
text-decoration:underline;
}
.top { height:334px;
padding-top: 10px;
padding-left: 10px;
background:url(metamorph_bluemess_lt2-images/top.jpg) left top no-repeat;
}
.top_bot {
background: url(metamorph_bluemess_lt2-images/top_bot.jpg) left top no-repeat;
height: 28px}
#content{
width: 876px;
margin: 0px auto;
background: #E6F6FF;
padding: 0px 12px 5px 12px;
line-height: 22px;
}
#content_razd {
background: url(metamorph_bluemess_lt2-images/content_razd.gif) 586px repeat-y ;
}
#content_top {
width: 900px;
background: url(metamorph_bluemess_lt2-images/content_top.png) 0px top no-repeat ;
height: 10px;
}
#content_bot {
width: 900px;
background: url(metamorph_bluemess_lt2-images/content_bot.png) 0px bottom no-repeat ;
height: 9px;
}
.float_l {
float:left;}
.col {
width: 265px;
float:left;
padding: 0px 0px 0px 0px;}
.col_razd {
background:url(metamorph_bluemess_lt2-images/col_text.gif) center repeat-y;
height: 124px;
width: 40px;
float:left;
margin-top: 35px;
}
h1 {
padding: 0px 0px 5px 0px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color:#051B93;}
#left{
width: 558px;
float: left;
color:#000000;
margin-left: 0px;
}
.text{
padding: 0px 0px 15px 0px;
}
.img_l { float:left;
margin: 6px 15px 0px 0px;
}
.img_r { float: right;
margin: 9px 10px 3px 10px;
}
.span_cont { color: #07249F;
font-size:12px;
font-weight:bold;
}
#content H2{
font-family: Georgia, "Times New Roman", Times, serif;
font-size:16px;
font-weight: bold;
color: #07249F;
text-align: left;
padding: 5px 0px 5px 0px;
}
.read_r{
text-align: right;
padding: 0px 8px 0px 0px;
background: url(metamorph_bluemess_lt2-images/read.gif) right 3px no-repeat;
}
.razd_g {
background: url(metamorph_bluemess_lt2-images/razd_g.gif) 0px 2px repeat-x;
height: 5px;
}
.read_r a {
font-size:12px;
color: #ffffff;
text-decoration: none;
padding-right: 9px;
}
.next {
width: 100%;
text-align: right;
padding: 0px 0px 0px 0px;}
.next a{
color:#FFFFFF;
text-decoration: none; }
.next a:hover {
text-decoration: underline; }
.more {
text-align:right;}
.more a {
color: #009FFF;
text-decoration:none;
}
#right{
float: right;
width: 270px;
}
.span_dat {
color: #002380;
text-decoration: underline;}
#bottom {
background: #E6F6FF;
margin: 0px auto;
color:#000000;
padding: 0px 0px 0px 15px;
}
#b_col1 {
width: 220px;
float: left;
margin-left: 0px;
}
#b_col2 {
width: 180px;
float: left;
margin-left: 57px;
}
#b_col3 {
width: 160px;
float: left;
margin-left: 20px;
text-align: left;
}
#b_col4 {
width: 184px;
float: left;
margin-left: 35px;
text-align: left;
}
.a_icons {
color:#FF0000;
text-decoration:none;}
.a_icons:hover {
text-decoration: underline;}
#bottom ul {
list-style:none;
padding: 0px 0px 0px 0px;}
#bottom li {
padding: 8px 0px 0px 0px;
}
#bottom ul a:hover {
text-decoration:underline;
}
#bottom ul a {
color:#000000;
text-decoration:none;
font-weight: 100;}
.fu_i {
padding: 0px 14px 0px 0px;
vertical-align: middle ;
}
#b_col2 ul {
list-style:none;
padding: 0px 0px 0px 0px;}
#b_col2 li {
padding: 4px 0px 0px 18px;
background: url(metamorph_bluemess_lt2-images/fish2.gif) 0px 11px no-repeat;}
#b_col2 a {
color:#FFFFFF;
}
#footer{
font-size: 11px;
color: #000000;
text-align: center;
padding: 20px 0px 0px 0px;
height: 60px;
text-align: center;
margin: 0px auto;
}
#footer a{
color: #000000;
font-size: 11px;
text-decoration: none;
}
#footer a:hover{
color: #000000;
font-size: 11px;
text-decoration: underline;
}
/* blog */
#content_blog {
width: 1000px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
line-height: 22px;
}
.left_box {
width: 677px;
padding: 0px 15px 0px 15px;
background: url(metamorph_bluemess_lt2-images/orange.jpg) top repeat-x #ffffff;
}
.dat_img {
float: left;
padding: 3px 14px 0px 0px;
}
.span_dat {
color: #7B3401;
text-decoration:underline;
}
.datc_comment {
height: 25px;
width: 100%;
background: url(metamorph_bluemess_lt2-images/datc_comment.gif) top repeat-x;
padding-top: 8px;
padding: 3px 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;}
.right_box {
padding: 0px 15px 13px 15px;
background: url(metamorph_bluemess_lt2-images/orange.jpg) top repeat-x #ffffff;
width: 253px;
}
.spis {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis li {
padding: 0px 0px 0px 0px;
background:url(metamorph_bluemess_lt2-images/spis_li.gif) bottom repeat-x;
}
.spis a:hover {
text-decoration:none;
}
.spis a {
color:#000000;
text-decoration:none;
font-weight: 100;
display:block;
width: 100%;
height: 25px;
padding-left:17px;
padding-top: 3px;
width: 247px;
background: url(metamorph_bluemess_lt2-images/fish_more.gif) left 10px no-repeat;}
/* calendar */
#calendar {
margin: 10px 0px 20px 0px;
color:#006CAD;
}
#calendar a {
color:#006CAD;
}
#calendar table {
width: 100%;
text-align: center;
}
#calendar thead {
}
#calendar tbody td {
border: 1px solid #ffffff;
}
#calendar #prev {
text-align: left;
}
#calendar #next {
text-align: right;
}
#calendar tfoot a {
text-decoration: none;
font-weight: bold;
}
#calendar #now {
background: #ffffff;
border: 1px solid #ff0000;
font-weight: bold;
color: #006CADl
}
/* gallery */
.row {
padding: 0px 0px 0px 1px;
height: 136px;
width: 877px;
}
.box_razd {
width: 9px;
height: 50px;
float: left;
}
.rol_over:hover {
background:url(metamorph_bluemess_lt2-images/rol_over_galery.png) left top no-repeat;
width: 212px;
height: 136px;
display: block;
float: left;
}
.g_size {
width: 212px;
height: 136px;
display: block;
float: left;
}
.g1 {
background:url(metamorph_bluemess_lt2-images/img31.jpg) left top no-repeat;}
.g2 {
background:url(metamorph_bluemess_lt2-images/img32.jpg) left top no-repeat;}
.g3 {
background:url(metamorph_bluemess_lt2-images/img33.jpg) left top no-repeat;}
.g4 {
background:url(metamorph_bluemess_lt2-images/img34.jpg) left top no-repeat;
}
.g5 {
background:url(metamorph_bluemess_lt2-images/img35.jpg) left top no-repeat;}
.g6 {
background:url(metamorph_bluemess_lt2-images/img36.jpg) left top no-repeat;}
.g7 {
background:url(metamorph_bluemess_lt2-images/img37.jpg) left top no-repeat;}
.g8 {
background:url(metamorph_bluemess_lt2-images/img38.jpg) left top no-repeat;}
.g9 {
background:url(metamorph_bluemess_lt2-images/img39.jpg) left top no-repeat;}
.g10 {
background:url(metamorph_bluemess_lt2-images/img310.jpg) left top no-repeat;}
.g11 {
background:url(metamorph_bluemess_lt2-images/img311.jpg) left top no-repeat;}
.g12 {
background:url(metamorph_bluemess_lt2-images/img312.jpg) left top no-repeat;}
.g13 {
background:url(metamorph_bluemess_lt2-images/img313.jpg) left top no-repeat;}
.g14 {
background:url(metamorph_bluemess_lt2-images/img314.jpg) left top no-repeat;}
.g15 {
background:url(metamorph_bluemess_lt2-images/img315.jpg) left top no-repeat;}
.g16 {
background:url(metamorph_bluemess_lt2-images/img36.jpg) left top no-repeat;}
.gal_num {
width: 17px;
height: 23px;
padding: 3px 0px 0px 9px;
float: left;
margin-left: 5px;
background:url(metamorph_bluemess_lt2-images/gal_num.gif) left top no-repeat;
color:#FFFFFF;
font-size:14px;
display:block;
text-decoration:none;
font-weight:bold;
}
/* about us */
.text_ind3 {
padding: 5px 0px 17px 0px;
}
.about_razd {
height: 28px;
background: url(metamorph_bluemess_lt2-images/about_razd.gif) left 16px repeat-x;
width: 100%;
}
.about_razd_d {
height: 18px;
background: url(metamorph_bluemess_lt2-images/about_razd.gif) left 6px repeat-x;
width: 100%;
}
.about_cols {
background: url(metamorph_bluemess_lt2-images/about_cols.gif) 280px repeat-y;
}
.about_col_l {
width: 262px;
float:left;
}
.dat_about {
color:#07249F;
font-size:12px;
padding: 0px 0px 0px 0px;
text-decoration:underline;
}
/* contact us */
#left_cont {
width: 682px;
float:left;
padding: 15px 0px 0px 0px;
}
#right_cont {
width: 254px;
float: right;
padding: 15px 0px 0px 0px;
}
.input_txt2 {
width: 546px;
border: none;
background: url(metamorph_bluemess_lt2-images/input_txt2.jpg) left top no-repeat;
padding: 8px 8px 8px 8px;
color:#ffffff;
}
.text_area2 {
width: 546px;
height:186px;
font-size: 14px;
border: none;
background: url(metamorph_bluemess_lt2-images/text_area2.jpg) 0px 0px no-repeat;
padding: 8px 8px 8px 8px;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
}
.submit2 {
background: url(metamorph_bluemess_lt2-images/but_submi_cont.gif) right 2px no-repeat;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
font-size:12px;
color: #ffffff;
text-decoration: none;
padding: 3px 2px 4px 2px;
width: 63px;
margin: 0px 0px 0px 0px;
text-transform: uppercase;
line-height: 13px;
}
.box_us {
width: 264px;
background: url(metamorph_bluemess_lt2-images/box_us.gif) 0px bottom repeat-x;
}
.box_us_l {
width: 30px;
float: left;
padding-top:4px;}
.box_us_r {
width: 230px;
float: left;}
.header1
{
width: 880px; height: 311px;
background: url(metamorph_bluemess_lt2-images/header1.jpg) no-repeat;
}
.header2
{
width: 880px; height: 311px;
background: url(metamorph_bluemess_lt2-images/header2.jpg) no-repeat;
}
.header3
{
width: 880px; height: 311px;
background: url(metamorph_bluemess_lt2-images/header3.jpg) no-repeat;
}
.header4
{
width: 880px; height: 311px;
background: url(metamorph_bluemess_lt2-images/header4.jpg) no-repeat;
}
/*
scroll styles here
*/
.item { width: 885px; height: 311px; padding-left: 0px;}
.item img {float:left;}
.item h2 { border:none; margin-bottom:15px;}
.scrollable { position:relative; overflow:hidden; width: 885px; height: 311px;}
.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: 19px; cursor:pointer; height: 19px; float:left; margin:0 0 0 1px; background:url(metamorph_bluemess_lt2-images/prev_but.png) no-repeat scroll right top; display:block; font-size:1px;}
.navi a:hover, .navi a.active { background-position:left top; margin:0 0 0 1px; background:url(metamorph_bluemess_lt2-images/prev_but_hov.png) no-repeat scroll right top}
/* ------------------------------------------------------------------------
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 style="height: 40px;">
<div id="search">
<form method="get" action="">
<fieldset>
<input type="text" value="" id="search-text" size="15" />
<input type="submit" id="search-submit" value="Search" />
</fieldset>
</form>
</div>
</div>
<div id="logo">
<a href="#">metamorph_bluemess</a>
<h2><a href="#"><small>Company Slogan Goes Here</small></a></h2>
</div>
<div id="buttons">
<a href="index.html" class="but" title="">Home</a>
<a href="blog.html" class="but" title="">Blog</a>
<a href="gallery.html" class="but" title="">Gallery</a>
<a href="about_us.html" class="but" title="">About us</a>
<a href="contact_us.html" class="but" title="">Contact us</a>
</div>
</div>
<!-- header ends -->
<div class="top">
<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>
<div class="top_bot">
<div class="navi"></div> <!-- create automatically the point dor the navigation depending on the numbers of items -->
</div>
<!-- content begins -->
<div id="content_top"></div>
<div id="content">
<h1>Welcome To Metamorphosis Design</h1>
<img src="metamorph_bluemess_lt2-images/img11.jpg" class="img_l" alt="" />
<span class="span_cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span><br />
Ut convallis rhoncus diam ut scelerisque. Nulla id mi ut augue laoreet commodo sed quis dolor. Aliquam sed arcu risus, non mattis nisi. Aenean urna tortor, consequat sed mattis eget, condimentum at lacus. Fusce elit nisl, vehicula ut interdum eget, faucibus ultricies turpis.<br />
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Quisque sed dolor est, ut pulvinar nunc. Quisque nec arcu a orci scelerisque facilisis non vel ligula. Integer ultrices lacus sapien. Sed id leo magna, bibendum viverra enim. Integer pulvinar cursus consectetur.
<div class="read_r"><a href="#">more</a></div><br />
<div class="razd_g"></div><br />
<div class="col">
<h1>Nunc tempus</h1>
<img src="metamorph_bluemess_lt2-images/col_img1.jpg" class="img_l" alt="" />Nunc tempus libero dictum lectus pharetra pretium. Ut eu massa vitae magna porta suada et ultrices vitae, commodo in velit. Etiam luctus rhoncus arcu, ac euismod leo feugiat vel. Morbi commodo nulla quis augue
<div class="read_r"><a href="#">more</a></div>
</div>
<div class="col_razd"></div>
<div class="col">
<h1 class="tit">Etiam luctus</h1>
<img src="metamorph_bluemess_lt2-images/col_img2.jpg" class="img_l" alt="" />Etiam luctus rhoncus arcu, ac euismod leo feugiat vel. Morbi commodo nulla quis augue cus viverra. Nunc tempus justo non nibh auctor vehicula tempor tellus ullamcorper. Morbi vitae consequat velit.
<div class="read_r"><a href="#">more</a></div>
</div>
<div class="col_razd"></div>
<div class="col">
<h1 class="tit">Suspendisse quis</h1>
<img src="metamorph_bluemess_lt2-images/col_img3.jpg" class="img_l" alt="" />Suspendisse quis ipsum a metus mattis pretium vitae et nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur urna odio, dapibus at mattis et,
<div class="read_r"><a href="#">more</a></div>
</div>
<div style="clear: both"></div>
<div style="height:15px; width: 100%"></div>
<div class="razd_g"></div>
<div style="clear: both"></div>
</div>
<div id="content_bot"></div>
<!-- content ends -->
<div style="height:15px; width: 100%"></div>
<!-- bottom begin -->
<div id="content_top"></div>
<div id="bottom">
<div id="b_col1">
<h1>About Us</h1>
<div style="height:5px; width: 100%"></div>
<img src="metamorph_bluemess_lt2-images/bottom_i1.jpg" alt="" /><div style="height:5px"></div>
Proin adipiscing fringilla nibh id hendrerit. Duis accumsan, arcu ac porta sus
<div class="more"><a href="#">more <img src="metamorph_bluemess_lt2-images/fish_more.gif" alt="" /></a> </div>
</div>
<div id="b_col2">
<h1>Services</h1>
<ul>
<li><a href="#">Free Web Templates</a></li>
<li><a href="#">Free Flash Templates</a></li>
<li><a href="#">Easy Flash Templates</a></li>
<li><a href="#">Top Hosting Providers</a></li>
<li><a href="#">Free Fonts</a></li>
<li><a href="#">Free Icons</a></li>
<li><a href="#">Free Photoshop Brushes</a></li>
<li><a href="#">RSS Subscribe</a></li>
</ul>
</div>
<div id="b_col3">
<h1>Follow Us</h1>
<ul>
<li><img src="metamorph_bluemess_lt2-images/fu_i1.gif" class=" fu_i" alt="" /><a href="#">Lorem ipsum dolor</a></li>
<li><img src="metamorph_bluemess_lt2-images/fu_i2.gif" class=" fu_i" alt="" /><a href="#">Maecenas in turpis </a></li>
<li><img src="metamorph_bluemess_lt2-images/fu_i3.gif" class=" fu_i" alt="" /><a href="#">Morbi fringilla libero</a></li>
<li><img src="metamorph_bluemess_lt2-images/fu_i4.gif" class=" fu_i" alt="" /><a href="#">In venenatis metus vel </a></li>
</ul>
</div>
<div id="b_col4">
<h1>Contact Information</h1>
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 style="clear: both; height:1px;"></div>
</div>
<div id="content_bot"></div>
<!-- bottom end -->
<!-- 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>
<!-- Please DO NOT remove the following notice --><p>Design by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates</a>, coded by <a href="http://www.flashtemplatesdesign.com/" title="Flash Web Templates">Flash Web Templates</a></p><!-- end of copyright notice-->
</div>
<!-- footer ends -->
</div>
</div>
</body>
</html>
Related examples in the same category