metamorph_sunrising_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="" />
<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_sunrising_lt-images/bg.jpg) center top no-repeat #E66001;
line-height: 20px;
}
#menu{
background: url(metamorph_sunrising_lt-images/menu.jpg) top repeat-x;
}
#foot_bg{
background: url(metamorph_sunrising_lt-images/foot.jpg) bottom repeat-x;
}
#for_home{
background: url(metamorph_sunrising_lt-images/for_home.png) 0px 255px repeat-x;
}
#main {
width: 1028px;
margin: 0px auto;
background:url(metamorph_sunrising_lt-images/main.jpg) right top no-repeat;}
#header {
width:1028px;
height: 255px;
}
#logo {
padding: 95px 0px 0px 30px;
}
#logo H2 {
font-family: Arial, Helvetica, sans-serif;
color:#7B3401;
font-size:18px;
font-style:italic;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 16px;
color: #7B3401;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight:100;
}
#buttons{
text-align:center;
height: 39px;
margin-left: 0px;
padding: 30px 0px 0px 470px;
background: url(metamorph_sunrising_lt-images/but_bg.png) left top no-repeat;
}
#buttons a {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
display: block;
float: left;
text-decoration: none;
color: #FFFFFF;
text-align: center;
padding-top: 0px;
font-weight:bold;
}
.but_razd { width: 58px;
height: 28px;
background:url(metamorph_sunrising_lt-images/but_razd.gif) center 5px no-repeat;
float:left;}
#buttons .but:hover {
color:#7B3401;
}
.top { height:350px;}
.top_text {
width: 941px;
float:left;
background: url(metamorph_sunrising_lt-images/content_text.png);
height:308px;
padding: 0px 0px 0px 0px;
padding-right: 30px}
.top_img {
float:left;
padding: 15px 16px 0px 1px;
}
.top h1 {
color:#7B3401;
font-size:18px;
padding: 15px 0px 13px 0px;
font-weight:100;
font-family:Georgia, "Times New Roman", Times, serif;
}
.top_fish {
width: 30px;
height:25px;
background:url(metamorph_sunrising_lt-images/fish1.png) 14px 5px ; }
.span_top {
color:#7B3401;
font-weight:bold;
}
#content{
width: 970px;
margin: 0px auto;
background:url(metamorph_sunrising_lt-images/orange.jpg) top repeat-x #FFFFFF;
padding: 0px 15px 0px 15px;
line-height: 22px;
}
.line{
margin: 0px auto;
background: url(metamorph_sunrising_lt-images/line.gif) left 15px repeat-x;
padding: 23px 0px 0px 0px;
}
.float_l {
float:left;}
.col {
width: 300px;
float:left;}
.col_text {
padding: 0px 0px 20px 8px;}
.col h1 {
background:url(metamorph_sunrising_lt-images/tit1.png) 0px 0px no-repeat;
}
.col h2 {
background:url(metamorph_sunrising_lt-images/tit2.png) 0px 0px no-repeat;
}
.col h3 {
background:url(metamorph_sunrising_lt-images/tit3.png) 0px 0px no-repeat;
}
.tit {
padding: 5px 0px 20px 48px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight:100;
color:#7B3401;}
#left{
width: 707px;
float: left;
color:#000000;
margin-left: 0px;
}
.text{
padding: 0px 0px 15px 0px;
}
.img_l { float:left;
margin: 6px 15px 5px 0px;
}
.img_r { float: right;
margin: 9px 10px 3px 10px;
}
.span_cont { color: #7B3401;
font-size:12px;
font-weight:bold;
}
#left H1{
font-family: Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-weight: 100;
color: #7B3401;
text-align: left;
padding: 0px 0px 0px 0px;
}
#right H1{
font-family: Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-weight: 100;
color: #7B3401;
text-align: left;
padding: 0px 0px 0px 0px;
}
.read_l{
text-align:right;
padding: 8px 4px 3px 0px;
background: url(metamorph_sunrising_lt-images/read.png) right 8px no-repeat;
text-transform:uppercase;
color:#FFFFFF;
}
.read_l a {
font-size:12px;
color: #ffffff;
text-decoration: none;
padding-right: 2px;
}
.read_l a:hover {
font-size:12px;
color: #FFD0AF;
text-decoration: none;
}
.next {
width: 100%;
text-align: right;
padding: 0px 0px 0px 0px;}
.next a{
color:#FFFFFF;
text-decoration: none; }
.next a:hover {
text-decoration: underline; }
#right{
float: right;
width: 283px;
}
.span_dat {
color: #002380;
text-decoration: underline;}
#bottom {
width: 100%;
height: 252px;
}
#bottom h1{
background:url(metamorph_sunrising_lt-images/bottom_h1.gif) left top no-repeat;
padding: 10px 0px 5px 10px;
font-size: 18px;
text-align: left;
color: #7B3401;
font-weight:100;
font-family: Georgia, "Times New Roman", Times, serif;
}
#bottom h2{
background:url(metamorph_sunrising_lt-images/bottom_h2.gif) left top no-repeat;
padding: 10px 0px 10px 10px;
font-size: 18px;
text-align: left;
color: #7B3401;
font-weight:100;
font-family: Georgia, "Times New Roman", Times, serif;
}
#b_col1 {
width: 197px;
float: left;
margin-left: 34px;
}
#b_col2 {
width: 197px;
float: left;
margin-left: 49px;
}
#b_col3 {
width: 230px;
float: left;
margin-left: 20px;
text-align: left;
}
#b_col4 {
width: 154px;
float: left;
margin-left: 85px;
text-align: left;
}
#bottom ul {
list-style:none;
padding: 0px 0px 0px 0px;}
#bottom li {
padding: 8px 0px 0px 0px;
}
#bottom ul a:hover {
text-decoration:underline;
}
#bottom ul a {
color:#000000;
text-decoration:none;
font-weight: 100;}
.fu_i {
padding: 0px 14px 0px 0px;
vertical-align: middle ;
}
#b_col2 ul {
list-style:none;
padding: 0px 0px 0px 0px;}
#b_col2 li {
padding: 4px 0px 0px 20px;
background: url(metamorph_sunrising_lt-images/fish2.gif) 0px 11px no-repeat;
}
#footer_box{
height: 108px;
width: 100%;
}
#footer{
font-size: 12px;
color: #ffffff;
text-align: center;
padding: 30px 0px 0px 30px;
width: 360px;
text-align: left;
}
#footer a{
color: #ffffff;
font-size: 12px;
text-decoration: none;
}
#footer a:hover{
color: #ffffff;
font-size: 12px;
text-decoration: underline;
}
#buttons_b{
text-align:center;
height: 39px;
margin-left: 0px;
float:right;
background: url(metamorph_sunrising_lt-images/but_bg.png) left top no-repeat;
width: 400px;
padding: 40px 0px 0px 0px;
}
#buttons_b a {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
display: block;
float: left;
text-decoration: none;
color: #FFFFFF;
text-align: center;
padding-top: 0px;
font-weight:bold;
}
.but_razd_b { width: 25px;
height: 28px;
background:url(metamorph_sunrising_lt-images/but_razd.gif) center 5px no-repeat;
float:left;}
#buttons_b .but:hover {
color:#FFD0AF;
}
/* blog */
#content_blog {
width: 1000px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
line-height: 22px;
}
.left_box {
width: 677px;
padding: 0px 15px 0px 15px;
background: url(metamorph_sunrising_lt-images/orange.jpg) top repeat-x #ffffff;
}
.dat_img {
float: left;
padding: 3px 14px 0px 0px;
}
.span_dat a{
color: #7B3401;
text-decoration:underline;
}
.span_dat a:hover{
text-decoration: none;
}
.datc_comment {
height: 35px;
width: 100%;
background: url(metamorph_sunrising_lt-images/datc_comment.gif) top repeat-x;
padding-top: 4px;
}
.datc {
float: left;
width: 346px;
color: #7B3401;}
.datc a {
color: #FF6B00;
font-weight:bold;
text-decoration:none;
}
.datc a:hover {
text-decoration:underline;
}
.comment {
float: right;
width: 146px;}
.comment a {
color: #7B3401;
text-decoration:none;}
.comment a:hover {
text-decoration:underline;}
.right_box {
padding: 0px 15px 13px 15px;
background: url(metamorph_sunrising_lt-images/orange.jpg) top repeat-x #ffffff;
width: 253px;
}
.spis {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis li {
padding: 0px 0px 0px 0px;
background:url(metamorph_sunrising_lt-images/spis_li.gif) bottom repeat-x;
}
.spis a:hover {
background:url(metamorph_sunrising_lt-images/spis_hover.gif) 0px 1px repeat-x;
}
.spis a {
color:#000000;
text-decoration:none;
font-weight: bold;
display:block;
width: 100%;
height: 25px;
padding-left:4px;
padding-top: 3px;
width: 247px;}
/* gallery */
#gallery {
padding: 10px 10px 10px 10px;
background: #FFFFFF;
width: 980px;
margin: 0px auto;
}
#left_gal {
float: left;
width: 621px;
}
#right_gal {
float:right;
width: 319px;
background: url(metamorph_sunrising_lt-images/gal_bg.jpg) top repeat-x;
padding: 0px 15px 0px 15px;
}
#right_gal H1{
font-family: Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-weight: 100;
color: #7B3401;
text-align: center;
padding: 20px 0px 0px 0px;
background: url(metamorph_sunrising_lt-images/line.gif) 0px 15px repeat-x;
}
.row {
padding: 0px 0px 0px 0px;
height: 91px;
width: 621px;
}
#float_l {
float:left;}
/* about us */
.text_ind3 {
padding: 5px 0px 17px 0px;
}
.razd_about {
height: 18px;
background: url(metamorph_sunrising_lt-images/datc_comment.gif) 9px repeat-x;
width: 100%;
}
#right H6{
font-family: Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-weight: 100;
color: #7B3401;
text-align: left;
padding: 20px 0px 0px 15px;
background: url(metamorph_sunrising_lt-images/h5.gif) 15px 16px no-repeat;
}
.right_box_about {
padding: 0px 0px 0px 0px;
background: url(metamorph_sunrising_lt-images/orange.jpg) top repeat-x #ffffff;
width: 283px;
}
.text_about {
padding: 5px 15px 13px 15px;
}
.dat_about {
background: url(metamorph_sunrising_lt-images/dat.gif) 0px 5px no-repeat;
color:#FFFFFF;
font-size:12px;
padding: 0px 0px 0px 5px;
}
.read_about {
background: url(metamorph_sunrising_lt-images/read_about.gif) right 0px no-repeat;
padding: 0px 5px 0px 5px;
text-align: right;
height: 15px;
line-height: 13px;
}
.read_about a {
color:#FFFFFF;
font-size:12px;
text-decoration:none;
}
.read_about a:hover {
text-decoration:none;
}
/* contact us */
#left_cont {
width: 682px;
float:left;
padding: 15px 0px 0px 0px;
}
#right_cont {
width: 254px;
float: right;
padding: 15px 0px 0px 0px;
}
#left_cont h1 {
background: url(metamorph_sunrising_lt-images/line.gif) top repeat-y;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-weight: 100;
color: #7B3401;
text-align: left;
padding: 5px 0px 5px 0px;
background: url(metamorph_sunrising_lt-images/line.gif) top repeat-x;
}
#right_cont h1 {
background: url(metamorph_sunrising_lt-images/line.gif) top repeat-y;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-weight: 100;
color: #7B3401;
text-align: left;
padding: 5px 0px 5px 0px;
background: url(metamorph_sunrising_lt-images/line.gif) top repeat-x;
}
.input_txt2 {
width: 665px;
border: none;
background: url(metamorph_sunrising_lt-images/input_cont.gif) left top no-repeat;
padding: 8px 8px 8px 8px;
color:#ffffff;
}
.text_area2 {
width: 665px;
height:128px;
border: none;
background: url(metamorph_sunrising_lt-images/message_cont.gif) 0px 0px no-repeat;
padding: 8px 8px 8px 8px;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.submit2 {
background: url(metamorph_sunrising_lt-images/but_submi_cont.gif) right 2px no-repeat;
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color: #ffffff;
text-decoration: none;
padding: 5px 2px 3px 2px;
width: 83px;
margin: 0px 0px 0px 0px;
text-transform: uppercase;
line-height: 13px;
}
.view {
color:#7B3401;
text-decoration:none;
font-size:12px;
}
.view:hover {
text-decoration:underline;
}
h5 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-weight: 100;
color: #7B3401;
text-align: left;
padding: 5px 0px 5px 0px;}
.prev_but_center{
width: 950px;
padding-top: 10px;
float: left;
}
.prev_but_center_left{
float: left;
padding-left: 10px;
width: 602px;
}
.prev_but_center_right{
float: left;
width: 290px;
padding-left: 30px;
padding-right: 10px;
}
.prev_but_center_right p{
color: #232323;
}
.prev_but_center_right a{
color: #ffffff;
font-weight: bold;
}
/*
Header Scroller
*/
/*
jQuery Coda-Slider v2.0 - http://www.ndoherty.biz/coda-slider
Copyright (c) 2009 Niall Doherty
This plugin available for use in all personal or commercial projects under both MIT and GPL licenses.
*/
/* Insignificant stuff, for demo purposes */
.panel h2.title { margin-bottom: 10px }
noscript div { background: #ccc; border: 1px solid #900; margin: 20px 0; padding: 15px }
/* Most common stuff you'll need to change */
.coda-slider-wrapper { padding: 0px; padding-left: 20px }
.coda-slider { background: none}
/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
.coda-slider-no-js .coda-slider { height: 338px; overflow: hidden !important; padding-right: 20px }
/* Change the width of the entire slider (without dynamic arrows) */
.coda-slider, .coda-slider .panel { width: 1028px;}
/* Change margin and width of the slider (with dynamic arrows) */
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 950px; }
.coda-slider-wrapper.arrows .coda-slider { margin: 0px }
/* Arrow styling */
.coda-nav-left {padding-top: 120px;}
.coda-nav-right {padding-top: 120px;}
.coda-nav-left a { background: url(metamorph_sunrising_lt-images/top_left.png) no-repeat; color: #fff; width: 27px; height: 108px; text-indent: -9000em;}
.coda-nav-right a { background: url(metamorph_sunrising_lt-images/top_right.png) no-repeat; color: #fff; width: 27px; height: 108px; text-indent: -9000em;}
/* Tab nav */
.coda-nav ul li a.current { background: #39c }
/* Panel padding */
.coda-slider .panel-wrapper { padding: 0px }
/* Preloader */
.coda-slider p.loading { padding: 20px; text-align: center }
/* Don't change anything below here unless you know what you're doing */
/* Tabbed nav */
.coda-nav ul { clear: both; display: block; margin: auto; overflow: hidden }
.coda-nav ul li { display: none }
.coda-nav ul li a { background: #000; color: #fff; display: block; float: left; margin-right: 1px; padding: 3px 6px; text-decoration: none }
/* Miscellaneous */
.coda-slider-wrapper { clear: both; overflow: hidden }
.coda-slider { float: left; overflow: hidden; position: relative }
.coda-slider .panel { display: block; float: left }
.coda-slider .panel-container { position: relative }
.coda-nav-left, .coda-nav-right { float: left }
.coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }
/* Photo Gallery */
#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width: 970px; padding: 0px; display:none; margin: 0 auto}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width: 974px; height: 442px; border:1px solid #ccc; background:#000}
#information {position:absolute; bottom:0; width:974px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#image {width:974px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:406px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(metamorph_sunrising_lt-images/left.gif) left center no-repeat}
#imgnext {right:0; background:url(metamorph_sunrising_lt-images/right.gif) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(metamorph_sunrising_lt-images/link.gif) center center no-repeat}
#thumbnails {margin-top:15px; padding-bottom: 80px;}
#slideleft {float:left; width:20px; height:125px; background:url(metamorph_sunrising_lt-images/scroll-left.gif) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:125px; background:#222 url(metamorph_sunrising_lt-images/scroll-right.gif) center center no-repeat}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:920px; margin-left:5px; height:125px; overflow:hidden}
#slider {position:absolute; left:0; height:125px}
#slider img {cursor:pointer; border:1px solid #666; padding:2px}
/* ------------------------------------------------------------------------
DO NOT CHANGE
------------------------------------------------------------------------- */
div.pp_pic_holder a:focus { outline:none; }
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;}
.pp_top {height: 20px;position: relative;}
* html .pp_top { padding: 0 20px; }
.pp_top .pp_left {height: 20px;left: 0;position: absolute;width: 20px;}
.pp_top .pp_middle {height: 20px;left: 20px;position: absolute;right: 20px;}
* html .pp_top .pp_middle {left: 0;position: static;}
.pp_top .pp_right {height: 20px;left: auto;position: absolute;right: 0;top: 0;width: 20px;}
.pp_content { height: 40px; }
.pp_content .ppt {left: auto;margin-bottom: 5px;position: relative;top: auto;}
.pp_fade { display: none; }
.pp_content_container {position: relative;text-align: left;width: 100%;}
.pp_content_container .pp_left { padding-left: 20px; }
.pp_content_container .pp_right { padding-right: 20px; }
.pp_content_container .pp_details {margin: 10px 0 2px 0;}
.pp_description {display: none;margin: 0 0 5px 0;}
.pp_nav {clear: left;float: left;margin: 3px 0 0 0;}
.pp_nav p {float: left;margin: 2px 4px;}
.pp_nav a.pp_arrow_previous,.pp_nav a.pp_arrow_next {display: block;float: left;margin-top: 2px;overflow: hidden;text-indent: -10000px;}
.pp_hoverContainer {position: absolute;top: 0;width: 100%;z-index: 2000;}
a.pp_next {background: url(metamorph_sunrising_lt-images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat;display: block;float: right;height: 100%;text-indent: -10000px;width: 49%;}
a.pp_previous {background: url(metamorph_sunrising_lt-images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat;display: block;float: left;height: 100%;text-indent: -10000px;width: 49%;}
a.pp_expand,a.pp_contract {cursor: pointer;display: none;height: 20px; position: absolute;right: 30px;text-indent: -10000px;top: 10px;width: 20px;z-index: 20000;}
a.pp_close {display: block;float: right;text-indent: -10000px;}
.pp_bottom {height: 20px;position: relative;}
* html .pp_bottom { padding: 0 20px; }
.pp_bottom .pp_left {height: 20px;left: 0;position: absolute;width: 20px;}
.pp_bottom .pp_middle {height: 20px;left: 20px;position: absolute;right: 20px;}
* html .pp_bottom .pp_middle {left: 0;position: static;}
.pp_bottom .pp_right {height: 20px;left: auto;position: absolute;right: 0;top: 0;width: 20px;}
.pp_loaderIcon {display: block;height: 24px;left: 50%;margin: -12px 0 0 -12px;position: absolute;top: 50%;width: 24px;}
#pp_full_res {line-height: 1 !important;}
#pp_full_res .pp_inline {text-align: left;}
#pp_full_res .pp_inline p { margin: 0 0 15px 0; }
div.ppt {color: #fff;display: none;font-size: 17px;left: 0;position: absolute;top: 0;z-index: 9999;}
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
</style>
<!-- Begin JavaScript -->
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="lib/jquery.coda-slider-2.0.js"></script>
<!-- Initialize each slider on the page. Each slider must have a unique id -->
<script type="text/javascript">
$().ready(function() {
$('#coda-slider-2').codaSlider({
autoSlide: true,
autoSlideInterval: 6000,
autoSlideStopWhenClicked: true
});
});
</script>
<!-- End JavaScript -->
</head>
<body>
<div id="foot_bg">
<div id="menu">
<div id="for_home">
<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_sunrising</a>
<h2><a href="#"><small>Company Slogan Goes Here</small></a></h2>
</div>
</div>
<!-- header ends -->
<div class="top">
<div class="coda-slider-wrapper">
<div class="coda-slider preload" id="coda-slider-2">
<div class="panel">
<div class="panel-wrapper">
<div class="prev_but_center">
<div class="prev_but_center_left">
<div class="prev_img"><img src="metamorph_sunrising_lt-images/img11.jpg" alt="" title=""/></div>
</div>
<div class="prev_but_center_right">
<h1>Welcome To Our Website</h1>
<p><img src="metamorph_sunrising_lt-images/fish1.png" alt="" /><span class="span_top">Nullam et neque magna, a sollicitudin arcu. </span><br />Aliquam nibh odio, auctor et imperdiet vitae, suscipit sit amet lorem. Ut est arcu, laoreet eu pretium vel, iaculis non risus.<br /></p>
<div class="read_l"><a href="#">READ MORE</a></div>
<p><img src="metamorph_sunrising_lt-images/fish1.png" alt="" /><span class="span_top">Maecenas posuere arcu sit amet est convallis. </span> <br />Sceleris- que leo rutrum. Vivamus facilisis, orci a tincidunt venenatis, ante libero semper turpis, eu tincidunt ante massa ac urna. <br /></p>
<div class="read_l"><a href="#">READ MORE</a></div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-wrapper">
<div class="prev_but_center">
<div class="prev_but_center_left">
<div class="prev_img"><img src="metamorph_sunrising_lt-images/page2.jpg" alt="" title=""/></div>
</div>
<div class="prev_but_center_right">
<p><span class="span_top">Vivamus id lobortis nisi. Duis semper porta justo, vel sodales velit vehicula vel. </span><br />
Donec non vulputate odio. Quisque tellus augue, tristique vel lobortis ut, convallis vel est. Nam vel congue lectus. Suspendisse ullamcorper odio et leo congue eu semper Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br /><br />
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>
<div class="read_l"><a href="#">READ MORE</a></div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-wrapper">
<div class="prev_but_center">
<div class="prev_but_center_left">
<div class="prev_img"><img src="metamorph_sunrising_lt-images/page3.jpg" alt="" title=""/></div>
</div>
<div class="prev_but_center_right">
<p><span class="span_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span><br />
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>
<div class="read_l"><a href="#">READ MORE</a></div>
<p><span class="span_top">Vivamus id lobortis nisi. Duis semper porta justo, vel sodales velit vehicula vel. </span><br />
Donec non vulputate odio. Quisque tellus augue, tristique vel lobortis ut, convallis vel est. Nam vel congue lectus. Suspendisse ullamcorper odio et leo congue eu semper </p>
<div class="read_l"><a href="#">READ MORE</a></div>
</div>
</div>
</div>
</div>
</div>
</div><!-- .coda-slider -->
</div>
<!-- content begins -->
<div id="content">
<div class="line">
<div class="col">
<h1 class="tit">First Title</h1>
<div class="col_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur, ligula in suscipit rutrum, quam enim blandit ipsum, a hendrerit ipsum eros et orci. Phasellus congue commodo felis eget consectetur. In eros ligula, sodales et cursus vitae, imperdiet at elit. Aliquam gravida massa nec turpis pellentesque </div>
</div>
<div class="float_l" style="height:20px; width:33px"></div>
<div class="col">
<h2 class="tit">Second Title</h2>
<div class="col_text">Etiam ut risus eu urna vestibulum blandit eget eget lacus. Morbi urna enim, rutrum eu hendrerit in, posuere aliquam lorem. Aenean interdum, orci sit amet aliquam luctus, velit augue imperdiet risus, in elementum libero lectus nec nunc. Sed commodo purus laoreet nulla bibendum a consequat tortor </div>
</div>
<div class="float_l" style="height:20px; width:33px"></div>
<div class="col">
<h3 class="tit">Third Title</h3>
<div class="col_text">Sed hendrerit, justo at porttitor pulvinar, sapien ligula ullamcorper tortor, eu ultrices dolor mauris vel neque. Ut sit amet metus turpis, et tincidunt neque. Nunc fringilla tempus turpis non facilisis. Fusce in ligula quis neque faucibus placerat. Mauris porta tristique sapien, a commodo tortor egestas at. Class aptent </div>
</div>
<div style="clear: both"></div>
</div>
</div>
<!-- content ends -->
<div style="height:15px"></div>
<!-- bottom begin -->
<div id="bottom">
<div id="b_col1">
<h1>Contact Information</h1>
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 id="b_col2">
<h1>Services</h1>
<ul>
<li><a href="#">Free Website Templates</a></li>
<li><a href="#">Free Flash Templates</a></li>
<li><a href="#">Easy Flash Templates</a></li>
<li><a href="#">Top Hosting Providers</a></li>
<li><a href="#">Free Fonts</a></li>
<li><a href="#">Free Icons</a></li>
<li><a href="#">Free Photoshop Brushes</a></li>
<li><a href="#">RSS Subscribe</a></li>
</ul>
</div>
<div id="b_col3">
<h2>Lorem Ipsum Dolor</h2>
<a href="#"><img src="metamorph_sunrising_lt-images/bottom_i1.jpg" alt="" /></a><div style="height:10px"></div>
Morbi egestas auctor tempor. Nunc eges- tas dignissim urna, eu rutrum ligula volutpat bibendum. Pellentesque habitant morbi tristique senectus et netus et
</div>
<div id="b_col4">
<h1>Follow Us</h1>
<ul>
<li><img src="metamorph_sunrising_lt-images/fu_i1.png" class=" fu_i" alt="" /><a href="#">Lorem ipsum dolor</a></li>
<li><img src="metamorph_sunrising_lt-images/fu_i2.png" class=" fu_i" alt="" /><a href="#">Maecenas in turpis </a></li>
<li><img src="metamorph_sunrising_lt-images/fu_i3.png" class=" fu_i" alt="" /><a href="#">Morbi fringilla libero</a></li>
<li><img src="metamorph_sunrising_lt-images/fu_i4.png" class=" fu_i" alt="" /><a href="#">In venenatis metus vel </a></li>
</ul>
</div>
<div style="clear: both"></div>
</div>
<!-- bottom end -->
<!-- footer begins -->
<div id="footer_box">
<div id="buttons_b">
<a href="index.html" class="but" title="">Home</a><div class="but_razd_b"></div>
<a href="blog.html" class="but" title="">Blog</a><div class="but_razd_b"></div>
<a href="gallery.html" class="but" title="">Gallery</a><div class="but_razd_b"></div>
<a href="about_us.html" class="but" title="">About us</a><div class="but_razd_b"></div>
<a href="contact_us.html" class="but" title="">Contact us</a>
</div>
<div id="footer">
<p>Copyright 2010. <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></p>
<!-- Please DO NOT remove the following notice --><p>Design by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates</a>, coded by <a href="http://www.flashtemplatesdesign.com/" title="Flash Web Templates">Flash Web Templates</a></p><!-- end of copyright notice-->
</div>
</div>
<!-- footer ends -->
</div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category