metamorph_greenlight_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: #ffffff;
background: url(metamorph_greenlight_lt-images/bg_top.jpg) center top no-repeat #000000;
line-height: 18px;
}
#bg_bot {
background: url(metamorph_greenlight_lt-images/bg_bot.jpg) center bottom no-repeat;}
#main {
width: 952px;
margin: 0px auto;
background:url(metamorph_greenlight_lt-images/main.jpg) right top no-repeat;}
#header {
width:952px;
height: 190px;
}
#logo {
padding: 115px 0px 0px 0px;
float:left;
width: 210px;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-size: 14px;
font-weight:bold;
color: #ffffff;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
#buttons{
float:right;
width: 728px;
text-align:center;
height: 48px;
margin-left: 0px;
padding-top: 10px;
background: url(metamorph_greenlight_lt-images/but_bg.png) left top no-repeat;
}
#buttons a {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
display: block;
float: left;
text-decoration: none;
color: #ffffff;
text-align: left;
padding-top: 13px;
height: 25px;
width: 115px;
padding: 5px 0px 0px 30px;
text-transform:uppercase;
background: url(metamorph_greenlight_lt-images/but.png) left top no-repeat;
}
#buttons .but:hover {
text-decoration: none;
background: url(metamorph_greenlight_lt-images/but_hover.png) left top no-repeat;}
.top { height:248px;
background: url(metamorph_greenlight_lt-images/top.jpg) left top no-repeat;
padding: 0px 0px 0px 0px}
.circl { background: url(metamorph_greenlight_lt-images/but.png) left top no-repeat;
height: 30px;
width: 30px;
margin: 10px 10px 0px 0px;
float:right; }
.circl:hover {
background: url(metamorph_greenlight_lt-images/but_hover.png) left top no-repeat; }
#content{
background: #000000;
width: 922px;
padding: 15px 15px 15px 15px;
border: 1px solid #FFFFFF;
}
#content_razd {
background:url(metamorph_greenlight_lt-images/content_razd.gif) right repeat-y;}
.i_left {
width: 552px;
float:left;}
.i_right {
width: 355px;
float:right;}
.i_razd { background:url(metamorph_greenlight_lt-images/i_razd.gif) 552px repeat-y; }
.razd_v { background:url(metamorph_greenlight_lt-images/i_razd.gif) left 15px repeat-x;
height: 30px;
clear: both;}
.i_box_w {
padding: 0px 14px 0px 0px;}
#left{
width: 273px;
float: left;
color:#ffffff;
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: bold;
color: #ffffff;
text-align: left;
padding: 5px 0px 3px 0px;
line-height: 20px;
}
.img_h1 { float: left;
padding: 4px 5px 0px 0px;}
.read{
display:block;
float:right;
height: 20px;
width: 65px;
text-align: center;
padding: 0px 0px 0px 0px;
text-decoration: underline;
font-size:12px;
color: #016A0D;
font-weight: bold;
}
.read:hover {
font-size:12px;
text-decoration: none;
}
#right{
float: right;
width: 630px;
margin-right: 0px;
}
#bottom {
width: 100%;
background:url(metamorph_greenlight_lt-images/bot_bg.gif) left repeat-y;
color:#CBCBC9;
padding: 0px 0px 15px 0px;
}
.bottom_bg_h1 {
padding: 15px 0px 0px 0px;
background: url(metamorph_greenlight_lt-images/bot_bg_h1.gif) top repeat-x;}
#bottom h2{
font-family: Arial, Helvetica, sans-serif;
padding: 0px 0px 0px 0px;
font-size: 18px;
text-align: left;
color: #ffffff;
font-weight: bold;
line-height: 20px;
}
.b_col1 {
width: 157px;
float: left;
margin-left: 42px;
}
.b_col2 {
width: 167px;
float: left;
margin-left: 29px;
}
.b_col3 {
width: 218px;
float: left;
margin-left: 27px;
text-align: left;
}
.b_col4 {
width: 204px;
float: left;
margin-left: 40px;
text-align: left;
line-height: 25px;
}
.b_col2 ul {
list-style:none;
padding: 0px 0px 0px 0px;}
.b_col2 li {
padding: 8px 0px 0px 20px;
background: url(metamorph_greenlight_lt-images/fish1.gif) 0px 14px no-repeat;
}
.b_col2 ul a:hover {
text-decoration:underline;
}
.b_col2 ul a {
color:#CBCBC9;
text-decoration:none;}
.fu_i {
padding: 0px 14px 0px 0px;
vertical-align: middle ;
}
.b_col1 ul {
list-style:none;
padding: 0px 0px 0px 0px;}
.b_col1 li {
padding: 8px 0px 2px 0px;
background: none;
}
.b_col1 li a {
color:#CBCBC9;
text-decoration: none;
}
.b_col1 li a:hover {
text-decoration: underline;
}
.a_bottom {
color: #CBCBC9;
text-decoration:underline;}
.a_bottom:hover { text-decoration:none;}
#footer{
height: 53px;
font-size: 12px;
color: #ffffff;
text-align: center;
padding: 20px 0px 0px 0px;
background: url(metamorph_greenlight_lt-images/footer.jpg) 0px 15px no-repeat;
}
#footer a{
color: #ffffff;
font-size: 12px;
text-decoration: none;
}
#footer a:hover{
color: #ffffff;
font-size: 12px;
text-decoration: underline;
}
/* blog */
.text{
padding: 10px 14px 15px 14px;
}
.und { text-decoration: underline;}
.h1_left { padding: 5px 0px 10px 0px;
border-bottom: 1px solid #FFFFFF;}
.dat_img {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color: #142B23;
float:left;
width: 30px;
height: 30px;
padding: 10px 0px 0px 10px;
margin-right: 15px;
background:url(metamorph_greenlight_lt-images/dat_img.gif) 0px 0px no-repeat;}
.a_non {
text-decoration: none;
color: #ffffff;}
.a_non:hover {
text-decoration: underline;}
.a_und {
text-decoration: underline;
color: #ffffff;}
.a_und:hover {
text-decoration: none;}
.datc_coment {
height: 20px;
width: 100%;
padding: 0px 0px 0px 0px;}
.datc {
float: left;
width: 346px;}
.coment {
float: right;
width: 146px;
text-align:right;}
.spis {
list-style:none;
padding: 0px 0px 0px 0px;
}
.spis li {
padding: 6px 0px 4px 2px;
background: url(metamorph_greenlight_lt-images/spis.gif) bottom repeat-x;
}
.spis a:hover {
text-decoration: none;
}
.spis a {
color:#ffffff;
text-decoration:none;
font-weight: bold;}
/* gallery */
.row {
padding: 0px 0px 0px 0px;
height: 229px;
}
.box_img2 {
width: 267px;
padding: 14px 14px 14px 14px;
float:left;
border: 1px solid #007900;
}
.img_height
{
height: 129px;
}
.box_razd {
width: 15px;
height: 50px;
float: left;
}
/* 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: 570px;
border: none;
background: #000000;
padding: 6px 15px 6px 15px;
color:#FFFFFF;
border: 1px solid #FFFFFF;
}
.text_area2 {
width: 570px;
height:120px;
font-size: 14px;
border: none;
background: #000000;
padding: 6px 15px 6px 15px;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
border: 1px solid #FFFFFF;
}
.submit2 {
background: url(metamorph_greenlight_lt-images/read_bg1.gif) top repeat-x;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color: #007900;
text-decoration: none;
padding: 2px 2px 2px 2px;
width: 63px;
margin: 0px 0px 0px 15px;
text-decoration: underline;
}
.lh { line-height: 22px;}
/*
scroll styles here
*/
.item { width: 922px; height:248px;}
.item img {float:left;}
.item h2 { border:none; margin-bottom:15px;}
.scrollable { position:relative; overflow:hidden; width: 922px; height: 248px;}
.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: 30px; cursor:pointer; height: 30px; float:left; margin:0 0 0 3px; background:url(metamorph_greenlight_lt-images/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 3px; background:url(metamorph_greenlight_lt-images/but_hover.png) no-repeat scroll right top}
.header1
{
width: 922px; height: 248px;
background: url(metamorph_greenlight_lt-images/top.jpg) no-repeat;
}
.header2
{
width: 922px; height: 248px;
background: url(metamorph_greenlight_lt-images/top2.jpg) no-repeat;
}
.header3
{
width: 922px; height: 248px;
background: url(metamorph_greenlight_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="bg_bot">
<div id="main">
<!-- header begins -->
<div id="header">
<div id="logo">
<a href="#">metamorph_greenlight</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="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 style="height: 50px; vertical-align:top;">
<div class="navi"></div> <!-- create automatically the point dor the navigation depending on the numbers of items -->
</div>
<div class="i_razd">
<div class="i_left">
<div style="height:10px"></div>
<div class="i_box_w">
<img src="metamorph_greenlight_lt-images/img11.jpg" class="img_l" alt="" />
<img src="metamorph_greenlight_lt-images/h1.png" class="img_h1" alt="" />
<h1>Praesent ipsum neque.</h1>
<div style="height:8px"></div>
<b>Volutpat vel tincidunt quis, auctor vitae leo. </b><br />
Pellentesque vitae risus ac odio pharetra varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices. <br />
<div style="height:4px"></div>
<div style="height:20px">
<a href="#" class="read">read more</a>
</div>
<div style="height:4px"></div>
<b>Nam nisl sapien, gravida non rhoncus sed, sodales nec leo. </b>Vestibulum bibendum ante sit amet libero scelerisque elementum. Mauris at magna odio, vitae sagittis dui. Pellentesque vehicula, ante ac egestas elementum.
<div style="height:4px"></div>
<div style="height:20px">
<a href="#" class="read">read more</a>
</div>
</div>
<div class="razd_v"></div>
<div class="i_box_w">
<img src="metamorph_greenlight_lt-images/h1.png" class="img_h1" alt="" /><h1>Pellentesque vitae risus ac odio pharetra varius.</h1>
<div style="height:8px"></div>
<img src="metamorph_greenlight_lt-images/img12.jpg" class="img_r" alt="" /><b>Fusce venenatis lobortis nunc.</b><br />
Vitae laoreet mi ultricies at. Mauris in dui eget lacus lobortis ultrices. Proin tellus risus, suscipit quis euismod in.<br /><br />
<b>In lobortis tristique elit.</b><br />
Non fringilla leo adipiscing a. Aenean fringilla sapien ante. Mauris lacus tortor, interdum vel vulputate et, feugiat sed
<div style="height:4px"></div>
<div style="height:20px">
<a href="#" class="read">read more</a>
</div>
</div>
</div>
<div class="i_right">
<img src="metamorph_greenlight_lt-images/img13.jpg" alt="" />
<div style="height:7px"></div>
<img src="metamorph_greenlight_lt-images/h1.png" class="img_h1" alt="" /><h1>In in risus tellus.</h1>
<div style="height:10px"></div>
<b>Suspendisse vitae laoreet magna.</b><br />
Integer malesuada porttitor elit, at cursus massa malesuada a. Donec vel nulla a enim iaculis tempus. Nullam quis dolor. <br />
<br />
<b>Nulla pellentesque ultrices sit amet pellentesque ligula.</b><br />
In id purus sed ligula luctus egestas. Sed augue dui, egestas ut viverra eu, scelerisque sed magna.Mauris nibh nulla, faucibus a sagittis at, lacinia in tellus.
<div style="height:4px"></div>
<div style="height:20px">
<a href="#" class="read">read more</a>
</div>
</div>
<div style="clear: both"></div>
</div>
<div style="height:14px"></div>
<!-- bottom begin -->
<div id="bottom">
<div class="bottom_bg_h1">
<div class="b_col1">
<h2>Follow Us</h2>
<div style="height:20px"></div>
<ul>
<li><img src="metamorph_greenlight_lt-images/fu_i1.gif" class=" fu_i" alt="" /><a href="#">Lorem ipsum dolor</a></li>
<li><img src="metamorph_greenlight_lt-images/fu_i2.gif" class=" fu_i" alt="" /><a href="#">Maecenas in turpis </a></li>
<li><img src="metamorph_greenlight_lt-images/fu_i3.gif" class=" fu_i" alt="" /><a href="#">Morbi fringilla libero</a></li>
<li><img src="metamorph_greenlight_lt-images/fu_i4.gif" class=" fu_i" alt="" /><a href="#">In venenatis metus vel </a></li>
</ul>
</div>
<div class="b_col2">
<h2>Services</h2>
<div style="height:20px"></div>
<ul>
<li><a href="#">Service Number 1</a></li>
<li><a href="#">Service Number 2 </a></li>
<li><a href="#">Service Number 3</a></li>
<li><a href="#">Service Number 4</a></li>
<li><a href="#">Service Number 5 </a></li>
<li><a href="#">Service Number 6</a></li>
<li><a href="#">Service Number 7</a></li>
<li><a href="#">Service Number 8</a></li>
</ul>
</div>
<div class="b_col3">
<h2>About Us</h2>
<div style="height:30px"></div>
<img src="metamorph_greenlight_lt-images/img14.jpg" class="img_l" alt="" />
<a href="#" class="a_bottom">Integer malesuada porttitor elit, at cursus massa malesuada a.?</a>
<div style="height:15px; clear:both"></div>
<img src="metamorph_greenlight_lt-images/img15.jpg" class="img_l" alt="" />
<a href="#" class="a_bottom">Donec vel nulla a enim iaculis tempus.?</a><br />
<div style="height:15px; clear:both"></div>
<img src="metamorph_greenlight_lt-images/img16.jpg" class="img_l" alt="" />
<a href="#" class="a_bottom">In in risus tellus. Suspendisse vitae laoreet magna.?</a>
</div>
<div class="b_col4">
<h2>Contact Information</h2>
<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: companyname@yahoo.com
</div>
<div style="clear: both;"></div>
</div>
</div>
<!-- bottom end -->
<div style="clear: both; height: 12px;"></div>
</div>
<!-- content ends -->
<!-- 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