metamorph_redandblack_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;
margin:0px;
padding:0px;
}
form {
margin:0px;
padding:0px;}
body{
font: 12px Arial, Helvetica, sans-serif;
background: url(metamorph_redandblack_lt-images/bg.jpg) top repeat-x #000000;
line-height: 19px;
}
#main {
width: 800px;
margin: 0px auto;
background:url(metamorph_redandblack_lt-images/main.jpg) 0px repeat-y;
}
#header {
height: 108px;
padding: 0px 0px 0px 0px;
line-height:normal;
}
#logo {
height: 0px;
padding: 0px 0px 0px 0px;
}
#logo H2 {
font-family: Arial, Helvetica, sans-serif;
color:#ffffff;
font-size:18px;
font-style:italic;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 16px;
color: #ffffff;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight:100;
}
#buttons{
text-align:center;
height: 26px;
margin-left: 0px;
padding-top: 18px;
background: url(metamorph_redandblack_lt-images/but_bg.png) left top no-repeat;
padding-left: 295px;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
display: block;
float: left;
text-decoration: none;
color: #FFFFFF;
padding-top: 0px;
height: 20px;
font-weight: 500;
}
.but {
width: 100px;
text-align: center;
}
#buttons .but:hover {
text-decoration:underline;
}
.top {
height:320px;
background: #FFFFFF;}
.top_bot {
margin-top: 10px;
height:25px;
background: #FFFFFF;
}
.top_img {
float: right;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 20px;
}
.top_text h1 {
color:#700000;
font-size:18px;
padding: 5px 0px 0px 0px;
font-weight:100;
font-family: Georgia, "Times New Roman", Times, serif;
}
#content{
width: 800px;
background: url(metamorph_redandblack_lt-images/content.gif) left repeat-y;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#left{
width: 529px;
float: left;
color:#000000;
margin-left: 0px;
}
.img_l { float:left;
margin: 6px 10px 5px 0px;
}
.img_r { float: right;
margin: 9px 10px 3px 10px;
}
.span_cont { color: #630000;
font-size:12px;
font-weight:bold;
}
.span_100 {
color:#630000;
font-weight:100;
line-height: 18px;
}
h1{
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
font-weight: 100;
color: #ffffff;
text-align: left;
padding: 4px 0px 3px 10px;
background: url(metamorph_redandblack_lt-images/title.gif) top repeat-x;
}
.read {
height: 17px;
width: 56px;
padding-top: 1px;
padding-bottom: 0px;
background: #630000;
float: right;
text-align: center;
line-height: 15px;
display:block;
font-size:11px;
color: #ffffff;
font-weight:100;
text-decoration: none;
}
.read:hover{
padding: 0px 10px 0px 0px;
height: 17px;
width: 56px;
padding-top: 1px;
line-height: 15px;
}
.read a:hover {
font-size:11px;
text-decoration: underline;
}
.but_view a{
background: url(metamorph_redandblack_lt-images/but_view.png) right top no-repeat;
text-align: center;
padding: 0px;
width: 77px;
}
#right{
float: right;
width: 261px;
}
.under_a {
font-weight: 100;
color: #630000;
text-decoration:none;}
.clients {
}
.cli_l {
float:left;
width: 47px;}
.cli_r {
float:left;
width: 190px;}
.razd_right {
background: url(metamorph_redandblack_lt-images/razd_v.gif) left 9px repeat-x;
height:18px;}
.dat {
color: #630000;
text-decoration: underline;
font-weight:bold;}
.dat:hover {
text-decoration: none;}
#bottom {
width: 100%;
background: #FFFFFF;
padding: 0px 0px 10px 0px;
color:#630000;
}
#b_col1 {
width: 239px;
float: left;
text-align:center;
}
#b_col2 {
width: 285px;
float: left;
margin-left: 1px;
}
#b_col3 {
width: 274px;
float: left;
margin-left: 1px;
}
.input_txt {
width: 242px;
border: none;
padding: 2px 4px 2px 4px;
color:#000000;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
border: 1px solid #630000;
background: #E6E6E6;
}
.text_area {
font-size:12px;
width: 242px;
height:53px;
border: none;
padding: 2px 4px 2px 4px;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
border: 1px solid #630000;
background: #E6E6E6;
}
.send {
background: #630000;
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 2px 0px 2px 0px;
color: #ffffff;
text-decoration: none;
font-weight:100;
width: 56px;
margin: 0px 0px 0px 0px;
float:left;
line-height: 13px;
}
.form {line-height: 25px;}
#b_col2 ul {
list-style:none;
padding: 0px 0px 0px 0px;}
#b_col2 li {
padding: 6px 0px 3px 0px;
background: url(metamorph_redandblack_lt-images/ul_bot.gif) bottom repeat-x;
}
#bottom ul a:hover {
color: #630000;
}
#bottom ul a {
color:#630000;
text-decoration:none;
font-weight: bold;
}
.fu_i {
margin: 0px 18px 0px 0px;
vertical-align: middle ;
}
#b_col4 ul {
list-style:none;
padding: 0px 0px 0px 13px;}
#b_col4 li {
padding: 8px 0px 0px 0px;
background: none;
}
#footer{
height: 68px;
font-size: 12px;
color: #ffffff;
text-align: center;
padding: 25px 0px 0px 0px;
background: url(metamorph_redandblack_lt-images/footer_bg.gif) 0px 13px repeat-x;
}
#footer a{
color: #ffffff;
font-size: 12px;
text-decoration: none;
}
#footer a:hover{
color: #ffffff;
font-size: 12px;
text-decoration: underline;
}
.italic {
font-style:italic;
}
.bottom_i1 {
background:url(metamorph_redandblack_lt-images/bottom_i1.jpg) left top no-repeat;
width: 219px;
height: 112px;}
.bottom_i2 {
background:url(metamorph_redandblack_lt-images/bottom_i2.jpg) left top no-repeat;
width: 219px;
height: 112px; }
.bottom_i {
width: 219px;
height: 112px;
display:block;}
.bottom_i:hover {
background:url(metamorph_redandblack_lt-images/bottom_i_over.png) 0px 0px no-repeat;
}
/* blog */
.datc_comment {
height: 25px;
width: 100%;
background: url(metamorph_redandblack_lt-images/datc_comment.gif) top repeat-x;
padding-top: 1px;
}
.datc {
float: left;
color: #630000;}
.datc a {
color: #630000;
text-decoration:none;
font-weight:100;}
.datc a:hover {
text-decoration: underline;}
.text {
padding: 10px 10px 10px 10px;}
.spis {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis li {
padding: 6px 0px 2px 0px;
background: url(metamorph_redandblack_lt-images/spis.gif) 0px bottom repeat-x;
}
.spis a{
color:#000000;
text-decoration:none;
font-weight: 100;
}
.spis a:hover {
text-decoration: none;
}
/* calendar */
#calendar {
margin: 0px 0px 10px 0px;
color:#630000;
}
#calendar a {
color:#630000;
}
#calendar table {
width: 100%;
text-align: center;
}
#calendar thead {
}
#calendar tbody td {
border: 1px solid #630000;
}
#calendar #prev {
text-align: left;
}
#calendar #next {
text-align: right;
}
#calendar tfoot a {
text-decoration: none;
font-weight: bold;
}
#calendar #now {
background: #ECEBEB;
border: 1px solid #ff0000;
font-weight: bold;
color: #630000;
}
.text2 {
padding: 0px 10px 0px 10px;}
/* gallery */
#gallery {
background: #FFFFFF;
}
.gal_img {
background:url(metamorph_redandblack_lt-images/img31.jpg) 10px 0px no-repeat ;
height: 473px;
width: 100%;}
.row {
padding: 10px;
background: #ECE9E9;
}
.row_l {
width: 428px;
height:178px;
background: #ECE9E9;
float:left;
}
.row_r {
width: 322px;
background: #ffffff;
float:right;
}
.text_gal {
padding: 5px 10px 0px 10px;
height: 127px;}
.num {
background:url(metamorph_redandblack_lt-images/num.gif) left top no-repeat;
width: 14px;
height: 19px;
padding: 0px 0px 0px 5px;
line-height: 18px;
margin: 0px 3px 0px 0px;
float:left;
display:block;
color:#FFFFFF;
font-weight:bold;
text-decoration: none;
}
.num:hover{
background:url(metamorph_redandblack_lt-images/num_h.gif) left top no-repeat;
}
/* about us */
/* contact us */
.input_txt2 {
width: 494px;
border: none;
border: 1px solid #630000;
background: #E6E6E6;
padding: 4px 6px 4px 6px;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
}
.text_area2 {
height:125px;
width: 494px;
border: none;
border: 1px solid #630000;
background: #E6E6E6;
padding: 4px 6px 4px 6px;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
}
.submit2 {
background: #630000;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: #ffffff;
text-decoration: none;
padding: 1px 2px 1px 2px;
width: 56px;
margin: 0px 0px 0px 0px;
line-height: 13px;
font-size: 11px;
}
.box_us {
width: 240px;
background: url(metamorph_redandblack_lt-images/box_us.gif) 0px bottom repeat-x;
}
.box_us_l {
width: 26px;
float: left;
padding-top:4px;}
.box_us_r {
width: 212px;
float: left;
padding-top: 2px;}
/*
scroll styles here
*/
.item { width: 780px; height: 309px; padding-left: 10px; padding-top: 10px;}
.item img {float:left;}
.item h2 { border:none; margin-bottom:15px;}
.scrollable { position:relative; overflow:hidden; width: 790px; height: 309px; padding-left: 10px;}
.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:25px; margin:5px 0; margin-top: 15px; background: #ffffff; width: 794px; padding-top: 5px; padding-left: 6px}
.navi a { width: 19px; cursor:pointer; height: 19px; float:left; margin:0 0 0 5px; background:url(metamorph_redandblack_lt-images/num.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 5px; background:url(metamorph_redandblack_lt-images/num_h.gif) no-repeat scroll right top}
.header1
{
width: 780px; height: 309px;
background: url(metamorph_redandblack_lt-images/top.jpg) no-repeat;
}
.header2
{
width: 780px; height: 309px;
background: url(metamorph_redandblack_lt-images/top2.jpg) no-repeat;
}
.header3
{
width: 780px; height: 309px;
background: url(metamorph_redandblack_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="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="">Photo 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 id="logo">
<a href="#">metamorph_redandblack</a>
<h4><a href="#"><small>Company Slogan Goes Here</small></a></h4>
</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> <!-- items -->
</div> <!-- scrollable -->
</div>
<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>
<!-- content begins -->
<div id="content">
<div id="right">
<h1>Our ClientsTestimonials</h1>
<div class="text">
<div class="clients">
<div class="cli_l"><img src="metamorph_redandblack_lt-images/img_cli.jpg" alt="" /></div>
<div class="cli_r">
<span class="span_cont">Nulla aliquet dictum viverra. </span>Maecenas vulputate est quis arcu dignissim scelerisque. Lorem
</div>
<div style="clear: both;"></div>
</div>
<a href="#" class="under_a">John Johnson</a><br />
<a href="#" class="under_a">http://www.somewebsite.com</a>
<div class="razd_right"></div>
<div class="clients">
<div class="cli_l"><img src="metamorph_redandblack_lt-images/img_cli.jpg" alt="" /></div>
<div class="cli_r">
<span class="span_cont">Ut non lectus ipsum. </span><br />
Sed et sapien a arcu facilisis vehicula eu non arcu. Morbi in nisi
</div>
<div style="clear: both;"></div>
</div>
<a href="#" class="under_a">John Johnson</a><br />
<a href="#" class="under_a">http://www.somewebsite.com</a>
<div class="razd_right"></div>
<div class="clients">
<div class="cli_l"><img src="metamorph_redandblack_lt-images/img_cli.jpg" alt="" /></div>
<div class="cli_r">
<span class="span_cont">Ut non lectus ipsum. </span><br />
Sed et sapien a arcu facilisis vehicula eu non arcu. Morbi in nisi
</div>
<div style="clear: both;"></div>
</div>
<a href="#" class="under_a">John Johnson</a><br />
<a href="#" class="under_a">http://www.somewebsite.com</a>
<div class="razd_right"></div>
</div>
</div>
<div id="left">
<h1>Welcome To Our Website</h1>
<div class="text">
<img src="metamorph_redandblack_lt-images/img11.jpg" class="img_ind" alt="" />
<div style=" height:3px"></div>
<span class="span_cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>Phasellus facilisis, dolor ut pharetra mattis, felis nunc congue mi, quis rutrum lacus nisl vitae lacus. Nunc tristique neque sit amet ligula interdum vestibulum. Ut auctor, augue quis placerat viverra, enim sem vehicula sapien, sit amet dictum dui nunc in tellus. <div style=" height:3px"></div>
<span class="span_cont">Morbi id dolor felis. </span>Sed id sem sit amet neque facilisis pellentesque. Vestibulum sodales blandit enim, et faucibus erat volutpat eget. Vestibulum mollis nibh vel elit rutrum eu viverra urna sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div>
<div style="height: 3px"></div>
<div style="height: 18px">
<a href="#" class="read">read more</a>
</div>
</div>
<div style="clear: both; height: 0px"></div>
</div>
<!-- content ends -->
<div style="height:10px;"></div>
<!-- bottom begin -->
<div id="bottom">
<div id="b_col1">
<h1>Our Projects</h1>
<div class="text">
<div class="bottom_i1"><a href="#" class="bottom_i"></a></div>
<div style="height:10px; width: 100%;"></div>
<div class="bottom_i2"><a href="#" class="bottom_i"></a></div>
</div>
</div>
<div id="b_col2">
<h1>Recent Posts</h1>
<div class="text">
<ul>
<li><img src="metamorph_redandblack_lt-images/fish_ul.gif" alt="" /><a href="#">Lorem ipsum dolor sit amet, consect</a></li>
<li><img src="metamorph_redandblack_lt-images/fish_ul.gif" alt="" /><a href="#">Praesent interdum feugiat lectus, eu </a></li>
<li><img src="metamorph_redandblack_lt-images/fish_ul.gif" alt="" /><a href="#">Duis in orci mauris, ut commodo nunc.</a></li>
<li><img src="metamorph_redandblack_lt-images/fish_ul.gif" alt="" /><a href="#">Maecenas dapibus placerat turpis, vitae</a></li>
<li><img src="metamorph_redandblack_lt-images/fish_ul.gif" alt="" /><a href="#">Suspendisse ornare sem ac risus </a></li>
<li><img src="metamorph_redandblack_lt-images/fish_ul.gif" alt="" /><a href="#">Vivamus et velit varius ipsum faucibus </a></li>
<li><img src="metamorph_redandblack_lt-images/fish_ul.gif" alt="" /><a href="#">Duis id augue sit amet nulla pulvinar</a></li>
</ul>
<div style="height: 13px"></div>
<a href="#"><img src="metamorph_redandblack_lt-images/fu_i1.gif" class=" fu_i" alt="" /></a>
<a href="#"><img src="metamorph_redandblack_lt-images/fu_i2.gif" class=" fu_i" alt="" /></a>
<a href="#"><img src="metamorph_redandblack_lt-images/fu_i3.gif" class=" fu_i" alt="" /></a>
<a href="#"><img src="metamorph_redandblack_lt-images/fu_i4.gif" class=" fu_i" alt="" /></a>
<a href="#"><img src="metamorph_redandblack_lt-images/fu_i5.gif" class=" fu_i" alt="" /></a>
</div>
</div>
<div id="b_col3">
<h1>Get Free Quote</h1>
<div class="text">
<div class="form">
<form action="" method="post">
<p>Name</p>
<div><input class="input_txt" value="" name="name" type="text" /></div>
<p>E-mail</p>
<div>
<input class="input_txt" value="" name="e-mail" type="text" />
</div>
<p>Message</p>
<div><textarea class="text_area" cols="32" rows="3" name="message"></textarea></div>
<div style="height: 13px"></div>
<div style="height:18px;">
<input class="send" name="Submit" type="submit" value="Submit" />
<input class="send" style="margin: 0px 0px 0px 140px;" name="Submit" type="submit" value="Reset" />
</div>
</form>
</div>
</div>
</div>
<div style="clear: both"></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