metamorph_redflowers_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>
<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_redflowers_lt-images/bg_top.jpg) center top no-repeat #000000;
line-height: 18px;
}
#bg_bot { background: url(metamorph_redflowers_lt-images/bg_bot.gif) bottom repeat-x;
min-height: 1300px; }
#main {
width: 802px;
margin: 0px auto;
background:url(metamorph_redflowers_lt-images/main.jpg) right top no-repeat;}
#header {
height: 222px;
}
#logo {
padding: 54px 0px 0px 0px;
}
#logo a {
text-decoration: none;
font-size: 14px;
color: #ffffff;
font-weight:bold;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: 100;
padding-left: 0px;
}
#buttons{
text-align:center;
height: 47px;
margin-left: 0px;
padding: 22px 0px 0px 0px;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: 100;
display: block;
float: left;
text-decoration: none;
color: #ffffff;
text-align: center;
padding-top: 14px;
height: 33px;
width: 152px;
background: url(metamorph_redflowers_lt-images/but.png) left top no-repeat;
}
#buttons .but_n {
background: url(metamorph_redflowers_lt-images/but_hover.png) left top no-repeat;
color:#000000;
}
.but_razd { height: 10px;
width: 10px;
float: left;}
#buttons .but:hover {
text-decoration: none;
color: #000000;
background: url(metamorph_redflowers_lt-images/but_hover.png) left top no-repeat;
}
.top { height:281px;
padding: 0px 16px 0px 16px;
}
.top_left { float: left;
background: url(metamorph_redflowers_lt-images/top_left.gif) left top no-repeat;
width: 285px;
height: 271px;
margin-right: 14px;
}
.spis_top { list-style: none;
padding: 0px 0px 0px 16px;
}
.spis_top li { background: url(metamorph_redflowers_lt-images/spis_top.gif) 0px 11px no-repeat;
padding: 4px 0px 0px 23px;}
.spis_top a { color:#FFFFFF;
text-decoration: none;
font-size:14px;}
.spis_top a:hover { text-decoration:underline;}
.top_img { background: url(metamorph_redflowers_lt-images/top_img.jpg) left top no-repeat;
height: 271px;
width: 471px;
float: right;}
.circl_all {
height: 17px;
vertical-align:top;
padding: 7px 15px 7px 0px;}
.circl { background: url(metamorph_redflowers_lt-images/circl.gif) left top no-repeat;
height: 17px;
width: 17px;
margin: 0px 7px 0px 0px;
float:right; }
.circl:hover {
background:url(metamorph_redflowers_lt-images/circl_hov.gif) left top no-repeat; }
.cont_top { background: url(metamorph_redflowers_lt-images/cont_top.png) left top no-repeat;
height: 16px;}
.cont_bot { background: url(metamorph_redflowers_lt-images/cont_bot.png) left bottom no-repeat;
height: 15px;}
#content{
background: url(metamorph_redflowers_lt-images/content.gif) left repeat-y;
padding: 0px 0px 0px 0px;
}
.content_razd{
background: url(metamorph_redflowers_lt-images/content_razd.gif) 832px repeat-y;
padding: 0px 0px 0px 0px;
clear:both;
}
h3 {
color: #324003;
font-weight: 100;
font-size: 18px;
text-align: center;
padding: 0px 0px 10px 0px;
}
.all_box { background: url(metamorph_redflowers_lt-images/all_box.gif) center top no-repeat;
padding: 15px 0px 0px 16px;}
.razd_col {
background:url(metamorph_redflowers_lt-images/razd_col.gif) 25px 5px no-repeat;
height: 35px;
float:left;
width: 19px;}
.home_box {
float: left;
width: 244px;
padding: 0px 0px 0px 0px;}
.row_ind {}
a:hover {
color: #666666;
text-decoration: underline;}
#left{
width: 251px;
float: left;
margin-left: 16px;
padding: 0px 0px 0px 0px;
}
.img_l { float:left;
margin: 5px 20px 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: #FF0000;
text-align: left;
padding: 0px 0px 0px 0px;
}
.read{
display:block;
float: right;
width: 74px;
text-align: center;
padding: 2px 0px 0px 0px;
text-decoration: none;
color: #FF0000;
text-decoration: underline;
font-size:12px;
font-weight: 100;
background: url(metamorph_redflowers_lt-images/read.png) left top no-repeat;
}
.read:hover {
text-decoration: none;
color: #ff0000;
}
.read2{
display:block;
float: right;
width: 74px;
text-align: left;
padding: 2px 0px 0px 0px;
text-decoration: none;
color: #FF0000;
text-decoration: none;
font-size:12px;
font-weight: 100;
}
.read2:hover {
text-decoration: underline;
color: #FF0000;
}
.text { padding: 0px 16px 0px 16px;}
#right{
float: right;
width: 507px;
margin-right: 14px;
}
.span_dat {
color: #000000;
text-decoration: underline;
font-weight:bold;}
.span_cont { color: #324003;
font-weight:bold;}
#bottom {
width: 100%;
background: url(metamorph_redflowers_lt-images/bottom.gif) left repeat-y;
color:#ffffff;
padding: 0px 0px 0px 0px;
}
.bottom_top { background:url(metamorph_redflowers_lt-images/bottom_top.gif) left top no-repeat;}
.bottom_bot { background:url(metamorph_redflowers_lt-images/bottom_bot.gif) left bottom no-repeat;
padding-top: 40px;}
#bottom h2{
font-family: Arial, Helvetica, sans-serif;
padding: 0px 0px 0px 0px;
font-size: 18px;
text-align: center;
color: #FF0000;
font-weight: 100;
line-height: 20px;
}
.b_col1 {
width: 230px;
float: left;
margin-left: 70px;
}
.b_col2 {
width: 178px;
float: left;
margin-left: 30px;
}
.b_col3 {
width: 200px;
float: left;
margin-left: 53px;
text-align: left;
}
.lh { line-height: 25px;}
.spis {
list-style:none;
padding: 0px 0px 0px 20px;}
.spis li {
padding: 5px 0px 0px 20px;
background: url(metamorph_redflowers_lt-images/spis_top.gif) 0px 12px no-repeat;
}
.spis a:hover {
text-decoration:underline;
}
.spis a {
color:#ffffff;
text-decoration:none;}
.fu_i {
padding: 0px 14px 0px 0px;
vertical-align: middle ;
}
.spisb2 {
list-style:none;
padding: 0px 0px 0px 20px;}
.spisb2 li {
padding: 10px 0px 0px 0px;
background: none;
}
.spisb2 li a {
color:#ffffff;
text-decoration: none;
padding-top: 2px;
font-weight:100;
}
.spisb2 li a:hover {
text-decoration: underline;
}
#footer{
height: 55px;
font-size: 10px;
color: #ffffff;
text-align: center;
padding: 15px 0px 0px 0px;
background: url(metamorph_redflowers_lt-images/footer.jpg) 0px 15px no-repeat;
font-weight: 100;
}
#footer a{
color: #ffffff;
font-size: 10px;
text-decoration: none;
font-weight: 100;
}
#footer a:hover{
color: #ffffff;
font-size: 10px;
text-decoration: underline;
font-weight: 100;
}
/* blog */
.a_h1 {
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #ff0000;
text-align: left;
padding: 0px 0px 0px 0px;
line-height: 20px;
}
.a_h1:hover { text-decoration:underline;
color: #ff0000;}
.a_h1:hover {
text-decoration: none;}
.right_box_top { background: url(metamorph_redflowers_lt-images/right_box_top.gif) left top no-repeat;}
.right_box_bot {background: url(metamorph_redflowers_lt-images/right_box_bot.gif) left bottom no-repeat;
padding: 16px 16px 16px 16px;}
.right_box_bg { background: url(metamorph_redflowers_lt-images/right_box_bg.gif) left repeat-y;}
.img_h1 { float: left;
padding: 0px 18px 0px 0px;}
.a_und {
text-decoration: underline;
color: #ffffff;
font-weight:100;
}
.a_und:hover {
text-decoration: none;
color:#FFFFFF;}
.razd_v { background: url(metamorph_redflowers_lt-images/spis_l.gif) bottom repeat-x;
height: 1px;}
.datc_coment {
height: 20px;
width: 100%;
background: url(metamorph_redflowers_lt-images/datc_coment.gif) top repeat-x;
padding: 5px 0px 0px 0px;}
.datc {
float: left;
width: 246px;}
.coment {
float: right;
width: 146px;
text-align:right;}
.spis_l {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis_l li {
padding: 5px 0px 3px 0px;
background: url(metamorph_redflowers_lt-images/spis_l.gif) bottom repeat-x;
}
.spis_l a:hover {
text-decoration: underline;
}
.spis_l a {
color:#ffffff;
text-decoration:none;
font-weight: 100;}
.h1_left { padding: 5px 0px 7px 0px;
border-bottom: 2px solid #ffffff;
color: #ff0000;}
.a_non {
text-decoration: none;
color: #ffffff;}
.a_non:hover {
text-decoration: underline;
color: #ffffff;}
/* gallery */
.row {
background: url(metamorph_redflowers_lt-images/row.gif) 2px top no-repeat;
}
.row_bot {
background: url(metamorph_redflowers_lt-images/row_bot.gif) 2px bottom no-repeat;
padding: 14px 0px 15px 15px;
}
.box_img2 {
width: 247px;
background: url(metamorph_redflowers_lt-images/box_img.jpg) left top no-repeat;
padding: 0px 0px 0px 0px;
float:left;
}
.myheight
{
height: 107px
}
.box_razd {
width: 15px;
height: 50px;
float: left;
}
/* contact us */
.input_txt2 {
width: 447px;
border: none;
background: url(metamorph_redflowers_lt-images/input_txt2.gif) left top repeat-x;
padding: 8px 15px 8px 15px;
color:#ffffff;
}
.text_area2 {
width: 447px;
height:118px;
font-size: 14px;
border: none;
background: url(metamorph_redflowers_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_redflowers_lt-images/but_read.gif) top repeat-x;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
color: #ff0000;
text-decoration: underline;
padding: 0px 2px 5px 2px;
height: 28px;
width: 70px;
margin: 0px 10px 0px 0px;
background: url(metamorph_redflowers_lt-images/read.png) left top no-repeat;
}
/*
scroll styles here
*/
.item { width: 770px; height: 280px; }
.item img {float:left;}
.item h2 { border:none; margin-bottom:15px;}
.scrollable { position:relative; overflow:hidden; width: 770px; height: 280px;}
.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: 17px; cursor:pointer; height: 17px; float:left; margin:0 0 0 3px; background:url(metamorph_redflowers_lt-images/circl.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 3px; background:url(metamorph_redflowers_lt-images/circl_hov.gif) no-repeat scroll right top}
.header1
{
width: 770px; height: 280px;
}
.header2
{
width: 770px; height: 280px;
}
.header3
{
width: 770px; height: 280px;
}
.header4
{
width: 770px; height: 280px;
}
/* ------------------------------------------------------------------------
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="buttons">
<a href="index.html" class="but but_n" title="">Home</a><div class="but_razd"></div>
<a href="blog.html" class="but" title="">Blog</a><div class="but_razd"></div>
<a href="gallery.html" class="but" title="">Gallery</a><div class="but_razd"></div>
<a href="about_us.html" class="but" title="">About Us</a><div class="but_razd"></div>
<a href="contact_us.html" class="but" title="">Contact us</a>
</div>
<div id="logo">
<a href="#">metamorph_redflowers</a>
<h2><a href="#" id="metamorph"><small>Small Company Slogan Goes Here</small></a></h2>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div class="cont_top"></div>
<div id="content">
<div class="top">
<div class="scrollable">
<div class="items">
<div class="item">
<div class="header1">
<div class="top_left">
<div style="height:10px"></div>
<h1 style=" padding: 10px">Praesent ipsum neque.</h1>
<ul class="spis_top">
<li><a href="#"> vel tincidunt quis, auctor vitae leo;</a></li>
<li><a href="#">vitae risus ac odio pharetra varius;</a></li>
<li><a href="#">vestibulum ante ipsum primis;</a></li>
<li><a href="#">orci luctus et ultrices posuere; </a></li>
<li><a href="#">bibendum ante sit amet libero;</a></li>
<li><a href="#">vehicula, ante ac egestas;</a></li>
<li><a href="#">ante ante volutpat lorem, sed;</a></li>
<li><a href="#">quam mi a velit; </a></li>
<li><a href="#"> venenatis lobortis nunc, vitae; </a></li>
</ul>
</div>
<div class="top_img"><img src="metamorph_redflowers_lt-images/top_img2.jpg" alt="" /></div>
</div>
</div> <!-- item -->
<div class="item">
<div class="header2">
<div class="top_left">
<div style="height:10px"></div>
<h1 style=" padding: 10px">Odio pharetra varius</h1>
<div style="padding: 10px;">Aenean sed lectus eget ipsum pellentesque gravida vitae nec lectus. Pellentesque vestibulum blandit velit non dignissim.<br /><br /> Donec sit amet molestie massa. Mauris adipiscing, dui quis eleifend suscipit, magna turpis blandit nisl, id vestibulum tellus urna iaculis dui. <br /><br /> Donec sit amet molestie massa. Mauris adipiscing, dui quis eleifend suscipit, magna turpis blandit nisl. </div>
</div>
<div class="top_img"></div>
</div>
</div> <!-- item -->
<div class="item">
<div class="header3">
<div class="top_left">
<div style="height:10px"></div>
<h1 style=" padding: 10px">Praesent ipsum neque.</h1>
<ul class="spis_top">
<li><a href="#"> vel tincidunt quis, auctor vitae leo;</a></li>
<li><a href="#">vitae risus ac odio pharetra varius;</a></li>
<li><a href="#">vestibulum ante ipsum primis;</a></li>
<li><a href="#">orci luctus et ultrices posuere; </a></li>
<li><a href="#">bibendum ante sit amet libero;</a></li>
<li><a href="#">vehicula, ante ac egestas;</a></li>
<li><a href="#">ante ante volutpat lorem, sed;</a></li>
<li><a href="#">quam mi a velit; </a></li>
<li><a href="#"> venenatis lobortis nunc, vitae; </a></li>
</ul>
</div>
<div class="top_img"><img src="metamorph_redflowers_lt-images/top_img3.jpg" alt="" /></div>
</div>
</div> <!-- item -->
<div class="item">
<div class="header4">
<div class="top_left">
<div style="height:10px"></div>
<h1 style=" padding: 10px">Praesent ipsum neque.</h1>
<div style="padding: 10px;">Aenean sed lectus eget ipsum pellentesque gravida vitae nec lectus. Pellentesque vestibulum blandit velit non dignissim.<br /><br /> Donec sit amet molestie massa. Mauris adipiscing, dui quis eleifend suscipit, magna turpis blandit nisl, id vestibulum tellus urna iaculis dui. <br /><br /> Donec sit amet molestie massa. Mauris adipiscing, dui quis eleifend suscipit, magna turpis blandit nisl. </div>
</div>
<div class="top_img"><img src="metamorph_redflowers_lt-images/top_img4.jpg" alt="" /></div>
</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 class="all_box">
<div class="home_box">
<img src="metamorph_redflowers_lt-images/img1b.png" style="float: left" alt="" />
<div style="height:5px"></div>
<h1>Sed laoreet enim ut sem.</h1>
<div style=" clear:both; height: 5px"></div>
<b>Sit amet, consectetur adipiscing elit.</b><br />
Sed enim ante, faucibus in pharetra et, condimentum non lorem. Vestibulum tempor ligula est. Nulla tellus mi, sodales tincidunt ultrices vehicula, mattis vel justo. Sed in nisl leo, sit amet ornare enim.
<div style="height:27px;">
<a href="#" class="read">read more</a>
</div>
</div>
<div class="razd_col"></div>
<div class="home_box">
<img src="metamorph_redflowers_lt-images/img2b.png" style="float: left" alt="" />
<div style="height:5px"></div>
<h1>Nunc eget mi id risus.</h1>
<div style=" clear:both; height: 5px"></div>
<b>Interdum non id massa.</b><br />
Nulla mollis, magna quis feugiat faucibus, risus lorem lacinia justo, et adipiscing tortor lacus in nunc. Duis in tellus vel ipsum bibendum gravida. Nunc eget mi id risus tempor rhoncus. Integer lectus sapien.
<div style="height:27px;">
<a href="#" class="read">read more</a>
</div>
</div><div class="razd_col"></div>
<div class="home_box">
<img src="metamorph_redflowers_lt-images/img3b.png" style="float: left" alt="" />
<div style="height:5px"></div>
<h1>Quisque iaculis facilisis. </h1>
<div style=" clear:both; height: 5px"></div>
<b>Accumsan eu lobortis urna mollis.</b><br />
Sed a tellus orci, a luctus enim. Aliquam congue nisi quis felis porttitor vestibulum. Nam eget metus dui, eu consectetur urna. Donec sed mauris quis nisl iaculis ullamcorper.
<div style="height:27px;">
<a href="#" class="read">read more</a>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div style="height:10px"></div>
<div class="text">
<h1>Donec vel nulla a enim iaculis tempus.</h1>
<div style="height:10px"></div>
<img src="metamorph_redflowers_lt-images/img11.jpg" class="img_l" alt="" /><b>Nullam quis dolor suscipit nulla pellentesque</b><br />
Ultrices sit amet pellentesque ligula. In id purus sed ligula luctus egestas. Sed augue dui, egestas ut viverra eu.<br /><br />
<b>Scelerisque sed magna.</b><br />
Mauris nibh nulla, faucibus a sagittis at, lacinia in tellus. Quisque lorem enim, malesuada id dignissim id.
<div style="height:27px;">
<a href="#" class="read">read more</a>
</div>
<div style="clear: both; height: 20px"></div>
</div>
<!-- bottom begin -->
<div id="bottom">
<div class="bottom_top">
<div class="bottom_bot">
<div class="b_col1">
<h2>Contact Information</h2>
<div style="height:15px"></div>
<div class="lh">
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>
<div class="b_col2">
<h2>Services</h2>
<div style="height:15px"></div>
<ul class="spis">
<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>
</ul>
</div>
<div class="b_col3">
<h2>Follow Us</h2>
<div style="height:20px"></div>
<ul class="spisb2">
<li><img src="metamorph_redflowers_lt-images/fu_i1.gif" class=" fu_i" alt="" /><a href="#">Subscribe to Blog</a></li>
<li><img src="metamorph_redflowers_lt-images/fu_i2.gif" class=" fu_i" alt="" /><a href="#">Be a fan on Facebook </a></li>
<li><img src="metamorph_redflowers_lt-images/fu_i3.gif" class=" fu_i" alt="" /><a href="#">RSS Feed</a></li>
<li><img src="metamorph_redflowers_lt-images/fu_i4.gif" class=" fu_i" alt="" /><a href="#">Follow us on Twitter</a></li>
</ul>
</div>
<div style="clear: both; height:20px;"></div>
</div>
</div>
</div>
<!-- bottom end -->
</div>
<div class="cont_bot"></div>
<!-- content ends -->
<!-- footer begins -->
<div id="footer">
Copyright 2011. <!-- Do not remove -->Designed by <a href="http://www.metamorphozis.com/shop/easy_flash_templates.php" title="Flash Templates">Flash Templates</a>, coded by <a href="http://www.myfreecsstemplates.com/" title="Free CSS Templates">Free CSS Templates</a><!-- end --><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