treasure-hunters
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Treasure Hunters</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<style type='text/css'>
body
{
background:url(treasure-hunters-images/bg.jpg) no-repeat center top #000000;
padding:0;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
margin:0px auto auto auto;
color:#696767;
}
p{
padding:0px 0 20px 0;
text-align:justify;
margin:0px;
line-height:17px;
}
p.tips{
padding:0px 0 7px 0;
text-align:justify;
margin:0px;
line-height:17px;
border-bottom:1px #cebf91 dashed;
}
h1{
color:#7e5025;
padding:5px 0 10px 0;
margin:0px;
font-size:19px;
font-weight:normal;
}
h2{
color:#2d7513;
padding:0px 0 5px 0;
margin:0px;
font-size:12px;
font-weight:bold;
}
a.read_more{
display:block;
color:#855f35;
float:right;
font-style:italic;
margin:5px 0 0 0;
text-decoration:none;
font-size:12px;
}
a:hover.read_more{
text-decoration:underline;
}
img.left_icon{
float:left;
padding:0px 15px 0px 0px;
}
img.right_icon{
float:right;
padding:0px 0px 0px 15px;
}
.clear{
clear:both;
}
a{
text-decoration:underline;
}
#main_container{
width:960px;
height:auto;
margin:auto;
padding:0px;
position:relative;
}
.top_leafs{
position:absolute;
top:0px;
left:11px;
z-index:200;
}
#header{
width:960px;
height:196px;
margin:0px;
padding:0px;
background:url(treasure-hunters-images/header_bg.jpg) no-repeat top center;
}
.logo{
width:290px;
text-align:center;
font-size:28px;
color:#7e5025;
float:left;
padding:110px 0 0 112px;
}
.logo a{
color:#7e5025;
text-decoration:none;
}
/*---------------- menu tab----------------------*/
.menu{
width:470px;
float:left;
padding:145px 0 0 40px;
}
.menu ul{
list-style:none;
padding:0px;
margin:0px;
}
.menu ul li{
display:inline;
}
.menu ul li a{
float:left;
border:none;
margin:0 10px 0 10px;
_margin:0 7px 0 7px;
text-decoration:none;
color:#754928;
font-size:14px;
font-weight:bold;
}
.menu ul li a:hover{
color:#754928;
border-bottom:3px #bc8d46 solid;
}
.menu ul li.selected a{
float:left;
border:none;
margin:0 10px 0 10px;
text-decoration:none;
color:#754928;
font-size:14px;
font-weight:bold;
border-bottom:3px #bc8d46 solid;
}
/*-------------center_content-------------*/
#center_content{
width:819px;
margin:auto auto 20px auto;
height:auto;
background-color:#fef8e6;
}
.left_content{
width:410px;
float:left;
padding:15px 10px 10px 60px;
}
.right_content{
width:290px;
float:left;
padding:0 10px 10px 20px;
}
.bottom_content{
width:819px;
height:369px;
clear:both;
margin:auto;
background:url(treasure-hunters-images/bottom_bg.jpg) no-repeat top center;
}
.photos_block{
padding:10px 0 10px 0;
}
.photo_box{
width:114px;
height:111px;
float:left;
display:block;
text-align:center;
margin:0 18px 0 0;
position:relative;
background:url(treasure-hunters-images/photo_bg.gif) no-repeat center;
}
img.photo{
padding:6px 0 0 0;
}
a.view{
float:right;
padding:4px 6px 0 0;
text-decoration:none;
color:#706443;
}
.tip_box{
clear:both;
float:left;
width:290px;
padding:0 0 15px 0;
}
.news_box{
clear:both;
float:left;
width:290px;
padding:5px 0 5px 0;
}
.date_box{
width:47px;
height:49px;
float:left;
text-align:center;
line-height:25px;
font-weight:bold;
background:url(treasure-hunters-images/date_bg.gif) no-repeat center;
}
span.day{
color:#855f35;
}
span.month{
color:#fef8e5;
}
.news_content{
width:230px;
float:left;
padding:0 0 0 10px;
}
.about_text{
width:300px;
padding:195px 0 0 30px;
float:left;
}
.friends_list{
width:180px;
float:left;
padding:195px 0 0 30px;
}
/*----------------------list-------------------------*/
ul.list{
list-style:none;padding:0px;margin:0px;
}
ul.list li{
list-style:none;width: auto;height: auto;padding:0 0 8px 0; margin:0px;
}
ul.list li a{
width: auto; padding:0 0 0 15px; margin:0;color:#696767;text-align:left; display:block;
text-decoration:none;background:url(treasure-hunters-images/footer_bullet.gif) no-repeat left;
}
ul.list li a:hover{
text-decoration:underline;
}
.bottom_right{
width:240px;
float:left;
text-align:center;
padding:195px 0 0 15px;
}
.bottom_right a{
padding:10px 0 10px 0;
display:block;
}
.footer{
clear:both;
width:770px;
margin:auto;
text-align:center;
padding:5px 0 0 0;
font-size:11px;
border-top:1px #cebf91 dashed;
}
</style>
<script type="text/javascript" src="unitpngfix.js"></script>
</head>
<body>
<div id="main_container">
<div class="top_leafs"><img src="treasure-hunters-images/top_leafs.png" alt="" /></div>
<div id="header">
<div class="logo"> <a href="http://www.free-css.com/">Treasure Hunters</a> </div>
<div class="menu">
<ul>
<li class="selected"><a href="http://www.free-css.com/">home</a></li>
<li><a href="http://www.free-css.com/">about us</a></li>
<li><a href="http://www.free-css.com/">treasure maps</a></li>
<li><a href="http://www.free-css.com/">photos</a></li>
<li><a href="http://www.free-css.com/">contact us</a></li>
</ul>
</div>
</div>
<div id="center_content">
<div class="left_content">
<h1>Welcome to our website</h1>
<p> <img src="treasure-hunters-images/icon1.gif" alt="" class="left_icon" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<h1>Treasure maps</h1>
<p> <img src="treasure-hunters-images/icon2.gif" alt="" class="right_icon" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<h1>Photos</h1>
<div class="photos_block">
<div class="photo_box"> <a href="http://www.free-css.com/"><img src="treasure-hunters-images/photo2.jpg" alt="" class="photo" border="0" /></a><br />
<a href="http://www.free-css.com/" class="view">view</a> </div>
<div class="photo_box"> <a href="http://www.free-css.com/"><img src="treasure-hunters-images/photo1.jpg" alt="" class="photo" border="0" /></a><br />
<a href="http://www.free-css.com/" class="view">view</a> </div>
<div class="photo_box"> <a href="http://www.free-css.com/"><img src="treasure-hunters-images/photo3.jpg" alt="" class="photo" border="0" /></a><br />
<a href="http://www.free-css.com/" class="view">view</a> </div>
</div>
</div>
<div class="right_content">
<h1>Expedition tips</h1>
<div class="tip_box">
<h2>Eiusmod tempor incididunt.</h2>
<p class="tips"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<a href="http://www.free-css.com/" class="read_more">read more</a> </div>
<div class="tip_box">
<h2>Eiusmod tempor incididunt.</h2>
<p class="tips"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<a href="http://www.free-css.com/" class="read_more">read more</a> </div>
<h1>Blog News</h1>
<div class="news_box">
<div class="date_box"> <span class="day">24</span><br />
<span class="month">febr</span> </div>
<div class="news_content">
<h2>Eiusmod tempor incididunt.</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore. </p>
</div>
</div>
<div class="news_box">
<div class="date_box"> <span class="day">08</span><br />
<span class="month">may</span> </div>
<div class="news_content">
<h2>Eiusmod tempor incididunt.</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore. </p>
</div>
</div>
</div>
<div class="bottom_content">
<div class="about_text">
<h1>About us</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<div class="friends_list">
<h1>Some friends</h1>
<ul class="list">
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
</ul>
</div>
<div class="bottom_right"> <a href="http://www.free-css.com/"><img src="treasure-hunters-images/join_club.gif" alt="" border="0" /></a> <a href="http://csstemplatesmarket.com"><img src="treasure-hunters-images/csstemplatesmarket.gif" alt="" border="0" /></a> </div>
<div class="footer"> © Websitename 2009. All Rights Reserved </div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category