metamorph_lyrics_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_lyrics_lt-images/bg.jpg);
line-height: 18px;
}
#bg_top { background: url(metamorph_lyrics_lt-images/bg_top.gif) top repeat-x;}
#bg_top1 { background: url(metamorph_lyrics_lt-images/bg_top1.jpg) center 68px no-repeat;}
#bg_bot1 { background: url(metamorph_lyrics_lt-images/bg_bot1.jpg) center bottom no-repeat; }
#bg_bot { background: url(metamorph_lyrics_lt-images/bg_bot.gif) bottom repeat-x; }
#main {
width: 1186px;
margin: 0px auto;
background:url(metamorph_lyrics_lt-images/main.jpg) right top no-repeat;}
#header {
height: 167px;
}
#logo {
padding: 44px 0px 0px 67px;
}
#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: 40px;
margin-left: 0px;
background: url(metamorph_lyrics_lt-images/buttons.jpg) top repeat-x;
padding: 9px 0px 0px 440px;
}
#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: 10px;
height: 30px;
width: 140px;
}
.but {
}
.but_razd { height: 40px;
width: 1px;
background: url(metamorph_lyrics_lt-images/but_razd.gif) 0px 8px no-repeat;
float: left;}
#buttons .but:hover {
text-decoration: none;
text-decoration: underline;}
.top { height: 381px;
padding: 0px 0px 0px 0px;}
.top_img { background: url(metamorph_lyrics_lt-images/img_top.jpg) left top no-repeat;
height: 381px;
width: 1186px;
float: left;
margin: 0px;}
.circl_all { margin: 0px auto 0px auto;
padding-top: 50px;
height: 13px;
width: 95px}
.circl { background: url(metamorph_lyrics_lt-images/circl.gif) left top no-repeat;
height: 14px;
width: 13px;
margin: 0px 3px 0px 3px;
float: right;
}
.circl:hover {
background:url(metamorph_lyrics_lt-images/circl_hov.gif) left top no-repeat; }
#content{
background: #CAC9C9;
padding: 8px 23px 8px 23px;
width: 1137px;
border: 1px solid #FFFFFF;
margin: 0px 0px 0px 0px;
}
#content_home{
background: #CAC9C9;
padding: 8px 23px 8px 23px;
width: 1137px;
border: 1px solid #FFFFFF;
margin: 0px 0px 0px 0px;
}
.content_razd{
background: url(metamorph_lyrics_lt-images/content_razd.gif) 832px repeat-y;
padding: 0px 0px 0px 0px;
clear:both;
}
.content_razd_top {
background: url(metamorph_lyrics_lt-images/content_razd_top.gif) 832px top no-repeat;
}
.content_razd_bot {
background: url(metamorph_lyrics_lt-images/content_razd_bot.gif) 832px bottom no-repeat;
}
h3 {
color: #324003;
font-weight: 100;
font-size: 18px;
text-align: center;
padding: 0px 0px 10px 0px;
}
.razd_col {
background:url(metamorph_lyrics_lt-images/razd_col.gif) 25px 5px no-repeat;
height: 135px;
float:left;
width: 50px;}
.home_box {
float: left;
width: 334px;
padding: 0px 0px 0px 0px;}
.row_ind {}
a:hover {
color: #666666;
text-decoration: underline;}
#left{
width: 815px;
float: left;
margin-left: 0px;
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: #324003;
text-align: left;
padding: 0px 0px 0px 0px;
}
.a_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;
}
.a_h1:hover { text-decoration:underline;
color: #B95C12;}
.read{
display:block;
float: left;
height: 25px;
width: 74px;
text-align: center;
padding: 2px 0px 0px 0px;
text-decoration: none;
color: #ffffff;
text-decoration: none;
font-size:12px;
font-weight: 100;
background: url(metamorph_lyrics_lt-images/read.png) left top no-repeat;
}
.read:hover {
text-decoration: underline;
color: #ffffff;
}
.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;
}
.read3{
display:block;
float: right;
height: 25px;
width: 74px;
text-align: center;
padding: 2px 0px 0px 0px;
text-decoration: none;
color: #ffffff;
text-decoration: none;
font-size:12px;
font-weight: 100;
background: url(metamorph_lyrics_lt-images/read.png) left top no-repeat;
}
.read3:hover {
text-decoration: underline;
color: #ffffff;
}
.kv_top { margin: 0px 0px 0px 0px;
background: url(metamorph_lyrics_lt-images/kv_top.gif) left top no-repeat;}
.kv_bot { padding: 10px 25px 10px 25px;
background: url(metamorph_lyrics_lt-images/kv_bot.gif) right bottom no-repeat;}
#right{
float: right;
width: 294px;
margin-right: 0px;
}
.span_dat {
color: #000000;
text-decoration: underline;
font-weight:bold;}
.span_cont { color: #324003;
font-weight:bold;}
.spis {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis li {
padding: 2px 0px 3px 17px;
background: url(metamorph_lyrics_lt-images/spis.gif) 0px bottom no-repeat;
}
.spis a:hover {
text-decoration: none;
}
.spis a {
color:#000000;
text-decoration:none;
font-weight: 100;}
#bottom {
width: 100%;
background: url(metamorph_lyrics_lt-images/bottom.gif) 483px repeat-y;
color: #ffffff;
padding: 0px 0px 0px 0px;
min-height: 180px;
}
.bottom_text { padding: 0px 0px 0px 12px;}
h2{
font-family: Arial, Helvetica, sans-serif;
padding: 0px 0px 10px 0px;
font-size: 18px;
text-align: left;
color: #324003;
font-weight: 100;
background: url(metamorph_lyrics_lt-images/h1_bottom.jpg) left top no-repeat;
}
h4{
font-family: Arial, Helvetica, sans-serif;
padding: 0px 0px 10px 0px;
font-size: 18px;
text-align: left;
color: #ffffff;
font-weight: 100;
background: url(metamorph_lyrics_lt-images/h1_bottom.jpg) left top no-repeat;
}
.b_col1 {
width: 385px;
float: left;
margin-left: 84px;
}
.b_col2 {
width: 320px;
float: left;
margin-left: 52px;
}
.b_col3 {
width: 234px;
float: left;
margin-left: 75px;
text-align: left;
}
.b_col3 ul {
list-style:none;
padding: 0px 0px 0px 40px;}
.b_col3 li {
padding: 8px 0px 0px 20px;
background: url(metamorph_lyrics_lt-images/fish1.gif) 0px 14px no-repeat;
}
.b_col3 ul a:hover {
text-decoration:underline;
}
.b_col3 ul a {
color:#ffffff;
font-weight: bold;
text-decoration:none;}
.fu_i {
padding: 0px 14px 0px 0px;
vertical-align: middle ;
}
.spis_fu {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis_fu li {
padding: 8px 0px 2px 0px;
background: none;
}
.spis_fu li a {
color:#ffffff;
text-decoration: none;
font-weight: bold;
}
.spis_fu li a:hover {
text-decoration: underline;
}
.b_col2 label {
width:60px;
float:left;
text-align:left;
padding: 5px 0px 0px 0px;}
.input_txt {
width: 239px;
border: none;
background: url(metamorph_lyrics_lt-images/input_txt.png) left top no-repeat;
padding: 5px 10px 7px 10px;
color:#000000;
float: right;
}
.text_area {
width: 319px;
height:60px;
border: none;
background: url(metamorph_lyrics_lt-images/text_area.png) 0px 0px no-repeat;
padding: 5px 10px 7px 10px;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
}
.submit {
background:url(metamorph_lyrics_lt-images/read.png) right 1px no-repeat;
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 4px 0px 7px 0px;
font-size:12px;
color: #ffffff;
text-decoration: none;
font-weight: 100;
width: 74px;
margin: 0px 0px 0px 0px;
line-height: 15px;
}
#footer{
height: 55px;
font-size: 10px;
color: #ffffff;
text-align: center;
padding: 17px 0px 0px 0px;
background: url(metamorph_lyrics_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_blog {
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #324003;
text-align: left;
padding: 5px 0px 3px 0px;
text-decoration: none;
display:block;
}
.a_blog:hover { text-decoration: underline;
color: #324003;}
.datc_comment {
height: 24px;
background:url(metamorph_lyrics_lt-images/datc_coment.gif) top repeat-x;
padding: 7px 0px 0px 10px;}
.datc_comment a {
color: #000000;
text-decoration: none;
}
.datc_comment a:hover {
text-decoration:underline;
}
.va_m { vertical-align:middle;}
.spis2 {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis2 li {
padding: 0px 0px 3px 15px;
background: url(metamorph_lyrics_lt-images/spis2.gif) 0px 6px no-repeat;
}
.spis2 a:hover {
text-decoration: underline;
}
.spis2 a {
color:#000000;
text-decoration:none;
font-weight: bold;}
/* gallery */
.row {
padding: 0px 0px 0px 0px;
}
.box_img2 {
width: 365px;
background: url(metamorph_lyrics_lt-images/box_img.jpg) left top no-repeat;
padding: 4px 0px 0px 0px;
float:left;
}
.imgheight
{
height: 178px;
}
.box_img_text {
padding: 0px 7px 0px 7px
height: 120px;}
.small
{
height: 5px;
}
.box_razd {
width: 20px;
height: 50px;
float: left;
}
.gal_num {
width:16px;
height:22px;
padding: 3px 0px 0px 9px;
display:block;
background: url(metamorph_lyrics_lt-images/gal_num.gif) left top no-repeat;
color: #FFFFFF;
font-size: 14px;
margin: 0px 10px 0px 0px;
text-decoration:none;
float: left;}
.gal_num:hover {
text-decoration: underline;
color:#FFFFFF;}
.razd_h { background: url(metamorph_lyrics_lt-images/razd_h.gif) 0px 5px repeat-x;
clear:both;
height: 20px;}
/* contact us */
.input_txt2 {
width: 585px;
border: none;
background: url(metamorph_lyrics_lt-images/input_txt2.gif) left top repeat-x;
padding: 7px 10px 6px 10px;
color:#ffffff;
font-weight: 100;
font-family:Arial, Helvetica, sans-serif;
}
.text_area2 {
width: 585px;
height:121px;
font-size: 12px;
border: none;
background: url(metamorph_lyrics_lt-images/text_area2.gif) 0px 0px repeat-x;
padding: 7px 10px 7px 10px;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
font-weight: 100;
}
.submit2 {
background: url(metamorph_lyrics_lt-images/read.png) center 0px repeat-x;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
color: #ffffff;
text-decoration: none;
padding: 0px 0px 4px 0px;
width: 74px;
margin: 0px 20px 0px 0px;
height: 26px;
}
#left .spis2 {
list-style:none;
padding: 0px 0px 0px 0px;}
#left .spis2 li {
padding: 0px 0px 3px 15px;
background: url(metamorph_lyrics_lt-images/spis2.gif) 0px 6px no-repeat;
}
#left .spis2 a:hover {
text-decoration: underline;
}
#left .spis2 a {
color:#000000;
text-decoration:none;
font-weight: bold;}
/*
scroll styles here
*/
.item { width: 1186px; height: 281px;}
.item img {float:left;}
.item h2 { border:none; margin-bottom:15px;}
.scrollable { position:relative; overflow:hidden; width: 1186px; height: 281px;}
.scrollable .items { width:20000em; position:absolute;}
.scrollable .items div { float:left;}
.scrollable .items .item { overflow:hidden;}
.scrollable .items .item p { line-height:16px;}
.navi { height:20px; margin: 0px auto; padding-left: 550px;}
.navi a { width: 13px; cursor:pointer; height: 13px; float:left; margin:0 0 0 3px; background:url(metamorph_lyrics_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_lyrics_lt-images/circl_hov.gif) no-repeat scroll right top}
.header1
{
width: 11186px; height: 281px;
background: url(metamorph_lyrics_lt-images/img_top.jpg) no-repeat;
}
.header2
{
width: 1186px; height: 281px;
background: url(metamorph_lyrics_lt-images/img_top2.jpg) no-repeat;
}
.header3
{
width: 1186px; height: 2815px;
background: url(metamorph_lyrics_lt-images/img_top3.jpg) no-repeat;
}
.header4
{
width: 1186px; height: 2815px;
background: url(metamorph_lyrics_lt-images/img_top4.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>
<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-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.tools.js"></script>
</head>
<body>
<div id="bg_top">
<div id="bg_bot">
<div id="bg_bot1">
<div id="bg_top1">
<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_lyrics</a>
<h2><a href="#" id="metamorph"><small>Small Company Slogan Goes Here</small></a></h2>
</div>
</div>
<!-- header ends -->
<div class="top">
<div class="top_img">
<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 class="item">
<div class="header4">
</div>
</div> <!-- item -->
</div> <!-- items -->
</div> <!-- scrollable -->
<div style="height: 60px; padding-top: 40px;">
<div class="navi"></div> <!-- create automatically the point dor the navigation depending on the numbers of items -->
</div>
<div style="clear: both"></div>
</div>
</div>
<!-- content begins -->
<div id="content">
<div style="height:10px"></div>
<h1>Welcome to our Website</h1>
<div style="height:10px"></div>
<img src="metamorph_lyrics_lt-images/img11.jpg" class="img_l" alt="" /><span class="span_cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span><br />
Ut convallis rhoncus diam ut scelerisque. Nulla id mi ut augue laoreet commodo sed quis dolor. Aliquam sed arcu risus, non mattis nisi. Aenean urna tortor, consequat sed mattis eget, condimentum at lacus. Fusce elit nisl, vehicula ut interdum eget, faucibus ultricies turpis.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. <br /><br />
Quisque sed dolor est, ut pulvinar nunc. Quisque nec arcu a orci scelerisque facilisis non vel ligula. Integer ultrices lacus sapien. Sed id leo magna, bibendum viverra enim. Integer pulvinar cursus consectetur. Curabitur scelerisque, mauris nec semper luctus, urna dolor dapibus leo, sit amet lobortis velit diam sed velit.
<div style="clear: both"></div>
<div style="height:30px"></div>
<div style="padding: 0px 0px 0px 13px;">
<div class="home_box">
<h1>Company Slogan Goes Here</h1>
<div style="height:5px"></div>
<img src="metamorph_lyrics_lt-images/img12.jpg" class="img_r" alt="" />
Ut convallis rhoncus diam ut scelerisque. Nulla id mi ut augue laoreet commodo sed quis dolor. Aliquam sed arcu risus, non mattis
<div style="height:27px; padding-top:5px;">
<a href="#" class="read">more</a>
</div>
</div>
<div class="razd_col"></div>
<div class="home_box">
<h1>Company Slogan Goes Here</h1>
<div style="height:5px"></div>
<img src="metamorph_lyrics_lt-images/img13.jpg" class="img_r" alt="" />
Donec eget nisi id magna tempor laoreet. Etiam egesa mauris suscipit porta aliquet turpis inter- dum. Donec eget nisi id magna
<div style="height:27px; padding-top:5px;">
<a href="#" class="read">more</a>
</div>
</div><div class="razd_col"></div>
<div class="home_box">
<h1>Company Slogan Goes Here</h1>
<div style="height:5px"></div>
<img src="metamorph_lyrics_lt-images/img14.jpg" class="img_r" alt="" />
Aenean urna tortor, consequat sed mattis eget, condimentum at lacus. Fusce elit nisl, vehicula ut interdum eget, faucibus ultricies
<div style="height:27px; padding-top:5px;">
<a href="#" class="read">more</a>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div style="height:10px"></div>
<div class="kv_top">
<div class="kv_bot">
<span class=" span_cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span><br />
Ut convallis rhoncus diam ut scelerisque. Nulla id mi ut augue laoreet commodo sed quis dolor. Aliquam sed arcu risus, non mattis nisi. Aenean urna tortor, consequat sed mattis eget, condimentum at lacus. Fusce elit nisl, vehicula ut interdum eget, faucibus ultricies turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi.
</div>
</div>
<div style="height:10px"></div>
<h1>Recent Projects</h1>
<div style="height:10px"></div>
<div style=" height: 178px;">
<img src="metamorph_lyrics_lt-images/img15.jpg" style=" float:left; margin-right: 21px;" alt="" />
<img src="metamorph_lyrics_lt-images/img16.jpg" style=" float:left; margin-right: 21px;" alt="" />
<img src="metamorph_lyrics_lt-images/img17.jpg" style=" float:left;" alt="" />
</div>
<div style="clear: both; height: 12px;"></div>
</div>
<!-- content ends -->
<div style="height: 50px;"></div>
<!-- bottom begin -->
<div id="bottom_h">
<div class="b_col1">
<h4>About Us</h4>
</div>
<div class="b_col2">
<h4>Contact Form</h4>
</div>
<div class="b_col3">
<h4>Follow Us</h4>
</div>
<div style="clear: both;"></div>
</div>
<div id="bottom">
<div class="b_col1">
<div style="height: 15px;"></div>
<img src="metamorph_lyrics_lt-images/img18.jpg" class="img_l" alt="" />
<b>Morbi id vehicula orci. </b><br />
Ut consequat commodo nunc nec tincidunt. Pellentesque vitae gravida nulla. Aliquam fermentum ipsum et mauris rutrum ac ornare arcu sollicitudin. Nullam tellus lectus,
</div>
<div class="b_col2">
<form action="" method="post">
<div style="height:30px;"><label>Name</label><input class="input_txt" value="" name="Name" type="text" /></div><div style="height:5px"></div>
<div style="height:30px;"><label>E-mail</label><input class="input_txt" value="" name="E-mail" type="text" /></div><div style="height:5px"></div>
<div><textarea class="text_area" cols="32" rows="3" name="Message"></textarea></div><div style="height:5px"></div>
<div style=" float:left;"><input class="submit" name="Submit" type="submit" value="Submit" /></div>
</form>
</div>
<div class="b_col3">
<ul class="spis_fu">
<li><img src="metamorph_lyrics_lt-images/fu_i1.png" class=" fu_i" alt="" /><a href="#">Lorem ipsum dolor</a></li>
<li><img src="metamorph_lyrics_lt-images/fu_i2.png" class=" fu_i" alt="" /><a href="#">Maecenas in turpis </a></li>
<li><img src="metamorph_lyrics_lt-images/fu_i3.png" class=" fu_i" alt="" /><a href="#">Morbi fringilla libero</a></li>
<li><img src="metamorph_lyrics_lt-images/fu_i4.png" class=" fu_i" alt="" /><a href="#">In venenatis metus vel </a></li>
</ul>
</div>
<div style="clear: both; height:1px;"></div>
</div>
<!-- bottom end -->
<!-- footer begins -->
<div id="footer">
Copyright 2011. <!-- Do not remove -->Designed by <a href="http://www.metamorphozis.com/free_templates/free_templates.php" title="Free Web Templates">Free Web 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>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category