metamorph_shinyblur_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: #000000;
background: url(metamorph_shinyblur_lt-images/bg.jpg) center top repeat-x #000000;
line-height: 20px;
}
#main {
width: 1014px;
margin: 0px auto;
background:url(metamorph_shinyblur_lt-images/main.jpg) right top no-repeat;}
#header {
height: 203px;
}
#logo {
height: 102px;
padding: 50px 30px 0px 0px;
text-align: right;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-size: 14px;
font-weight:100;
color: #ffffff;
text-align: right;
}
#logo H3 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight: 100;
text-align: right;
}
#buttons{
text-align:center;
height: 34px;
margin-left: 496px;
background: url(metamorph_shinyblur_lt-images/buttons.png) center top no-repeat;
width: 515px;
padding-left: 3px;
padding-top: 8px;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
display: block;
float: left;
text-decoration: none;
color: #ffffff;
text-align: center;
padding-top: 2px;
height: 20px;
width: 100px;
}
.but {
}
.but_razd {
width: 3px;
height: 8px;
float:left;}
#buttons .but:hover {
text-decoration: none;
background:url(metamorph_shinyblur_lt-images/but_hover.jpg);}
.top { height:340px;
background:url(metamorph_shinyblur_lt-images/top.png) left top no-repeat;}
.top_text {
width: 942px;
float:left;
background: url(metamorph_shinyblur_lt-images/content_text.png);
height:308px;
padding: 0px 32px 0px 0px;}
.top_img {
float:left;
padding: 15px 31px 0px 15px;
}
.top h1 {
color:#ffffff;
font-size:16px;
padding: 5px 0px 15px 8px;
font-weight: bold;
background: url(metamorph_shinyblur_lt-images/h1_top.gif) left top no-repeat;
}
.top_left { width: 470px;
padding: 5px 0px 0px 5px;
float: left;
height: 335px;}
.top_right { width: 535px;
float: left;
background: url(metamorph_shinyblur_lt-images/img11.jpg) left 4px no-repeat;
height: 340px;}
.top_right2 { width: 535px;
float: left;
background: url(metamorph_shinyblur_lt-images/img11_2.jpg) left 4px no-repeat;
height: 340px;}
.top_right3 { width: 535px;
float: left;
background: url(metamorph_shinyblur_lt-images/img11_3.jpg) left 4px no-repeat;
height: 340px;}
.top_right4 { width: 535px;
float: left;
background: url(metamorph_shinyblur_lt-images/img11_4.jpg) left 4px no-repeat;
height: 340px;}
#content{
}
.circl { background: url(metamorph_shinyblur_lt-images/circl.gif) left top no-repeat;
height: 15px;
width: 17px;
margin: 0px 2px 0px 2px;
float:left; }
.circl:hover {
background:url(metamorph_shinyblur_lt-images/circl_hov.gif) left top no-repeat; }
.ram1_bg {
background: url(metamorph_shinyblur_lt-images/ram1_bg.jpg) left top no-repeat #A19F9F;
padding: 0px 10px 0px 15px;
}
.ram1_bot {
background:url(metamorph_shinyblur_lt-images/ram1_bot.jpg) left bottom no-repeat;
height: 12px; }
.span_cont{
font-size:12px;
color:#7B3401;
font-weight:bold;
}
.span_cont2 {
font-size:12px;
color:#7B3401;
font-weight:bold;
background: url(metamorph_shinyblur_lt-images/fish_top.gif) no-repeat 5px 8px;
padding-left: 30px;
padding-top: 5px;
}
.read_but {
float:right;
margin: 0px 40px 0px 0px;
background: url(metamorph_shinyblur_lt-images/but_read.gif) left top no-repeat;
width: 114px;
height: 23px;
padding: 5px 0px 0px 0px;
text-align: center;
vertical-align: middle;
}
.read_but a {
height: 28px;
color:#FFFFFF;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;}
.read_but a:hover { text-decoration:underline;}
.i_col_razd {}
.float_left {float:left;}
.i_col {
width: 318px;
float: left;
background: url(metamorph_shinyblur_lt-images/i_col.png) left top no-repeat;
padding: 5px 5px 0px 5px;
height: 214px;}
.i_col h1 {
background: url(metamorph_shinyblur_lt-images/i_col_h1.jpg) left top no-repeat;
padding: 5px 0px 15px 8px;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;}
.ram2_bg {
background: url(metamorph_shinyblur_lt-images/ram2_bg.gif) left repeat-y;
}
.ram2_bot {
background:url(metamorph_shinyblur_lt-images/ram2_bot.gif) left bottom no-repeat;
height: 12px; }
.a_more {
height:32px;
padding: 11px 0px 0px 0px;
width: 156px;
float:right;
margin: 10px 0px 0px 10px;
background: url(metamorph_shinyblur_lt-images/a_more.jpg) ;
display: block;
font-family: Georgia, "Times New Roman", Times, serif;
color:#FFFFFF;
text-align:center;
font-size: 18px;
text-decoration:none;
}
.a_more:hover {
background: url(metamorph_shinyblur_lt-images/a_more_hover.jpg);
}
.left{
width: 671px;
float: left;
color:#000000;
margin-left: 0px;
padding: 0px 0px 0px 0px;
background: url(metamorph_shinyblur_lt-images/left.gif) left top no-repeat #A19F9F;
}
.left_bot {
background: url(metamorph_shinyblur_lt-images/left_bot.gif) left bottom no-repeat;
padding: 0px 5px 10px 5px;
}
.left H1 {
background: url(metamorph_shinyblur_lt-images/h1_left.jpg) left top no-repeat;
color:#ffffff;
font-size:16px;
padding: 5px 0px 15px 8px;
font-weight: bold;}
.img_l {
float:left;
margin: 5px 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: #000000;
text-align: left;
padding: 0px 0px 0px 0px;
line-height: 20px;
}
H2{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: bold;
color: #D84005;
text-align: center;
padding: 0px 0px 0px 0px;
line-height: 20px;
}
.read{
display:block;
float:right;
height: 16px;
width: 79px;
text-align: center;
padding: 0px 0px 0px 0px;
text-decoration: none;
font-size:11px;
color: #C42A0F;
background: url(metamorph_shinyblur_lt-images/read.gif) 0px 0px no-repeat;
line-height: 16px;
}
.read:hover {
font-size:11px;
text-decoration: underline;
}
#right{
float: right;
width: 328px;
margin-right: 0px;
}
.span_dat {
color: #002380;
text-decoration: underline;}
.bot_top {
height: 13px;
background: url(metamorph_shinyblur_lt-images/bot_top.gif) 0px 0px no-repeat;
}
.bot_bot {
height: 13px;
background: url(metamorph_shinyblur_lt-images/bot_bot.gif) 0px bottom no-repeat;
}
#bottom {
width: 100%;
background:url(metamorph_shinyblur_lt-images/bot_bg.gif) left repeat-y;
color:#FFFFFF;
padding: 0px 0px 0px 0px;
}
#bottom h2{
font-family: Arial, Helvetica, sans-serif;
padding: 0px 0px 0px 0px;
font-size: 18px;
text-align: center;
color: #ffffff;
font-weight: 100;
line-height: 20px;
}
.razd_bot {
background:url(metamorph_shinyblur_lt-images/razd_bot.gif) repeat-x;
height: 1px;}
.b_col2 {
width: 254px;
float: left;
margin-left: 76px;
}
.box_us {
width: 245px;
background: url(metamorph_shinyblur_lt-images/box_us.gif) 0px bottom repeat-x;
padding-left: 10px;
}
.box_us_l {
width: 28px;
float: left;
padding-top:2px;
vertical-align: top;
text-align:left;}
.box_us_r {
width: 217px;
float: left;}
.b_col3 {
width: 253px;
float: left;
margin-left: 76px;
line-height: 25px;
}
.b_col3 ul {
list-style:none;
padding: 0px 0px 0px 40px;}
.b_col3 li {
padding: 8px 0px 2px 0px;
background: none;
}
.b_col3 li a {
color:#FFFFFF;
text-decoration: none;
}
.b_col3 li a:hover {
text-decoration: underline;
}
.fu_i {
padding: 0px 14px 0px 0px;
vertical-align: middle ;
}
.b_col1 {
width: 254px;
float: left;
margin-left: 50px;
text-align: left;
}
.b_col1 ul {
list-style:none;
padding: 0px 0px 0px 40px;}
.b_col1 li {
padding: 8px 0px 0px 20px;
background: url(metamorph_shinyblur_lt-images/fish2.gif) 0px 15px no-repeat;
}
.b_col1 ul a:hover {
text-decoration:underline;
}
.b_col1 ul a {
color:#ffffff;
text-decoration:none;
font-weight:bold;}
#footer{
height: 60px;
font-size: 12px;
color: #ffffff;
text-align: center;
padding: 15px 0px 0px 0px;
background:url(metamorph_shinyblur_lt-images/razd_bot.gif) top repeat-x;
}
#footer a{
color: #ffffff;
font-size: 12px;
text-decoration: none;
}
#footer a:hover{
color: #ffffff;
font-size: 12px;
text-decoration: underline;
}
/* blog */
.text{
padding: 0px 10px 0px 10px;
}
.span_munth {
color:#FFFFFF;
font-size:10px;}
.dat_img {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #ffffff;
float:left;
width: 67px;
height: 55px;
padding: 10px 0px 0px 0px;
margin-right: 15px;
background:url(metamorph_shinyblur_lt-images/dat_img.gif) 0px 0px no-repeat;
text-align:center;
}
.a_non {
text-decoration: none;
color: #ffffff;}
.a_non:hover {
text-decoration: underline;}
.a_und {
text-decoration: underline;
color: #ffffff;
font-weight: bold;}
.a_und:hover {
text-decoration: none;}
.datc_coment {
height: 20px;
width: 100%;
background: url(metamorph_shinyblur_lt-images/datc_coment.gif) top repeat-x;
padding: 0px 0px 0px 0px;}
.datc {
float: left;
width: 346px;}
.coment {
float: right;
width: 166px;
text-align: left;}
.ram_top {
background: url(metamorph_shinyblur_lt-images/ram_top.gif) left top no-repeat #A19F9F;
width: 318px;
padding: 0px 5px 0px 5px;
}
.ram_bg h1 {
background: url(metamorph_shinyblur_lt-images/h1_ram_bg.jpg) left top no-repeat;
padding: 5px 0px 10px 8px;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;}
.ram_bot {
background:url(metamorph_shinyblur_lt-images/ram_bot.gif) left bottom no-repeat;
height: 10px; }
.spis {
list-style:none;
padding: 0px 0px 0px 23px;}
.spis li {
padding: 6px 0px 0px 22px;
background: url(metamorph_shinyblur_lt-images/fish2.gif) 0px 12px no-repeat;
}
.spis a:hover {
text-decoration: none;
}
.spis a {
color:#ffffff;
text-decoration: underline;
font-weight: bold;
display: block;}
.blog_l_razd {
background: url(metamorph_shinyblur_lt-images/blog_l_razd.gif) 12px repeat-x;
height:12px;}
/* gallery */
.gallery {
background:url(metamorph_shinyblur_lt-images/gallery.gif) left top no-repeat #A19F9F;}
.gallery_bot {
background: url(metamorph_shinyblur_lt-images/gallery_bot.gif) left bottom no-repeat;
padding: 5px 5px 0px 5px;
}
.row {
padding: 0px 0px 0px 0px;
height: 284px;
}
.box_img2 {
width: 308px;
height: 274px;
background: url(metamorph_shinyblur_lt-images/box_img.gif) left top no-repeat;
padding: 10px 10px 0px 10px;
float:left;
}
.gallery h3 {
padding: 5px 0px 5px 0px;
color: #C32609;
font-size: 16px;
text-align: left;
}
.box_razd {
width: 10px;
height: 50px;
float: left;
}
.gallery h1 {
padding: 5px 0px 15px 8px;
color: #FFFFFF;
font-size: 16px;
background: url(metamorph_shinyblur_lt-images/h1_gallery.jpg) left top no-repeat;}
.gal_num {
width:16px;
height:22px;
padding: 3px 0px 0px 9px;
display:block;
background: url(metamorph_shinyblur_lt-images/gal_num.gif) left top no-repeat;
color: #FFFFFF;
font-size: 12px;
margin: 0px 10px 0px 0px;
text-decoration:none;
float: left;}
.gal_num:hover {
background:url(metamorph_shinyblur_lt-images/gal_num_hover.gif) left top no-repeat;
text-decoration: none;}
.g_size
{
width: 308px;
height: 162px;
}
/* about us */
.about_img {
float: left;
margin: 5px 22px 0px 0px;}
.about_col {
float:left;
width: 210px;
padding: 0px 0px 0px 20px;}
.razd_v { height: 1px;
background: url(metamorph_shinyblur_lt-images/razd_v.gif) left top repeat-x;}
.fish3 {
float:left;
padding: 4px 10px 3px 0px;
}
/* contact us */
.contact {
width: 646px;
padding: 0px 0px 0px 0px;}
.input_txt2 {
width: 622px;
border: none;
background: url(metamorph_shinyblur_lt-images/input_txt2.jpg) left top repeat-x;
padding: 7px 12px 6px 12px;
color:#ffffff;
}
.text_area2 {
width: 622px;
height:168px;
font-size: 14px;
border: none;
background: url(metamorph_shinyblur_lt-images/text_area2.jpg) 0px 0px repeat-x;
padding: 8px 12px 8px 12px;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
}
.submit2 {
background: url(metamorph_shinyblur_lt-images/read.gif) left top no-repeat;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
font-weight: bold;
color: #C42A0F;
text-decoration: none;
padding: 0px 2px 0px 2px;
width: 79px;
height: 16px;
margin: 0px 0px 0px 0px;
}
.lh {
line-height: 22px;
}
/*
scroll styles here
*/
.item { width: 1014px; height: 340px; }
.item img {float:left;}
.item h2 { border:none; margin-bottom:15px;}
.scrollable { position:relative; overflow:hidden; width: 1014px; height: 340px;}
.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: 15px; cursor:pointer; height: 15px; float:left; margin:0 0 0 3px; background:url(metamorph_shinyblur_lt-images/circl.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_shinyblur_lt-images/circl_hov.png) no-repeat scroll right top}
.header1
{
width: 1014px; height: 340px;
}
.header2
{
width: 1014px; height: 340px;
}
.header3
{
width: 1014px; height: 340px;
}
.header4
{
width: 1014px; height: 340px;
}
/* ------------------------------------------------------------------------
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><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_shinyblur</a>
<h3><a href="#"><small>Company Slogan Goes Here</small></a></h3>
</div>
</div>
<!-- header ends -->
<div class="top">
<div class="scrollable">
<div class="items">
<div class="item">
<div class="header1">
<div class="top_left">
<h1>Welcome To Our Website</h1>
<div class="text" style="height: 300px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consequat neque non nisl facilisis pellentesque sit amet sed magna. <br />
<div style="height:5px"></div>
<span class="span_cont2">Maecenas posuere arcu sit amet est convallis.</span> Scelerisque leo rutrum. Vivamus facilisis, orci a tincidunt venenatis, ante libero semper turpis, eu tincidunt ante massa ac urna.<br />
<div style="height:5px"></div>
<span class="span_cont2">Nullam et neque magna, a sollicitudin arcu.</span> Aliquam nibh odio, auctor et imperdiet vitae, suscipit sit amet lorem. Ut est arcu, laoreet eu pretium vel, iaculis non risus. <br />
<div style="height:5px"></div>
Praesent nibh risus, consequat sit amet viverra in, porta non est. Donec eu pulvinar metus. Etiam quis erat libero. Nam at ultrices felis. Proin aliquam aliquet
<div style="height:5px"></div>
<p style="padding-top: 10px; padding-bottom: 10px;"><a class="read" href="#">read more</a></p>
</div>
</div>
<div class="top_right"></div>
</div>
</div> <!-- item -->
<div class="item">
<div class="header2">
<div class="top_left">
<h1>Latest News</h1>
<div class="text" style="height: 300px;">
<p><span class="span_cont2">Apr. 11, 2010</span></p>
<p><span class="span_cont">Suspendisse rutrum interdum lacinia.</span></p>
<p>Suspendisse tempus aliquet elit sit amet pellentesque. Praesent nibh risus, consequat sit amet viverra in, porta non est. Donec eu pulvinar metus. Donec iaculis pulvinar mauris, ac vulputate justo pretium quis.</p>
<p style="padding-top: 10px; padding-bottom: 10px;"><a class="read" href="#">read more</a></p><br />
<p><span class="span_cont2">Apr. 10, 2010</span></p>
<p><span class="span_cont">Duis a molestie massa.</span></p>
<p>Nullam imperdiet vulputate volutpat. Nunc consectetur mattis accumsan. Etiam praesent nibh risus, consequat sit amet viverra in, porta non est. Donec eu pulvinar metus.</p>
<p style="padding-top: 10px; padding-bottom: 10px;"><a class="read" href="#">read more</a></p>
<div style="height:5px"></div>
</div>
</div>
<div class="top_right2"></div>
</div>
</div> <!-- item -->
<div class="item">
<div class="header3">
<div class="top_left">
<h1>Lorem ipsum dolor sit amet</h1>
<div class="text" style="height: 300px;">
<p><span class="span_cont2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></p>
<p>Nam justo odio, congue id fermentum sit amet, placerat sed nibh. Vestibulum pharetra nibh eu magna accumsan tristique. Sed ac velit urna, venenatis vulputate purus. </p>
<p style="padding-top: 10px; padding-bottom: 10px;"><a class="read" href="#">read more</a></p>
<p><span class="span_cont2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></p>
<p>Nam justo odio, congue id fermentum sit amet, placerat sed nibh. Vestibulum pharetra nibh eu magna accumsan tristique. Sed ac velit urna, venenatis vulputate purus. </p>
<p style="padding-top: 10px; padding-bottom: 10px;"><a class="read" href="#">read more</a></p>
<div style="height:5px"></div>
</div>
</div>
<div class="top_right3"></div>
</div>
</div> <!-- item -->
<div class="item">
<div class="header4">
<div class="top_left">
<h1>Lorem ipsum dolor sit amet</h1>
<div class="text" style="height: 300px;">
<p><span class="span_cont2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></p>
<p>Nam justo odio, congue id fermentum sit amet, placerat sed nibh. Vestibulum pharetra nibh eu magna accumsan tristique. Sed ac velit urna, venenatis vulputate purus. </p>
<p style="padding-top: 10px; padding-bottom: 10px;"><a class="read" href="#">read more</a></p>
<p><span class="span_cont2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></p>
<p>Nam justo odio, congue id fermentum sit amet, placerat sed nibh. Vestibulum pharetra nibh eu magna accumsan tristique. Sed ac velit urna, venenatis vulputate purus. </p>
<p style="padding-top: 10px; padding-bottom: 10px;"><a class="read" href="#">read more</a></p>
<div style="height:5px"></div>
</div>
</div>
<div class="top_right4"></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 style="height:15px"></div>
<div class="i_col_razd">
<div class="i_col">
<h1>Integer nec tortor</h1>
<div class="text">
<img src="metamorph_shinyblur_lt-images/img12.jpg" class="img_l" alt="" />In feugiat condimentum purus in hen- drerit. Donec commodo feugiat suscipit. Sed iaculis pulvinar sollicitudin. Fusce dictum dapibus enim, et iaculis neque hendrerit. Donec commodo feugiat suscipit. Sed iaculis pulvinar sollicitudin. Fusce dictum dapibus enim, et iaculis neque imperdiet vitae. Vivamus sed
<div style="height:5px"></div>
<div style="height:16px;"><a class="read" href="#">read more</a></div>
</div>
</div>
<div class="float_left" style="width: 15px; height:10px;"></div>
<div class="i_col">
<h1>Integer nec tortor</h1>
<div class="text">
<img src="metamorph_shinyblur_lt-images/img13.jpg" class="img_l" alt="" />Integer nec tortor eu turpis auctor pulv- inar. Donec aliquam vehicula turpis eu placerat. Nam felis sem, aliquam eget laoreet in, adipiscing eu tellus. Morbi semper suscipit turpis, sed viverra arcu ultrices vel. Curabitur congue semper mollis. Integer mauris nibh, venenatis volutpat pulvinar eu, congue id arcu.
<div style="height:5px"></div>
<div style="height:16px;"><a class="read" href="#">read more</a></div>
</div>
</div>
<div class="float_left" style="width: 15px; height:10px;"></div>
<div class="i_col">
<h1>Integer nec tortor</h1>
<div class="text">
<img src="metamorph_shinyblur_lt-images/img14.jpg" class="img_l" alt="" />Suspendisse gravida, sem id mollis imperdiet, libero mauris dictum tortor, eu facilisis lacus lectus consequat est. Morbi dictum felis ac lectus pellen- tesque et aliquet justo molestie. Nullam pharetra ultricies viverra. Pellentesque convallis tincidunt mattis. Ut mauris quam, volutpat vitae venenatis ac
<div style="height:5px"></div>
<div style="height:16px;"><a class="read" href="#">read more</a></div>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div style="height:15px"></div>
<div class="ram1_bg">
<div style="height:10px"></div>
<a class="a_more" href="#">MORE INFO</a>
<h1>Donec aliquam vehicula turpis eu placerat. Nam felis sem, aliquam eget laoreet in, adipiscing eu tellus. Morbi semper suscipit turpis, sed viverra arcu ultrices vel. Curabitur congue semper mollis. Integer mauris nibh, venenatis volutpat pulvinar eu, congue id arcu. Suspendisse iaculis congue lacus</h1>
<div style="clear: both;"></div>
</div>
<div class="ram1_bot"></div>
<!-- bottom begin -->
<div style="height:20px"></div>
<div id="bottom">
<div class="b_col1">
<h2>Services</h2>
<div style="height:5px"></div>
<div class="razd_bot"></div>
<div style="height:10px"></div>
<ul>
<li><a href="#"><strong>Lorem ipsum dolor</strong></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_col2">
<h2>Recent Posts</h2>
<div style="height:5px"></div>
<div class="razd_bot"></div>
<div style="height:20px"></div>
<div class="box_us">
<div class="box_us_l">
<img src="metamorph_shinyblur_lt-images/fish_us1.gif" alt="" />
</div>
<div class="box_us_r">
<strong>1234 Some Street, Brooklyn, NY 11201</strong>
</div>
<div style="clear: both; height:10px;"></div>
</div>
<div class="box_us">
<div class="box_us_l">
<img src="metamorph_shinyblur_lt-images/fish_us2.gif" alt="" />
</div>
<div class="box_us_r">
<strong>Phone: 1(234) 567 8910<br />
Fax: 1(234) 567 8910</strong>
</div>
<div style="clear: both; height:10px;"></div>
</div>
<div class="box_us">
<div class="box_us_l">
<img src="metamorph_shinyblur_lt-images/fish_us3.gif" alt="" />
</div>
<div class="box_us_r">
<strong>E-mail: companyname@yahoo.com</strong>
</div>
<div style="clear: both; height:10px;"></div>
</div>
</div>
<div class="b_col3">
<h2>Follow Us</h2>
<div style="height:5px"></div>
<div class="razd_bot"></div>
<div style="height:10px"></div>
<ul>
<li><img src="metamorph_shinyblur_lt-images/fu_i1.gif" class=" fu_i" alt="" /><a href="#"><strong>Subscribe to Blog</strong></a></li>
<li><img src="metamorph_shinyblur_lt-images/fu_i2.gif" class=" fu_i" alt="" /><a href="#"><strong>Be a fan on Facebook</strong></a></li>
<li><img src="metamorph_shinyblur_lt-images/fu_i3.gif" class=" fu_i" alt="" /><a href="#"><strong>RSS Feed</strong></a></li>
<li><img src="metamorph_shinyblur_lt-images/fu_i4.gif" class=" fu_i" alt="" /><a href="#"><strong>Follow us on Twitter</strong></a></li>
</ul>
</div>
<div style="clear: both; height: 20px;"></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