metamorph_vanillasky_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_vanillasky_lt-images/bg_top.jpg) center top no-repeat #AEDAF8;
line-height: 20px;
}
#bg_bot { background: url(metamorph_vanillasky_lt-images/bg_bot.jpg) center bottom repeat-x;}
#main {
width: 1014px;
margin: 0px auto;
background:url(metamorph_vanillasky_lt-images/main.jpg) right top no-repeat;}
#header {
width:1014px;
height: 77px;
}
#logo {
height: 52px;
width: 210px;
padding: 10px 0px 0px 0px;
}
#logo H2 {
font-family: Arial, Helvetica, sans-serif;
color:#07249F;
font-size:18px;
font-style:italic;
}
#logo a {
text-decoration: none;
font-style: italic;
font-size: 16px;
color: #07249F;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight:100;
}
#buttons{
text-align:center;
height: 36px;
margin-top: 10px;
padding-left: 0px;
background: url(metamorph_vanillasky_lt-images/buttons.png) left top no-repeat;
width: 502px;
float:right;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
display: block;
float: left;
text-decoration: none;
color: #ffffff;
text-align: center;
padding-top: 8px;
height: 28px;
}
.but {
width: 100px;
}
#buttons .but:hover {
background: url(metamorph_vanillasky_lt-images/but_hover.gif) center bottom no-repeat;
}
.but_t {background: url(metamorph_vanillasky_lt-images/but_hover.gif) center bottom no-repeat;}
.top {
height:318px;
width: 1014px;
overflow: hidden
}
#content{
width: 974px;
padding: 0px 20px 0px 20px;
background: #ffffff;
}
.cont_top{
background: url(metamorph_vanillasky_lt-images/cont_top.png) left top no-repeat;
height: 10px;
width: 100%;
}
.cont_bot{
background: url(metamorph_vanillasky_lt-images/cont_bot.png) left bottom no-repeat;
height: 20px;
width: 100%;
}
#cont_r{
background: url(metamorph_vanillasky_lt-images/cont_r.gif) 659px repeat-y;
width: 100%;
}
.cont_home { background: url(metamorph_vanillasky_lt-images/cont_home.gif) 318px repeat-y;}
.cont_home_top { background:url(metamorph_vanillasky_lt-images/cont_home_top.gif) top repeat-x;}
.cont_home_bot { background:url(metamorph_vanillasky_lt-images/cont_home_bot.gif) bottom repeat-x;}
.razd_h { height: 30px;
background: url(metamorph_vanillasky_lt-images/razd_h.gif) 15px repeat-x;}
.home_box {
float: left;
width: 298px; }
#left{
width: 640px;
float: left;
margin-left: 0px;
}
.text{
padding: 0px 0px 15px 0px;
}
.img_l { float:left;
margin: 3px 20px 3px 0px;
}
.img_r { float: right;
margin: 9px 10px 3px 10px;
}
.span_cont { color: #4ACBE2;
font-size:12px;
font-weight:bold;
}
h1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #4ACBE2;
text-align: left;
padding: 0px 0px 0px 0px;
}
h3 {font-family: Arial, Helvetica, sans-serif;
font-size:16px;
font-weight: bold;
color: #4ACBE2;
text-align: left;}
.read {
font-size:12px;
color: #ffffff;
text-decoration: none;
padding-right: 2px;
background: url(metamorph_vanillasky_lt-images/read.jpg) left top no-repeat;
display:block;
height: 20px;
line-height: 17px;
width: 66px;
padding: 0px 0px 0px 0px;
text-align: center;
float: right;
margin-top: 4px;
}
.read:hover {
font-size:12px;
text-decoration: underline;
}
#right{
float: right;
width: 293px;
margin-right: 0px;
}
.span_dat {
color: #000000;
text-decoration: underline;
font-weight: bold;
padding-bottom: 5px;}
#bottom {
background: url(metamorph_vanillasky_lt-images/bottom.gif) 43px 30px no-repeat;
color: #FFFFFF;
}
#bottom_bot {
background: url(metamorph_vanillasky_lt-images/bottom.gif) 43px bottom no-repeat;
color: #FFFFFF;
}
#bottom h1 {
color: #007320;
font-size: 16px;
font-weight: bold;
text-align: center;
padding: 5px 0px 5px 0px;
}
#b_col1 {
width: 253px;
float: left;
margin-left: 43px;
}
#b_col2 {
width: 253px;
float: left;
margin-left: 85px;
}
#b_col3 {
width: 253px;
float: left;
margin-left: 85px;
text-align: left;
}
.box_us {
width: 244px;
background: url(metamorph_vanillasky_lt-images/box_us.gif) 0px bottom repeat-x;
}
.box_us_l {
width: 27px;
float: left;
padding-top:3px;}
.box_us_r {
width: 217px;
float: left;}
.spis_bot {
list-style:none;
padding: 0px 0px 0px 34px;}
.spis_bot li {
padding: 5px 0px 0px 18px;
background: url(metamorph_vanillasky_lt-images/fish2.gif) 0px 12px no-repeat;
}
.spis_bot a {
color:#ffffff;
text-decoration:none;
font-weight: 100;
background: url(metamorph_vanillasky_lt-images/spis_bot_a.gif) bottom repeat-x;
display: block;
font-weight:bold;}
.spis_bot a:hover {
text-decoration: underline;
}
.fu_i {
padding: 0px 14px 0px 0px;
vertical-align: middle ;
}
#b_col3 ul {
list-style:none;
padding: 0px 0px 0px 52px;}
#b_col3 li {
padding: 8px 0px 2px 0px;
background: none;
}
#b_col3 li a {
color:#FFFFFF;
text-decoration: none;
font-weight: bold;}
#b_col3 li a:hover {
text-decoration: underline;
}
#footer{
height: 63px;
font-size: 10px;
color: #ffffff;
text-align: center;
padding: 22px 0px 0px 0px;
background: url(metamorph_vanillasky_lt-images/footer.jpg) 0px 15px no-repeat;
}
#footer a{
color: #ffffff;
font-size: 10px;
text-decoration: none;
}
#footer a:hover{
color: #ffffff;
font-size: 10px;
text-decoration: underline;
}
.lh {
line-height: 22px;
}
/* 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_vanillasky_lt-images/dat_img.gif) 0px 0px no-repeat;
text-align:center;
}
.datc_coment {
height: 27px;
width: 570px;
background:url(metamorph_vanillasky_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;}
.spis {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis li {
padding: 8px 0px 2px 16px;
background: url(metamorph_vanillasky_lt-images/spis.gif) left bottom no-repeat;
}
.spis a:hover {
text-decoration: none;
color:#FF0000;
}
.spis a {
color:#000000;
text-decoration:none;
font-weight: bold;}
.gal_num {
width:13px;
height:21px;
padding: 0px 0px 0px 7px;
display:block;
background: url(metamorph_vanillasky_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_vanillasky_lt-images/gal_num_hover.gif) left top no-repeat;
text-decoration: none;}
.a_blog {
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #4ACBE2;
text-align: left;
padding: 10px 0px 0px 0px;
text-decoration: none;
}
.a_blog:hover { text-decoration: underline;}
/* gallery */
.row {
padding: 0px 0px 0px 0px;
height: 273px;
}
.box_img2 {
width: 272px;
height: 273px;
background: url(metamorph_vanillasky_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_img 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_vanillasky_lt-images/rol_over_galery.png) left top no-repeat;
}
h4 {
font-weight:100;
font-size: 18px;
color: #FFFFFF;
padding: 12px 0px 12px 0px;}
/* about us */
.img_au { float: left; padding: 0px 0px 0px 0px; }
/* contact us */
#left label {
width: 103px;
float:left;
padding: 5px 0px 0px 5px;}
.input_txt2 {
width: 611px;
border: none;
background: url(metamorph_vanillasky_lt-images/input_txt2.gif) left top no-repeat;
padding: 8px 15px 8px 15px;
color:#ffffff;
}
.text_area2 {
width: 611px;
height:88px;
border: none;
background: url(metamorph_vanillasky_lt-images/text_area2.jpg) 0px 0px no-repeat;
padding: 6px 15px 6px 15px;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
}
.submit2 {
background: url(metamorph_vanillasky_lt-images/read.jpg) right 0px no-repeat;
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 0px 0px 5px 0px;
font-size:12px;
color: #ffffff;
text-decoration: none;
width: 66px;
margin: 0px 54px 0px 0px;
}
/*
Header scroll
*/
.round
{
margin: 0 auto;
width: 900px;
height: 300px;
}
.roundabout-holder {
list-style: none;
width: 900px;
height: 66px;
}
.roundabout-moveable-item {
height: 56px;
width: 510px;
font-size: 2em;
cursor: pointer;
}
.roundabout-in-focus {
cursor: auto;
}
</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_t" title="">Home</a>
<a href="blog.html" class="but" title="">Blog</a>
<a href="gallery.html" class="but" title="">Gallery</a>
<a href="about_us.html" class="but" title="">About us</a>
<a href="contact_us.html" class="but" title="">Contact us</a>
</div>
<div id="logo">
<a href="#">metamorph_vanillasky</a>
<h2><a href="#"><small>Small Company Slogan Goes Here</small></a></h2>
</div>
</div>
<!-- header ends -->
<div class="top">
<ul class="round">
<li><img src="metamorph_vanillasky_lt-images/header1.jpg" alt="" /></li>
<li><img src="metamorph_vanillasky_lt-images/header2.jpg" alt="" /></li>
<li><img src="metamorph_vanillasky_lt-images/header3.jpg" alt="" /></li>
<li><img src="metamorph_vanillasky_lt-images/header4.jpg" alt="" /></li>
<li><img src="metamorph_vanillasky_lt-images/header5.jpg" alt="" /></li>
<li><img src="metamorph_vanillasky_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 style="height:10px"></div>
<h1>Welcome to our Website</h1>
<div style="height:10px"></div>
<img src="metamorph_vanillasky_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.<br /><br />
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. 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.
<div style="height:24px;"><a class="read" href="#">more</a></div>
<div style="clear: both"></div>
<div class="razd_h"></div>
<div style="height:15px"></div>
<div class="cont_home">
<div class="cont_home_top">
<div class="cont_home_bot">
<div class="home_box">
<h3>Nunc tempus</h3>
<div style="height:10px"></div>
<img src="metamorph_vanillasky_lt-images/img12.jpg" class="img_l" alt="" />
Nunc tempus libero dictum lectus pharetra pretium. Ut eu massa vitae magna porta porttitor et ut purus. suada et ultrices vitae, commodo in velit. Etiam luctus rhoncus arcu, ac euismod leo feugiat vel. Morbi commodo nulla quis augue rhoncus viverra. Nunc tempus
<div style="height:24px;"><a class="read" href="#">more</a></div>
</div><div style="width: 40px; height:20px; float: left;"></div>
<div class="home_box">
<h3>Etiam luctus</h3>
<div style="height:10px"></div>
<img src="metamorph_vanillasky_lt-images/img13.jpg" class="img_l" alt="" />
Etiam luctus rhoncus arcu, ac euismod leo feugiat vel. Morbi commodo nulla quis augue rhoncus viverra. Nunc cus viverra. Nunc tempus justo non nibh auctor vehicula tempor tellus ullamcorper. Morbi vitae consequat velit. Curabitur augue odio, tristique facilisis
<div style="height:24px;"><a class="read" href="#">more</a></div>
</div><div style="width: 40px; height:20px; float: left;"></div>
<div class="home_box">
<h3>Suspendisse quis</h3>
<div style="height:10px"></div>
<img src="metamorph_vanillasky_lt-images/img14.jpg" class="img_l" alt="" />
Suspendisse quis ipsum a metus mattis pretium vitae et nisl. Class aptent taciti sociosqu ad litora torquent torquent per conubia nostra, per inceptos himenaeos. Curabitur urna odio, dapibus at mattis et, pulvinar in est. Nulla sem lacus, dapibus ut pretium vitae, tempus
<div style="height:24px;"><a class="read" href="#">more</a></div>
</div>
<div style="clear: both"></div>
</div>
</div>
</div>
</div>
<div class="cont_bot"></div>
<!-- content ends -->
<div style="height:15px"></div>
<!-- bottom begin -->
<div id="bottom_bot">
<div id="bottom">
<div id="b_col1">
<h1>Useful Resources</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>Contact Information</h1>
<div style="height:15px"></div>
<div style="padding-left:10px">
<div class="box_us">
<div class="box_us_l">
<img src="metamorph_vanillasky_lt-images/fish_us1.png" alt="" />
</div>
<div class="box_us_r">
<b class="lh">1234 Some Street, Brooklyn, NY 11201</b>
</div>
<div style="clear: both; height:10px;"></div>
</div>
<div class="box_us">
<div class="box_us_l">
<img src="metamorph_vanillasky_lt-images/fish_us2.png" alt="" />
</div>
<div class="box_us_r">
<b class="lh">Phone: 1(234) 567 8910<br />
Fax: 1(234) 567 8910
</b>
</div>
<div style="clear: both; height:10px;"></div>
</div>
<div class="box_us">
<div class="box_us_l">
<img src="metamorph_vanillasky_lt-images/fish_us3.png" alt="" />
</div>
<div class="box_us_r">
<b class="lh">E-mail: companyname@yahoo.com</b>
</div>
<div style="clear: both; height:10px;"></div>
</div>
</div>
</div>
<div id="b_col3">
<h1>Share with Others</h1>
<div style="height:15px"></div>
<ul>
<li><img src="metamorph_vanillasky_lt-images/fu_i1.png" class=" fu_i" alt="" /><a href="#">Subscribe to Blog</a></li>
<li><img src="metamorph_vanillasky_lt-images/fu_i2.png" class=" fu_i" alt="" /><a href="#">Be a fan on Facebook</a></li>
<li><img src="metamorph_vanillasky_lt-images/fu_i3.png" class=" fu_i" alt="" /><a href="#">RSS Feed</a></li>
<li><img src="metamorph_vanillasky_lt-images/fu_i4.png" class=" fu_i" alt="" /><a href="#">Follow us on Twitter</a></li>
</ul>
</div>
<div style="clear: both; height:20px;"></div>
</div>
</div>
<!-- bottom end -->
<!-- footer begins -->
<div id="footer">
Copyright 2011. <!-- Do not remove -->Designed by <a href="http://www.metamorphozis.com/" 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