metamorph_sparks_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_sparks_lt-images/bg.jpg) center top no-repeat #000000;
line-height: 19px;
}
#main {
width: 1014px;
margin: 0px auto;
background:url(metamorph_sparks_lt-images/main.jpg) right top no-repeat;}
#header {
width:1014px;
height: 117px;
}
#logo {
height: 52px;
padding: 10px 0px 0px 800px;
}
#logo H2 {
font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:18px;
font-style:italic;
}
#logo a {
text-decoration: none;
font-style: italic;
font-size: 16px;
color: #FFFFFF;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight:100;
}
#buttons{
text-align:center;
height: 40px;
margin-left: 0px;
padding-left: 0px;
background: url(metamorph_sparks_lt-images/menu.png) left top no-repeat;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
display: block;
float: left;
text-decoration: none;
color: #000000;
text-align: center;
padding-top: 10px;
height: 30px;
}
.but {
width: 103px;
}
.but_home {
background: url(metamorph_sparks_lt-images/but_home.png) left top no-repeat;
height: 40px;
width: 62px;
display: block;}
.but_razd { width: 2px;
height: 40px;
background:url(metamorph_sparks_lt-images/razd_but.gif) left 6px no-repeat;
float:left;}
#buttons .but:hover {
color: #949494;
background:url(metamorph_sparks_lt-images/but_hov.png) center 7px no-repeat;
}
.top { height: 360px;
padding-top: 20px
}
.top_text {
width: 942px;
float:left;
background: url(metamorph_sparks_lt-images/content_text.png);
height:308px;
padding: 0px 32px 0px 0px;}
.top_img {
float:left;
padding: 15px 31px 0px 15px;
}
#content{
width: 100%;
background: #DFDDDD;
}
.cont_top{
background: url(metamorph_sparks_lt-images/cont_top.png) left top no-repeat;
height: 10px;
width: 100%;
}
.cont_bot{
background: url(metamorph_sparks_lt-images/cont_bot.png) left bottom no-repeat;
height: 10px;
width: 100%;
}
#cont_razd{
background: url(metamorph_sparks_lt-images/cont_razd.gif) 679px repeat-y;
width: 100%;
}
.cont_home {
padding: 0px 20px 0px 20px;}
.home_box {
float: left;
width: 298px; }
#left{
width: 640px;
float: left;
color:#000000;
margin-left: 20px;
}
.text{
padding: 0px 0px 15px 0px;
}
.img_l { float:left;
margin: 6px 20px 5px 0px;
}
.img_r { float: right;
margin: 9px 10px 3px 10px;
}
.span_cont { color: #262626;
font-size:12px;
font-weight:bold;
}
H1{
font-family: Arial, Helvetica, sans-serif;
font-size:20px;
font-weight: 100;
color: #04078E;
text-align: left;
padding: 10px 0px 0px 0px;
}
.read_l {
font-size:12px;
color: #ffffff;
text-decoration: none;
padding-right: 2px;
background: url(metamorph_sparks_lt-images/read.jpg) left top no-repeat;
display:block;
height: 17px;
line-height: 17px;
width: 66px;
padding: 0px 0px 0px 0px;
text-align: center;
float: left;
}
.read_l:hover {
font-size:12px;
text-decoration: underline;
}
.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: 293px;
margin-right: 20px;
}
.span_dat {
color: #262626;
text-decoration: underline;
font-weight: bold;}
#bottom {
width: 100%;
background: url(metamorph_sparks_lt-images/bottom.jpg) left top no-repeat #DFDDDD;
}
#b_col1 {
width: 197px;
float: left;
margin-left: 20px;
}
#b_col2 {
width: 364px;
float: left;
margin-left: 40px;
}
#b_col3 {
width: 340px;
float: left;
margin-left: 27px;
text-align:center;
}
#b_col3 label {
width:50px;
float:left;
text-align:left;
padding: 5px 0px 0px 0px;}
.input_txt {
width: 239px;
border: none;
background: url(metamorph_sparks_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_sparks_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_sparks_lt-images/read.jpg) right 7px no-repeat;
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 8px 6px 3px 0px;
font-size:12px;
color: #ffffff;
text-decoration: none;
font-weight: 100;
width: 66px;
margin: 0px 0px 0px 0px;
}
.spis_bot {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis_bot li {
padding: 5px 0px 0px 18px;
background: url(metamorph_sparks_lt-images/fish2.png) 0px 14px no-repeat;
}
.spis_bot a {
color:#262626;
text-decoration:none;
font-weight: 100;
background: url(metamorph_sparks_lt-images/spis_bot_a.gif) bottom repeat-x;
display: block;}
.spis_bot a:hover {
text-decoration: none;
}
.fu_i {
padding: 0px 14px 0px 0px;
vertical-align: middle ;
}
#b_col2 ul {
list-style:none;
padding: 0px 0px 0px 13px;}
#b_col2 li {
padding: 8px 0px 0px 0px;
background: none;
}
#footer{
height: 63px;
font-size: 12px;
color: #ffffff;
text-align: center;
padding: 27px 0px 0px 0px;
background: url(metamorph_sparks_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 */
.dat_img {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
float:left;
width: 50px;
height: 46px;
padding: 4px 0px 0px 0px;
margin-right: 15px;
background:url(metamorph_sparks_lt-images/dat_img.gif) 0px 0px no-repeat;
text-align:center;
}
.datc_coment {
height: 27px;
width: 570px;
background:url(metamorph_sparks_lt-images/datc_coment.gif) top repeat-x;
padding: 3px 0px 0px 0px;}
.datc {
float: left;
width: 346px;}
.coment {
float: right;
width: 146px;
text-align: right;}
.datc_coment a {
color: #262626;
text-decoration:none;
font-weight: bold;}
.datc_coment a:hover {
text-decoration:underline;}
.img_ind1 {
padding: 17px 0px 10px 0px;}
.text_ind1 {
padding: 0px 87px 0px 0px;}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size:20px;
font-weight: 100;
color: #04078E;
text-align: left;
padding: 0px 0px 0px 0px;
}
.spis {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis li {
padding: 8px 0px 2px 20px;
background: url(metamorph_sparks_lt-images/spis.gif) left bottom no-repeat;
}
.spis a:hover {
text-decoration: none;
}
.spis a {
color:#262626;
text-decoration:none;
font-weight: bold;}
.gal_num {
width:13px;
height:21px;
padding: 0px 0px 0px 7px;
display:block;
background: url(metamorph_sparks_lt-images/gal_num.gif) left top no-repeat;
color: #FFFFFF;
font-size: 12px;
margin: 0px 5px 0px 0px;
text-decoration:none;
float: left;}
.gal_num:hover {
background:url(metamorph_sparks_lt-images/gal_num_hover.gif) left top no-repeat;
text-decoration: none;}
.a_blog {
font-family: Arial, Helvetica, sans-serif;
font-size:20px;
font-weight: 100;
color: #04078E;
text-align: left;
padding: 10px 0px 0px 0px;
text-decoration: none;
}
.a_blog:hover { text-decoration: underline;}
/* gallery */
.row {
padding: 0px 0px 0px 20px;
height: 273px;
}
.box_img2 {
width: 272px;
height: 273px;
background: url(metamorph_sparks_lt-images/box_img.jpg) 0px 0px no-repeat;
padding: 0px 20px 0px 20px;
float:left;
color: #FFFFFF;
}
.box_razd {
width: 19px;
height: 50px;
float: left;
}
.box_img2 h1 {
font-family: Arial, Helvetica, sans-serif;
font-size:20px;
font-weight: 100;
color: #74DBFE;
text-align: left;
padding: 15px 0px 15px 0px;
}
.rol_over:hover {
background:url(metamorph_sparks_lt-images/rol_over_galery.png) left top no-repeat;
}
/* about us */
.box_about {
width: 310px;
float:left;}
/* contact us */
#left label {
width: 103px;
float:left;
padding: 5px 0px 0px 5px;}
.input_txt2 {
width: 502px;
border: none;
background: url(metamorph_sparks_lt-images/input_txt2.gif) left top no-repeat;
padding: 8px 15px 8px 15px;
color:#000000;
}
.text_area2 {
width: 611px;
height:112px;
border: none;
background: url(metamorph_sparks_lt-images/text_area2.gif) 0px 0px no-repeat;
padding: 6px 15px 6px 15px;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
}
.submit2 {
background: url(metamorph_sparks_lt-images/read.jpg) right 0px no-repeat;
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 0px 0px 0px 0px;
font-size:12px;
color: #ffffff;
text-decoration: none;
width: 66px;
height: 17px;
margin: 0px 54px 0px 0px;
}
.box_us {
width: 265px;
background: url(metamorph_sparks_lt-images/box_us.gif) 0px bottom repeat-x;
padding-left: 0px;
}
.box_us_l {
width: 28px;
float: left;
padding-top:0px;
vertical-align: top;
text-align:left;}
.box_us_r {
width: 227px;
float: left;}
/*
Header scroll
*/
.roundabout-holder {
list-style: none;
width: 714px;
height: 280px;
margin: 0 auto;
}
.roundabout-moveable-item {
height: 286px;
width: 510px;
background-color: #f3f3f3;
font-size: 2em;
cursor: pointer;
}
.roundabout-in-focus {
cursor: auto;
}
</style>
</head>
<body>
<div id="main_bg">
<div id="main">
<!-- header begins -->
<div id="header">
<div id="logo">
<a href="#">metamorph_sparks</a>
<h2><a href="#"><small>Company Slogan Goes Here</small></a></h2>
</div>
<div id="buttons">
<a href="index.html" class="but_home" title=""></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>
<!-- header ends -->
<div class="top">
<ul class="round">
<li><img src="metamorph_sparks_lt-images/header1.jpg" alt="" /></li>
<li><img src="metamorph_sparks_lt-images/header2.jpg" alt="" /></li>
<li><img src="metamorph_sparks_lt-images/header3.jpg" alt="" /></li>
<li><img src="metamorph_sparks_lt-images/header4.jpg" alt="" /></li>
<li><img src="metamorph_sparks_lt-images/header5.jpg" alt="" /></li>
<li><img src="metamorph_sparks_lt-images/header6.jpg" alt="" /></li>
</ul>
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="lib/jquery.roundabout.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.round').roundabout();
});
</script>
</div>
<!-- content begins -->
<div class="cont_top"></div>
<div id="content">
<div class="cont_home">
<div class="home_box">
<h1>Lorem Ipsum Dolor</h1>
<div style="height:15px"></div>
<img src="metamorph_sparks_lt-images/img11.jpg" alt="" />
<div style="height:10px;"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur magna tortor, ultricies id pellentesque a, tristique in nulla. Donec commodo consectetur mauris quis sagittis. Donec ac lectus turpis, et eleifend dolor. <div style="height:5px"></div>
<div style="height:20px;"><a class="read_l" href="#">more</a></div>
</div><div style="width: 40px; height:20px; float: left;"></div>
<div class="home_box">
<h1>Etiam Vitae Enim</h1>
<div style="height:15px"></div>
<img src="metamorph_sparks_lt-images/img12.jpg" alt="" />
<div style="height:10px;"></div>
Etiam vitae enim diam, in molestie ipsum. Aenean mollis diam nec dui commodo condimentum. Sed quam libero, luctus id pharetra et, iaculis quis lorem. Praesent magna orci, pharetra nec ornare id, porta id <div style="height:5px"></div>
<div style="height:20px;"><a class="read_l" href="#">more</a></div>
</div><div style="width: 40px; height:20px; float: left;"></div>
<div class="home_box">
<h1>Integer Id Mi Ligula</h1>
<div style="height:15px"></div>
<img src="metamorph_sparks_lt-images/img13.jpg" alt="" />
<div style="height:10px;"></div>
Integer id mi ligula, non aliquet diam. Ut venenatis arcu ut augue luctus lacinia. Nam pretium enim id magna vehicula at suscipit odio vehicula. Morbi mollis augue at sem tincidunt sit amet accumsan nibh <div style="height:5px"></div>
<div style="height:20px;"><a class="read_l" href="#">more</a></div>
</div>
<div style="clear: both"></div>
</div>
</div>
<div class="cont_bot"></div>
<!-- content ends -->
<div style="height:15px"></div>
<!-- bottom begin -->
<div id="bottom">
<div style="height:10px"></div>
<div id="b_col1">
<h1>Recent Posts</h1>
<div style="height:10px"></div>
<ul class="spis_bot">
<li><a href="#">Lorem ipsum dolor sit amet </a></li>
<li><a href="#">Maecenas in magna quis augue</a></li>
<li><a href="#">Ut a mauris nec eros consect</a></li>
<li><a href="#">Nam luctus felis at mauris co </a></li>
<li><a href="#">Aliquam sagittis ligula sit amet </a></li>
<li><a href="#">Quisque sit amet est id urna</a></li>
<li><a href="#">Aenean gravida ipsum in quam</a></li>
</ul>
</div>
<div id="b_col2">
<h1>Nulla Eu Leo At Ligula</h1>
<div style="height:15px"></div>
<img src="metamorph_sparks_lt-images/img14.jpg" class="img_l" alt="" />
<span class="span_cont">Nulla eu leo at ligula porta aliquam. </span><br />
Donec fermentum leo sed ante accumsan vitae faucibus tellus commodo. Pellentesque fermentum, purus eu aliquam. <br /><div style="height:5px"></div>
<img src="metamorph_sparks_lt-images/img15.jpg" class="img_l" alt="" />
<span class="span_cont">Cras dictum, est eget adipiscing consectetur, eros eros posuere eros, non mattis neque sem ultricies mauris. </span>
Vestibulum aliquet congue nunc a consect <br />
</div>
<div id="b_col3">
<h1>Send a Message</h1>
<div style="height:15px"></div>
<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=" float:left;"><input class="submit" name="Submit" type="submit" value="Submit" /></div>
</form>
</div>
<div style="clear: both;"></div>
</div>
<div class="cont_bot"></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>
</div>
</body>
</html>
Related examples in the same category