metamorph_firealone_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: url(metamorph_firealone_lt-images/bg_top.jpg) top repeat-x #000000;
line-height: 18px;
}
#bg_bot {
background: url(metamorph_firealone_lt-images/bg_bot.jpg) center bottom no-repeat;}
#main {
width: 1001px;
margin: 0px auto;
background:url(metamorph_firealone_lt-images/main.jpg) right top no-repeat;}
#header {
height: 112px;
}
#logo {
padding: 42px 0px 0px 30px;
float:left;
width: 290px;
}
#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: 62px;
margin-left: 0px;
padding: 0px 0px 0px 20px;
background: url(metamorph_firealone_lt-images/buttons.png) left top no-repeat;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
display: block;
float: left;
text-decoration: none;
color: #ffffff;
text-align: center;
padding-top: 22px;
height: 40px;
width: 190px;
}
.but {
}
.but_razd { width: 3px;
height: 45px;
background:url(metamorph_firealone_lt-images/razd_but.gif);
float:left;}
#buttons .but:hover {
text-decoration: none;
background: url(metamorph_firealone_lt-images/but_hover.png) 2px repeat-x;}
.top { height:233px;
background: url(metamorph_firealone_lt-images/top_img.jpg) left top no-repeat;
padding: 0px 0px 0px 0px}
.png_top { height:15px;
background: url(metamorph_firealone_lt-images/png_top.png) left top no-repeat;}
.png_bot { height:15px;
background: url(metamorph_firealone_lt-images/png_bot.png) left bottom no-repeat;}
.png { background:url(metamorph_firealone_lt-images/png.png) ;
padding: 0px 0px 0px 15px;}
.cont_top { height: 8px;
background:url(metamorph_firealone_lt-images/cont_top.png) left top no-repeat;}
.cont_bot { height: 8px;
background:url(metamorph_firealone_lt-images/cont_bot.png) left bottom no-repeat;}
#content{
background: url(metamorph_firealone_lt-images/cont.png) left repeat-y;
width: 911px;
padding: 0px 30px 0px 30px;
}
#content_razd{
background: url(metamorph_firealone_lt-images/content_razd.gif) 658px repeat-y;
padding: 0px 0px 0px 0px;
clear:both;
}
a {
color: #666666;
text-decoration: none;}
a:hover {
color: #666666;
text-decoration: underline;}
#left{
width: 632px;
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;
}
.read{
display:block;
float:right;
height: 19px;
width: 84px;
text-align: center;
padding: 0px 0px 0px 0px;
text-decoration: none;
}
.read_bg1:hover {
text-decoration: underline;
color: #ffffff;
}
.read_bg1 {
color: #ffffff;
font-size:11px;
background: url(metamorph_firealone_lt-images/read.gif) left top no-repeat;}
.read_bg2 {
color: #b95c12;
font-size:12px;}
.read_bg2:hover {
color: #b95c12;
font-size:12px;
text-decoration: underline;}
.razd_v {
height: 20px;
background: url(metamorph_firealone_lt-images/razd_v.gif) 10px repeat-x;}
.home_box {
float: left;
width: 270px; }
#right{
float: right;
width: 230px;
margin-right: 0px;
}
#bottom {
width: 100%;
background: url(metamorph_firealone_lt-images/cont.png) left repeat-y;
color: #666666;
padding: 0px 0px 10px 0px;
}
.bottom_text { padding: 0px 0px 0px 19px;}
#bottom h2{
font-family: Arial, Helvetica, sans-serif;
padding: 9px 0px 9px 0px;
font-size: 14px;
text-align: center;
color: #ffffff;
font-weight: 100;
line-height: 20px;
background: url(metamorph_firealone_lt-images/h1_bottom.jpg) left top no-repeat;
}
.b_col1 {
width: 234px;
float: left;
margin-left: 10px;
line-height: 25px;
}
.b_col2 {
width: 234px;
float: left;
margin-left: 5px;
}
.b_col3 {
width: 234px;
float: left;
margin-left: 5px;
text-align: left;
}
.b_col4 {
width: 234px;
float: left;
margin-left: 5px;
text-align: left;
}
.b_col3 ul {
list-style:none;
padding: 0px 0px 0px 20px;}
.b_col3 li {
padding: 8px 0px 0px 20px;
background: url(metamorph_firealone_lt-images/fish1.gif) 0px 14px no-repeat;
}
.b_col3 ul a:hover {
text-decoration:underline;
}
.b_col3 ul a {
color:#666666;
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 20px;}
.b_col2 li {
padding: 8px 0px 2px 0px;
background: none;
}
.b_col2 li a {
color:#666666;
text-decoration: none;
}
.b_col2 li a:hover {
text-decoration: underline;
}
#footer{
height: 67px;
font-size: 12px;
color: #000000;
text-align: center;
padding: 25px 0px 0px 0px;
background: url(metamorph_firealone_lt-images/footer.jpg) 0px 15px no-repeat;
font-weight: bold;
}
#footer a{
color: #000000;
font-size: 12px;
text-decoration: none;
font-weight: bold;
}
#footer a:hover{
color: #000000;
font-size: 12px;
text-decoration: underline;
font-weight: bold;
}
/* blog */
.text{
padding: 10px 15px 15px 15px;
background: #FFFFFF;
clear:both;
}
.spis {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis li {
padding: 6px 0px 4px 2px;
background:url(metamorph_firealone_lt-images/spis.gif) bottom repeat-x;
}
.spis a:hover {
text-decoration: none;
}
.spis a {
color:#142B23;
text-decoration:none;
font-weight: bold;}
/* gallery */
.row {
padding: 0px 0px 0px 0px;
}
.box_img2 {
width: 277px;
background: #FFFFFF;
padding: 0px 0px 0px 0px;
float:left;
}
.box_img_text {
padding: 0px 0px 0px 10px;}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #B95C12;
text-align: left;
padding: 0px 0px 10px 0px;
text-align: center;
}
.box_razd {
width: 38px;
height: 50px;
float: left;
}
/* contact us */
.input_txt2 {
width: 610px;
border: none;
background: url(metamorph_firealone_lt-images/input_txt2.gif) left top repeat-x;
padding: 4px 10px 7px 10px;
color:#666666;
font-weight: bold;
font-family:Arial, Helvetica, sans-serif;
}
.text_area2 {
width: 610px;
height:92px;
font-size: 12px;
border: none;
background: url(metamorph_firealone_lt-images/text_area2.gif) 0px 0px repeat-x;
padding: 4px 10px 4px 10px;
color:#666666;
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
}
.submit2 {
background: url(metamorph_firealone_lt-images/read.gif) top repeat-x;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
color: #ffffff;
text-decoration: none;
padding: 1px 2px 3px 2px;
width: 84px;
margin: 0px 0px 0px 30px;
height: 19px;
font-weight: bold;
}
.cont_text { padding: 0px 0px 0px 10px;
line-height: 23px;}
/* 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_firealone_lt-images/top_left.png) no-repeat;}
.nivo-nextNav { background-position: left top; right: 0px; background:url(metamorph_firealone_lt-images/top_right.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_firealone_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="bg_bot">
<div id="main">
<!-- header begins -->
<div id="header">
<div id="logo">
<a href="#">metamorph_firealone</a>
<h2><a href="#"><small>Company Slogan Goes Here</small></a></h2>
</div>
</div>
<!-- header ends -->
<div class="top">
<div id="slider_bg">
<div class="waveshow">
<img src="metamorph_firealone_lt-images/top_img.jpg" alt="" title="Some Text 1 Goes Here" />
<img src="metamorph_firealone_lt-images/top_img2.jpg" alt="" title="Some Text 2 Goes Here" />
<img src="metamorph_firealone_lt-images/top_img3.jpg" alt="" title="Some Text 3 Goes Here" />
</div> <!-- waveshow -->
</div> <!-- slider_bg -->
</div>
<div id="buttons">
<a href="index.html" class="but" title="">Home</a><div class="but_razd"></div>
<a href="about_us.html" class="but" title="">About Us</a><div class="but_razd"></div>
<a href="gallery.html" class="but" title="">Gallery</a><div class="but_razd"></div>
<a href="license.html" class="but" title="">License</a><div class="but_razd"></div>
<a href="contact_us.html" class="but" title="">Contact us</a>
</div>
<div style="height:10px"></div>
<!-- content begins -->
<div class="png_top"></div>
<div class="png">
<div class="cont_top"></div>
<div id="content">
<div style="height:12px"></div>
<h1>Company Title Goes Here</h1>
<div style="height:5px"></div>
<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. <br />
<div style="height:3px"></div>
<div style="height:20px">
<a href="#" class="read read_bg2">read more...</a>
</div>
<div style="height:3px"></div>
<div class="razd_v"></div>
<div style="height:10px"></div>
<div>
<div class="home_box">
<h1>Company News</h1>
<div style="height:10px"></div>
<img src="metamorph_firealone_lt-images/img11.jpg" class="img_l" alt="" /><b>Quisque luctus, mi ornare</b><br />
Suspendisse tempus aliquet elit sit amet pellentesque. Donec iaculis pulvinar mauris, ac vulputate justo
<div style="height:10px"></div>
<div style="height:20px">
<a href="#" class="read read_bg1">read more</a>
</div>
</div><div style="width: 50px; height:16px; float: left;"></div>
<div class="home_box">
<h1>Your Options</h1>
<div style="height:10px"></div>
<img src="metamorph_firealone_lt-images/img12.jpg" class="img_l" alt="" /><b>Quisque luctus, mi ornare</b><br />
Suspendisse tempus aliquet elit sit amet pellentesque. Donec iaculis pulvinar mauris, ac vulputate justo
<div style="height:10px"></div>
<div style="height:20px">
<a href="#" class="read read_bg1">read more</a>
</div>
</div><div style="width: 50px; height:16px; float: left;"></div>
<div class="home_box">
<h1>New Users</h1>
<div style="height:10px"></div>
<img src="metamorph_firealone_lt-images/img13.jpg" class="img_l" alt="" /><b>Quisque luctus, mi ornare</b><br />
Suspendisse tempus aliquet elit sit amet pellentesque. Donec iaculis pulvinar mauris, ac vulputate justo
<div style="height:10px"></div>
<div style="height:20px">
<a href="#" class="read read_bg1">read more</a>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div style="height:10px"></div>
<div class="razd_v"></div>
<div style="height:10px"></div>
<h1>Company Title Goes Here</h1>
<div style="height:5px"></div>
<img src="metamorph_firealone_lt-images/img14.jpg" class="img_r" 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
<div style="clear: both; height: 12px;"></div>
</div>
<div class="cont_bot"></div>
<!-- content ends -->
<div style="height: 15px;"></div>
<!-- bottom begin -->
<div class="cont_top"></div>
<div id="bottom">
<div class="b_col1">
<h2>Contact Information</h2>
<div class="bottom_text">
<div style="height:15px"></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>
<div class="b_col2">
<h2>Follow Us</h2>
<div class="bottom_text">
<div style="height:15px"></div>
<ul>
<li><img src="metamorph_firealone_lt-images/fu_i1.gif" class=" fu_i" alt="" /><a href="#">Lorem ipsum dolor</a></li>
<li><img src="metamorph_firealone_lt-images/fu_i2.gif" class=" fu_i" alt="" /><a href="#">Maecenas in turpis </a></li>
<li><img src="metamorph_firealone_lt-images/fu_i3.gif" class=" fu_i" alt="" /><a href="#">Morbi fringilla libero</a></li>
<li><img src="metamorph_firealone_lt-images/fu_i4.gif" class=" fu_i" alt="" /><a href="#">In venenatis metus vel </a></li>
</ul>
</div>
</div>
<div class="b_col3">
<h2>Useful Resources</h2>
<div class="bottom_text">
<div style="height:15px"></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>
<div class="b_col4">
<h2>Recent posts</h2>
<div class="bottom_text">
<div style="height:15px"></div>
<a href="#"><b>Suspendisse rutrum interdum lacinia.</b></a> Suspendisse tempus aliquet elit sit amet pellentesque. Donec iaculis <br />
<br />
<a href="#"><b>Quisque luctus, mi ornare</b></a> Suspendisse tempus aliquet elit sit amet pellentesque. Donec iaculis pulvinar mauris, ac vulputate justo
</div>
</div>
<div style="clear: both; height:1px;"></div>
</div>
<div class="cont_bot"></div>
</div>
<div class="png_bot"></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>
</div>
</body>
</html>
Related examples in the same category