metamorph_freedom_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;
background: url(metamorph_freedom_lt-images/bg.jpg);
line-height: 18px;
}
#bg_clouds { background: url(metamorph_freedom_lt-images/bg_clouds.jpg) top center no-repeat;}
#main {
width: 1000px;
margin: 0px auto;
background:url(metamorph_freedom_lt-images/main.jpg) right top no-repeat;}
#header {
width:1000px;
height: 184px;
}
#logo {
padding: 37px 0px 0px 18px;
height: 75px;
}
#logo H2 {
font-family: Arial, Helvetica, sans-serif;
color:#ffffff;
font-size:18px;
font-style:italic;
background: no-repeat;
}
#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: 56px;
padding-left: 0px;
background: url(metamorph_freedom_lt-images/buttons.png) left top no-repeat;
padding: 0px 0px 0px 100px;
}
#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: 22px;
height: 34px;
}
.but {
width: 160px;
}
#buttons .but:hover {
background: url(metamorph_freedom_lt-images/but_hover.jpg) top repeat-x;
}
.but_t {background: url(metamorph_freedom_lt-images/but_hover.gif) center bottom no-repeat;}
.top_top {
background: url(metamorph_freedom_lt-images/top_top.png) left top no-repeat;
height: 24px;}
.top { height:200px;
background: url(metamorph_freedom_lt-images/top.jpg) 23px top no-repeat #FFFFFF;}
.top_bot {
background: url(metamorph_freedom_lt-images/top_bot.png) left bottom no-repeat;
height: 24px;}
#content{
background: url(metamorph_freedom_lt-images/content.png);
padding: 0px 24px 0px 24px;
color: #000000;
}
#content_gal{
background: url(metamorph_freedom_lt-images/content.png);
padding: 0px 13px 0px 13px;
color: #000000;
}
.cont_top{
background: url(metamorph_freedom_lt-images/cont_top.png) left top no-repeat;
height: 24px;
}
.cont_bot{
background: url(metamorph_freedom_lt-images/cont_bot.png) left bottom no-repeat;
height: 24px;
}
.razd_h { height: 30px;
background: url(metamorph_freedom_lt-images/razd_h.gif) 15px repeat-x;}
.home_box {
float: left;
width: 305px; }
.razd_lr_h { background: url(metamorph_freedom_lt-images/razd_lr.gif) 620px repeat-y;}
.razd_lr { background: url(metamorph_freedom_lt-images/razd_lr.gif) 657px repeat-y;}
#left{
width: 640px;
float: left;
margin-left: 0px;
}
#left_h{
width: 590px;
float: left;
margin-left: 0px;
}
.text{
padding: 0px 0px 15px 0px;
}
.img_l { float:left;
margin: 5px 14px 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: #074690;
text-align: left;
padding: 0px 0px 0px 0px;
line-height:normal;
}
.spis_1 {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis_1 li {
padding: 5px 0px 0px 18px;
background: url(metamorph_freedom_lt-images/fish_spis_1.gif) 0px 10px no-repeat;
}
.spis_1 a {
color:#000000;
text-decoration:none;
font-weight: 100;
display: block;
font-weight:bold;}
.spis_1 a:hover {
text-decoration: underline;
}
.read {
font-size:12px;
color: #FF0000;
text-decoration: none;
display:block;
line-height: 17px;
width: 66px;
text-align: center;
float: right;
font-weight:bold;
}
.read:hover {
font-size:12px;
text-decoration: underline;
}
#right{
float: right;
width: 275px;
margin-right: 0px;
}
#right_h{
float: right;
width: 316px;
margin-right: 0px;
}
.span_dat {
color: #000000;
text-decoration: underline;
font-weight: bold;
padding-bottom: 5px;}
#bottom {
background: url(metamorph_freedom_lt-images/bottom.gif) 43px 30px no-repeat;
color: #FFFFFF;
}
#bottom_bot {
background: url(metamorph_freedom_lt-images/bottom.gif) 43px bottom no-repeat;
color: #FFFFFF;
}
#bottom h1 {
color: #ffffff;
font-size: 18px;
font-weight: 100;
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_freedom_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: 7px 0px 0px 18px;
background: url(metamorph_freedom_lt-images/fish2.gif) 0px 12px no-repeat;
}
.spis_bot a {
color:#ffffff;
text-decoration:none;
font-weight: 100;
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_freedom_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 */
.va_m { vertical-align:middle;}
.datc_coment {
height: 26px;
background:url(metamorph_freedom_lt-images/datc_coment.gif) top repeat-x;
padding: 10px 0px 0px 10px;}
.datc {
float: left;
width: 346px;}
.coment {
float: right;
width: 146px;
text-align: right;}
.datc_coment a {
color: #074690;
text-decoration:none;
font-weight: bold;
font-size:12px;}
.datc_coment a:hover {
text-decoration:underline;}
.spis {
list-style:none;
padding: 0px 0px 0px 25px;}
.spis li {
padding: 8px 0px 2px 16px;
background: url(metamorph_freedom_lt-images/fish_spis.gif) left 14px no-repeat;
}
.spis a:hover {
text-decoration: none;
color:#FF0000;
}
.spis a {
color:#000000;
text-decoration:none;
font-weight: bold;}
.a_blog {
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
font-weight: bold;
color: #074690;
text-align: left;
padding: 5px 0px 10px 0px;
text-decoration: none;
display:block;
}
.a_blog:hover { text-decoration: underline;}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: 100;
color: #074690;
text-align: left;
padding: 0px 0px 10px 25px;
line-height:normal;
background: url(metamorph_freedom_lt-images/razd_h.gif) bottom repeat-x;
}
/* gallery */
.gal_num {
background: url(metamorph_freedom_lt-images/gal_num.png) 0px 0px no-repeat;
width: 14px;
height: 20px;
padding: 1px 0px 0px 6px;
display:block;
margin-right: 5px;
color: #FFFFFF;
font-size: 12px;
float:left;
text-decoration: none; }
.gal_num:hover { background: url(metamorph_freedom_lt-images/gal_num_hover.png) 0px 0px no-repeat;}
.row {
padding: 0px 0px 0px 0px;
height: 273px;
}
.box_img2 {
width: 272px;
height: 273px;
background: url(metamorph_freedom_lt-images/box_img.png) 0px 0px no-repeat;
padding: 0px 20px 0px 20px;
float:left;
color: #000000;
}
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
.box_razd {
width: 19px;
height: 50px;
float: left;
}
h4 {
font-weight:100;
font-size: 18px;
color: #000000;
padding: 15px 0px 17px 0px;}
/* about us */
.bottom_text { padding: 0px 0px 0px 19px;}
.bottom_text a { color:#000000;
text-decoration:none;}
.bottom_text a:hover { text-decoration:underline;}
/* contact us */
#left label {
width: 103px;
float:left;
padding: 5px 0px 0px 5px;}
.input_txt2 {
width: 585px;
border: none;
background: url(metamorph_freedom_lt-images/input_txt2.gif) left top no-repeat;
padding: 6px 10px 6px 10px;
color:#ffffff;
}
.text_area2 {
width: 585px;
height: 123px;
border: none;
background: url(metamorph_freedom_lt-images/text_area2.gif) 0px 0px no-repeat;
padding: 6px 10px 6px 10px;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
}
.submit2 {
background: url(metamorph_freedom_lt-images/submit2.png) right 0px no-repeat;
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 6px 0px 7px 0px;
font-size:12px;
color: #ffffff;
text-decoration: none;
width: 76px;
margin: 0px 54px 0px 0px;
}
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/* http://dev7studios.com
#slider-wrapper {
background:url(metamorph_freedom_lt-images/top.jpg) no-repeat;
width:954px;
height: 200px;
margin:0 auto;
}
#slider {
position:relative;
width: 954px;
height:200px;
background:url(metamorph_freedom_lt-images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
display: none;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(metamorph_freedom_lt-images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(metamorph_freedom_lt-images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
</style>
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
</head>
<body>
<div id="bg_clouds">
<div id="main">
<!-- header begins -->
<div id="header">
<div id="logo">
<a href="#">metamorph_freedom</a>
<h2><a href="#" id="metamorph">Small Company Slogan Goes Here</a></h2>
</div>
<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>
<!-- header ends -->
<div class="top_top"></div>
<div class="top">
<div id="wrapper">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="metamorph_freedom_lt-images/top.jpg" alt="" />
<img src="metamorph_freedom_lt-images/top2.jpg" alt=""/>
<img src="metamorph_freedom_lt-images/top3.jpg" alt="" />
</div>
</div>
</div>
<script type="text/javascript" src="lib/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="lib/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</div>
<div class="top_bot"></div>
<div style="height:17px"></div>
<!-- content begins -->
<div class="cont_top"></div>
<div id="content">
<div class="cont_home_bot">
<div class="home_box">
<img src="metamorph_freedom_lt-images/img11.png" class="img_l" style="padding-bottom: 30px;" alt="" />
<b>Donec eget nisi id magna tempor laoreet. Etiam egestas pulvinar nunc, eu dictum est sagittis vel. </b><br /><br />
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer turpis est, vulputate at
</div><div style="width: 18px; height:26px; float: left;"></div>
<div class="home_box">
<img src="metamorph_freedom_lt-images/img12.png" class="img_l" style="padding-bottom: 20px;" alt="" />
<b>Aenean convallis ipsum a mauris suscipit porta aliquet turpis interdum. </b><br /><br />
Donec eget nisi id magna tempor laoreet. Etiam egestas pulvinar nunc, eu dictum est sagittis vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
</div><div style="width: 18px; height:26px; float: left;"></div>
<div class="home_box">
<img src="metamorph_freedom_lt-images/img13.png" class="img_l" style="padding-bottom: 20px;" alt="" />
<b>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices</b><br /><br />
Integer turpis est, vulputate at cursus a, suscipit quis diam. Cras condimentum metus ut neque lobortis condimentum. Aenean ornare turpis eget sapien
</div>
<div style="clear: both"></div>
</div>
<div style="height:10px"></div>
<div class="razd_h"></div>
<div style="height:10px"></div>
<div style="height:25px">
<h1 style="display:block; width: 300px; float:left ">Small Company Text Goes Here </h1>
<h1 style="display:block; width: 316px; float:right ">Small Company Text Goes Here </h1>
</div>
<div class="razd_lr_h">
<div id="left_h">
<b>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia </b><br /><br />
Integer turpis est, vulputate at cursus a, suscipit quis diam. Cras condimentum metus ut neque lobortis condimentum. Aenean ornare turpis eget sapien venenatis sodales nec vitae sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius sapien eleifend erat fermentum faucibus. Nulla vitae ipsum nibh, a imperdiet eros. Etiam adipiscing nisi quis nulla dictum ullamcorper. Maecenas vel porttitor risus. Duis quis augue libero, at pharetra diam.
<div style="height:10px"></div>
<h1 style="text-align:center">Small Company Text Goes Here </h1>
<div style="height:15px"></div>
<div style="background: url(metamorph_freedom_lt-images/razd_lr.gif) 278px repeat-y ; width: 504px; padding-left: 35px;">
<div style="float: left; width: 216px;">
<ul class="spis_1">
<li><a href="#">Donec luctus luctus faucibus. </a></li>
<li><a href="#">Mauris venenatis arcu vel urna</a></li>
<li><a href="#">Morbi mi sapien, malesuada</a></li>
<li><a href="#">Condimentum id, mattis eu</a></li>
<li><a href="#">Sed non dui vel ipsum gravida </a></li>
<li><a href="#">Nulla imperdiet, nibh gravida </a></li>
</ul>
</div>
<div style="float: right; width: 205px;">
<div class="lh">
<b>Donec luctus luctus faucibus. </b><br />
Mauris venenatis arcu vel urna imperdiet vitae malesuada urna aliquet. Morbi mi sapien, male- suada nec condimentum id, mattis eu lacus. Sed non dui vel ipsum
</div>
</div>
<div style="clear: both"></div>
</div>
</div>
<div id="right_h">
<img src="metamorph_freedom_lt-images/img14.jpg" class="img_l" alt="" /><b>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia </b><br />
Integer turpis est, vulputate at cursus a, suscipit quis diam. Donec eget nisi id magna tempor laoreet. Etiam egestas pulvinar nunc, eu dictum est sagittis vel. <br /><br />
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer turpis est, vulpu
<img src="metamorph_freedom_lt-images/img15.jpg" class="img_l" alt="" /><b>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia </b><br /><br />
Integer turpis est, vulputate at cursus a, suscipit quis diam.
</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_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>
</ul>
</div>
<div id="b_col2">
<h1>Contact Information</h1>
<div style="height:20px"></div>
<div style="padding-left:10px">
<div class="box_us">
<div class="box_us_l">
<img src="metamorph_freedom_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_freedom_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_freedom_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_freedom_lt-images/fu_i1.png" class=" fu_i" alt="" /><a href="#">Subscribe to Blog</a></li>
<li><img src="metamorph_freedom_lt-images/fu_i2.png" class=" fu_i" alt="" /><a href="#">Be a fan on Facebook</a></li>
<li><img src="metamorph_freedom_lt-images/fu_i3.png" class=" fu_i" alt="" /><a href="#">RSS Feed</a></li>
<li><img src="metamorph_freedom_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/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>
</body>
</html>
Related examples in the same category