metamorph_synchronized_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="" />
<!-- 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
*/
*
{
border: 0;
margin: 0;
}
img
{
border: 0px;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #666666;
background: #E4E4E4;
line-height: 20px;
}
#main {
width: 961px;
margin: 0px auto;
background:url(metamorph_synchronized_lt-images/main.jpg) right top no-repeat;}
#header {
height: 129px;
}
#logo {
height: 53px;
padding: 10px 0px 0px 27px;
}
#logo H2 {
font-family: Arial, Helvetica, sans-serif;
color:#864C00;
font-size:18px;
font-style:italic;
}
#logo a {
text-decoration: none;
font-style: italic;
font-size: 16px;
color: #864C00;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight:100;
}
#buttons{
text-align:center;
height: 58px;
margin-left: 0px;
padding: 8px 0px 0px 360px;
background: url(metamorph_synchronized_lt-images/buttons.gif) left top no-repeat;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
display: block;
float: left;
text-decoration: none;
color: #ffffff;
text-align: center;
padding-top: 13px;
height: 33px;
font-weight: bold;
}
.but {
width: 115px;
}
#buttons .but:hover {
background:url(metamorph_synchronized_lt-images/but_hov.gif) left top repeat-x;
}
.top { height: 285px;
background:url(metamorph_synchronized_lt-images/top.jpg) center top no-repeat;}
#content{
padding: 0px 12px 0px 12px;
background: #FFFFFF;
}
.cont_bot{
background: url(metamorph_synchronized_lt-images/cont_bot.png) left bottom no-repeat;
height: 10px;
width: 100%;
}
#cont_razd{
background: url(metamorph_synchronized_lt-images/cont_razd.gif) 631px repeat-y;
width: 100%;
}
.home_box {
float: left;
width: 274px; }
.razd_h { background: url(metamorph_synchronized_lt-images/razd_h.gif) left repeat-x;
height: 1px;
clear: both; }
#left{
width: 618px;
float: left;
}
.img_l { float:left;
margin: 6px 25px 5px 0px;
}
.img_r { float: right;
margin: 9px 10px 3px 10px;
}
H1{
font-family: Arial, Helvetica, sans-serif;
font-size:24px;
font-weight: 100;
color: #864C00;
text-align: left;
padding: 0px 0px 0px 0px;
}
.h1_home_box {
padding: 15px 0px 0px 0px;}
.read {
font-size:12px;
color: #FF0000;
text-decoration: none;
padding-right: 2px;
display:block;
height: 10px;
line-height: 10px;
width: 66px;
padding: 3px 10px 0px 0px;
text-align: center;
float: right;
font-weight: bold;
}
.read:hover {
font-size:12px;
text-decoration: underline;
}
#right{
float: right;
width: 285px;
margin-right: 0px;
}
.span_dat {
text-decoration: underline;
font-weight: bold;}
#bottom {
width: 100%;
background: url(metamorph_synchronized_lt-images/bottom.jpg) left bottom no-repeat #3D3D3D;
color: #FFFFFF;
}
#bottom h1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: 100;
font-size: 18px;
color: #864C00;
line-height: normal;}
.bottom_h1 {
background: url(metamorph_synchronized_lt-images/bottom_h1.gif) top repeat-x;
padding: 0px 0px 40px 0px;}
.b_col1 {
width: 220px;
height: 204px;
float: left;
margin-left: 30px;
line-height: 25px;
}
.b_col2 {
width: 153px;
height: 204px;
float: left;
margin-left: 50px;
text-align: left;
}
.b_col3 {
width: 156px;
height: 204px;
float: left;
margin-left: 50px;
}
.b_col4 {
width: 218px;
height: 204px;
float: left;
margin-left: 50px;
text-align: left;
}
.b_col3 ul {
list-style:none;
padding: 0px 0px 0px 0px;}
.b_col3 li {
padding: 8px 0px 0px 20px;
background: url(metamorph_synchronized_lt-images/fish2.gif) 0px 14px no-repeat;
}
.b_col3 ul a:hover {
text-decoration:underline;
}
.b_col3 ul a {
color:#ffffff;
text-decoration:none;
font-weight: bold;}
.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: 8px 0px 2px 0px;
background: none;
}
.b_col2 li a {
color:#FFFFFF;
text-decoration: none;
}
.b_col2 li a:hover {
text-decoration: underline;
}
#footer{
height: 63px;
font-size: 12px;
color: #666666;
text-align: center;
padding: 27px 0px 0px 0px;
background: url(metamorph_synchronized_lt-images/footer.jpg) 0px 15px no-repeat;
font-weight: bold;
}
#footer a{
color: #666666;
font-size: 12px;
text-decoration: none;
font-weight: bold;
}
#footer a:hover{
color: #666666;
font-size: 12px;
text-decoration: underline;
font-weight: bold;
}
/* blog */
.dat_img {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
float:left;
width: 50px;
height: 46px;
padding: 4px 0px 0px 0px;
margin-right: 20px;
background:url(metamorph_synchronized_lt-images/dat_img.gif) 0px 0px no-repeat;
text-align:center;
}
.datc_coment {
height: 27px;
width: 540px;
background:url(metamorph_synchronized_lt-images/datc_coment.gif) top repeat-x;
padding: 4px 0px 0px 0px;}
.datc {
float: left;
width: 346px;}
.coment {
float: right;
width: 146px;
text-align: right;}
.datc_coment a {
color: #666666;
text-decoration:none;
font-weight: bold;}
.datc_coment a:hover {
text-decoration:underline;}
.img_ind1 {
padding: 17px 0px 10px 0px;}
.text_ind1 {
padding: 0px 87px 0px 0px;}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size:20px;
font-weight: 100;
color: #04078E;
text-align: left;
padding: 0px 0px 0px 0px;
}
.spis {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis li {
padding: 8px 0px 3px 15px;
background: url(metamorph_synchronized_lt-images/spis.gif) left bottom no-repeat;
}
.spis a:hover {
text-decoration: none;
color: #FF0000;
}
.spis a {
color:#666666;
text-decoration:none;
font-weight: bold;}
.gal_num {
width:13px;
height:21px;
padding: 0px 0px 0px 7px;
display:block;
background: url(metamorph_synchronized_lt-images/gal_num.gif) left top no-repeat;
color: #FFFFFF;
font-size: 12px;
margin: 0px 5px 0px 0px;
text-decoration:none;
float: left;}
.gal_num:hover {
background:url(metamorph_synchronized_lt-images/gal_num_hover.gif) left top no-repeat;
text-decoration: none;}
.a_blog {
font-family: Arial, Helvetica, sans-serif;
font-size:24px;
font-weight: 100;
color: #864C00;
text-align: left;
padding: 0px 0px 0px 0px;
text-decoration: none;
}
.a_blog:hover { text-decoration: underline;}
/* gallery */
.row {
padding: 0px 0px 0px 17px;
}
.box_img2 {
width: 277px;
background: url(metamorph_synchronized_lt-images/box_img.jpg) 0px 0px no-repeat;
padding: 0px 0px 0px 0px;
float:left;
}
.box_razd {
width: 36px;
height: 50px;
float: left;
}
.text_gal { padding: 8px 0px 10px 10px;}
.box_img2 h1 {
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #864C00;
text-align: center;
padding: 5px 0px 8px 0px;
}
.rol_over:hover {
background:url(metamorph_synchronized_lt-images/rol_over_galery.png) left top no-repeat;
}
/* about us */
.fish_about { padding: 5px 10px 5px 0px;
float:left;}
/* contact us */
.input_txt2 {
width: 575px;
border: none;
background: url(metamorph_synchronized_lt-images/input_txt2.gif) left top repeat-x;
padding: 7px 15px 7px 15px;
color:#ffffff;
}
.text_area2 {
width: 575px;
height:119px;
font-size: 14px;
border: none;
background: url(metamorph_synchronized_lt-images/text_area2.gif) 0px 0px repeat-x;
padding: 8px 15px 8px 15px;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
}
.submit2 {
background: url(metamorph_synchronized_lt-images/but_read.gif) top repeat-x;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size:24px;
color: #864C00;
text-decoration: none;
padding: 0px 2px 5px 2px;
height: 28px;
width: 80px;
margin: 0px 15px 0px 0px;
}
.lh {
line-height: 20px;
}
.spis2 {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis2 li {
padding: 0px 0px 0px 15px;
background: url(metamorph_synchronized_lt-images/spis2.gif) left 7px no-repeat;
}
.spis2 a:hover {
text-decoration: none;
color: #FF0000;
font-weight: bold;
}
.spis2 a {
color:#666666;
text-decoration:none;
font-weight: bold;}
/* 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; text-indent:-9999%;}
.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_synchronized_lt-images/prev_h.png) no-repeat;}
.nivo-nextNav { background-position: left top; right: 0px; background:url(metamorph_synchronized_lt-images/next_h.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_synchronized_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="main">
<!-- header begins -->
<div id="header">
<div id="logo">
<a href="#">metamorph_synchronized</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="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 -->
<!-- content begins -->
<div id="content">
<div class="top">
<div id="slider_bg">
<div class="waveshow">
<img src="metamorph_synchronized_lt-images/top.jpg" alt="" title="Some Text 1 Goes Here" />
<img src="metamorph_synchronized_lt-images/top2.jpg" alt="" title="Some Text 2 Goes Here" />
<img src="metamorph_synchronized_lt-images/top3.jpg" alt="" title="Some Text 3 Goes Here" />
</div> <!-- waveshow -->
</div> <!-- slider_bg -->
</div>
<div style="height:32px"></div>
<div style=" padding: 0px 0px 0px 13px">
<div class="home_box">
<img src="metamorph_synchronized_lt-images/img11.gif" style="padding: 0px 17px 0px 0px; float:left;" alt="" />
<h1 class="h1_home_box">Company News</h1>
<div class="razd_h"></div>
<div style="height:5px"></div>
<b>Quisque luctus, mi ornare </b><br />
Suspendisse tempus aliquet elit sit amet pellen- tesque. Donec iaculis pulvinar mauris, ac vulpu- tate justo pretium quis. Morbi id magna ac tortor pulvinar facilisis. Nunc sed elit id enim placerat
<div style="height:15px;"><a class="read" href="#">read more</a></div>
</div>
<div style="width: 45px; height:20px; float: left;"></div>
<div class="home_box">
<img src="metamorph_synchronized_lt-images/img12.gif" style="padding: 0px 17px 0px 0px; float:left;" alt="" />
<h1 class="h1_home_box">Your Options</h1>
<div class="razd_h"></div>
<div style="height:5px"></div>
<b>Suspendisse rutrum interdum lacinia. </b><br />
Suspendisse tempus aliquet elit sit amet pellen- tesque. Donec iaculis pulvinar mauris, ac vulpu- tate justo pretium quis. Morbi id magna ac tortor pulvinar facilisis. Nunc sed elit id enim placerat
<div style="height:15px;"><a class="read" href="#">read more</a></div>
</div>
<div style="width: 45px; height:20px; float: left;"></div>
<div class="home_box">
<img src="metamorph_synchronized_lt-images/img13.gif" style="padding: 0px 17px 0px 0px; float:left;" alt="" />
<h1 class="h1_home_box">New Users</h1>
<div class="razd_h"></div>
<div style="height:5px"></div>
<b>Quisque luctus, mi ornare </b><br />
Suspendisse tempus aliquet elit sit amet pellen- tesque. Donec iaculis pulvinar mauris, ac vulpu- tate justo pretium quis. Morbi id magna ac tortor pulvinar facilisis. Nunc sed elit id enim placerat
<div style="height:15px;"><a class="read" href="#">read more</a></div>
</div>
<div style="clear: both"></div>
</div>
<div style="height:32px"></div>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<div style="height:10px"></div>
<div class="razd_h"></div>
<div style="height:5px"></div>
<img src="metamorph_synchronized_lt-images/img14.jpg" class="img_l" alt="" />
<b>Suspendisse rutrum interdum lacinia. </b><br />
Suspendisse tempus aliquet elit sit amet pellentesque. Donec iaculis pulvinar mauris, ac vulputate justo pretium quis. Morbi id magna ac tortor pulvinar facilisis. Nunc sed elit id enim placerat pulvinar. Donec tincidunt scelerisque sem at tincidunt. Integer ipsum sem, malesuada in ultrices eget, sollicitudin in elit. Phasellus molestie urna vel enim pharetra varius. Nam iaculis mattis eros, sit amet auctor tellus blandit at. Maecenas a urna dui. Aliquam erat volutpat. Donec luctus scelerisque enim. Nam vel felis metus. Curabitur est ante, condimentum ac faucibus nec, commodo sit
<img src="metamorph_synchronized_lt-images/img15.jpg" class="img_r" alt="" />
Suspendisse tempus aliquet elit sit amet pellentesque. Donec iaculis pulvinar mauris, ac vulputate justo pretium quis. Morbi id magna ac tortor pulvinar facilisis. Nunc sed elit id enim placerat pulvinar. Donec tincidunt scelerisque sem at tincidunt. Integer ipsum sem, malesuada in ultrices eget, sollicitudin in elit. Phasellus molestie urna vel
<div style="clear: both; height: 30px;"></div>
</div>
<!-- content ends -->
<!-- bottom begin -->
<div id="bottom">
<div class="bottom_h1">
<div class="b_col1">
<h1>Contact Information</h1>
<div style="height:30px"></div>
1234 SomeStreet<br />
Brooklyn, NY 11201<br />
Phone: 1(234) 567 8910<br />
Fax: 1(234) 567 8910<br />
E-mail: <b>companyname@yahoo.com</b>
</div>
<div class="b_col2">
<h1>Follow Us</h1>
<div style="height:30px"></div>
<ul>
<li><img src="metamorph_synchronized_lt-images/fu_i1.png" class=" fu_i" alt="" /><a href="#"><strong>Subscribe to Blog</strong></a></li>
<li><img src="metamorph_synchronized_lt-images/fu_i2.png" class=" fu_i" alt="" /><a href="#"><strong>Be a fan on Facebook</strong></a></li>
<li><img src="metamorph_synchronized_lt-images/fu_i3.png" class=" fu_i" alt="" /><a href="#"><strong>RSS Feed</strong></a></li>
<li><img src="metamorph_synchronized_lt-images/fu_i4.png" class=" fu_i" alt="" /><a href="#"><strong>Follow us on Twitter</strong></a></li>
</ul>
</div>
<div class="b_col3">
<h1>Useful Resources</h1>
<div style="height:30px"></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 class="b_col4">
<h1>Recent Posts</h1>
<div style="height:30px"></div>
<b>Suspendisse rutrum interdum lacinia.</b> Suspendisse tempus aliquet elit sit amet pellentesque. Donec iaculis <br />
<br />
<b>Quisque luctus, mi ornare</b><br />
Suspendisse tempus aliquet elit sit amet pellentesque. Donec iaculis pulvinar mauris, ac vulputate justo
</div>
<div style="clear: both;"></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