travel 2
<!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>
<title>Travel</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type='text/css'>
* {
margin: 0px;
padding: 0px;
}
body {
padding: 10px 0px 10px;
background-color: #484848;
color: #fff;
font-family: verdana, arial, sans-serif;
font-size: 12px;
text-align: center;
}
a {
color: #fff;
background-color: inherit;
text-decoration: underline;
}
a:hover {
color: #e1d9a7;
background-color: inherit;
}
span {
display: none;
}
img {
border: none;
}
ul {
list-style-type: none;
}
li {
list-style-type: none;
}
p {
margin: 6px 0px 15px;
text-align: justify;
line-height: 14px;
}
.clearthis {
margin : 0px;
height : 1px;
clear : both;
float : none;
font-size : 1px;
line-height : 0px;
overflow : hidden;
visibility: hidden;
}
#body_wrapper {
margin: 0px auto;
padding: 2px 0px;
width: 777px;
background-color: #fcfcfc;
color: inherit;
text-align: left;
}
.add_shadow {
float: left;
background: url('travel-images/shadow_bot.gif') no-repeat 0% 100%;
}
.add_shadow div {
display: block;
float: left;
background: url('travel-images/shadow_right.gif') no-repeat 100% 0%;
}
.add_shadow div div {
display: block;
float: none;
padding: 0px 5px 5px 0px;
background: url('travel-images/shadow_rightbot.gif') no-repeat 100% 100%;
}
.add_shadow div div div {
padding: 0px;
background: none;
}
/* Company Logo */
#company_header {
margin: 45px 10px;
z-index: 1;
position: absolute;
}
#company_logo {
padding: 3px;
background: url('travel-images/company_poster.gif') #fff no-repeat 3px 3px;
color: #000;
}
#company_logo h1 {
display: block;
background: url('travel-images/company_logo.gif') no-repeat 50% 3px;
width: 368px;
height: 368px;
}
#company_logo h1 span {
display: none;
}
/* Navigational Menu */
#nav_menu {
margin: 0px 2px;
width: 773px;
background-color: #5c3424;
color: #fff;
border-bottom: #fff 2px solid;
font-family: arial, sans-serif;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
}
#nav_menu ul {
margin-left: 130px;
width: 630px;
height: 27px;
overflow: hidden;
}
#nav_menu li {
padding: 5px 11px 3px 10px;
background: url('travel-images/navmenu_div.gif') no-repeat 100% 7px;
float: left;
}
#nav_menu li#last {
padding-right: 10px;
background-image: none;
}
#nav_menu a {
text-decoration: none;
}
/* Content Body */
#content_body {
margin: 0px 2px;
padding: 17px 12px 15px 15px;
background-color: #dddacc;
border-bottom: #fff 2px solid;
color: #000000;
text-align: left;
}
#content_body a {
background-color: inherit;
color: #000000;
}
#content_body a:hover {
background-color: #dddacc;
color: #a64a26;
}
#content_body .content_header2 {
display: block;
border: #000 2px solid;
}
#content_body .content_header h2 {
padding: 3px 0px;
font-size: 14px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
#content_body .content_box {
padding: 10px 15px 20px 6px;
clear: both;
float: none;
}
/* Left Column */
#left_column {
margin-left: 5px;
margin-top: 395px;
width: 365px;
float: left;
}
#left_column .content_header {
padding-bottom: 45px;
}
#left_column .content_header h2 {
width: 351px;
background-color: #c4bea1;
color: #545246;
}
/* Right Column */
#right_column {
width: 353px;
float: right;
}
#right_column .content_header h2 {
width: 348px;
background-color: #a64a26;
color: #fff;
}
/* Travel Gallery */
#travelgallery {
padding-bottom: 5px;
float: none;
clear: both;
text-align: center;
}
.gallery_thumbnail {
float: left;
padding: 5px 5px 0px 0px;
}
.gallery_thumbnail .add_shadow {
background-color: #000;
color: #fff;
}
.gallery_thumbnail .add_shadow div div {
padding-bottom: 3px;
}
.gallery_thumbnail .add_shadow img {
margin: 1px;
}
#travelgallery .view_all {
margin: 15px auto 0px;
width: 154px;
height: 26px;
float: none;
clear: both;
}
#travelgallery .view_all a {
padding: 3px 5px;
border: #000 1px solid;
background-color: #c4bea1;
color: #5c3424;
display: block;
font-weight: bold;
font-family: arial, sans-serif;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
}
#travelgallery .view_all a:hover {
background-color: #be552c;
color: #fff;
}
/* Page Footer */
#page_footer {
margin: 0px 2px;
padding: 7px 0px;
width: 773px;
background-color: #5c3424;
color: inherit;
font-size: 11px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div id="body_wrapper">
<!-- Start of Company Header -->
<div id="company_header">
<div class="add_shadow">
<div>
<div>
<div id="company_logo">
<h1><span>Travel Agency</span></h1>
</div>
</div>
</div>
</div>
</div>
<!-- End of Company Header -->
<!-- Start of Navigational Menu -->
<div id="nav_menu">
<ul>
<li><a href="http://www.free-css-templates.co.uk">Home Page</a></li>
<li><a href="http://www.free-css.com/">Our Tours</a></li>
<li><a href="http://www.free-css.com/">Destinations</a></li>
<li><a href="http://www.free-css.com/">Hotel Guide</a></li>
<li id="last"><a href="http://www.free-css.com/">Contacts</a></li>
</ul>
</div>
<!-- End of Navigational Menu -->
<!-- Start of Content Body -->
<div id="content_body">
<!-- Start of Left Column -->
<div id="left_column">
<!-- Start of Travel Gallery -->
<div class="content_header">
<div class="add_shadow">
<div>
<div>
<div class="content_header2">
<h2>Travel Gallery</h2>
</div>
</div>
</div>
</div>
</div>
<div id="travelgallery">
<!-- Start of Travel Thumbnail -->
<div class="gallery_thumbnail">
<div class="add_shadow">
<div>
<div> <img src="travel-images/travelgallery_01.gif" width="170" height="114" alt="Thumbnail Caption" /> </div>
</div>
</div>
</div>
<!-- End of Travel Thumbnail -->
<!-- Start of Travel Thumbnail -->
<div class="gallery_thumbnail">
<div class="add_shadow">
<div>
<div> <img src="travel-images/travelgallery_02.gif" width="170" height="114" alt="Thumbnail Caption" /> </div>
</div>
</div>
</div>
<!-- End of Travel Thumbnail -->
<!-- Start of Travel Thumbnail -->
<div class="gallery_thumbnail">
<div class="add_shadow">
<div>
<div> <img src="travel-images/travelgallery_03.gif" width="170" height="114" alt="Thumbnail Caption" /> </div>
</div>
</div>
</div>
<!-- End of Travel Thumbnail -->
<!-- Start of Travel Thumbnail -->
<div class="gallery_thumbnail">
<div class="add_shadow">
<div>
<div> <img src="travel-images/travelgallery_04.gif" width="170" height="114" alt="Thumbnail Caption" /> </div>
</div>
</div>
</div>
<!-- End of Travel Thumbnail -->
<div class="clearthis"> </div>
<div class="view_all">
<div class="add_shadow">
<div>
<div> <a href="http://www.free-css.com/">View All Photos</a> </div>
</div>
</div>
</div>
</div>
<!-- End of Travel Gallery -->
</div>
<!-- End of Left Column -->
<!-- Start of Right Column -->
<div id="right_column">
<!-- Start of News and Events -->
<div class="content_header">
<div class="add_shadow">
<div>
<div>
<div class="content_header2">
<h2>News and Events</h2>
</div>
</div>
</div>
</div>
</div>
<div class="content_box">
<p> This is a template designed by free website templates for you for free you can replace all the text by your own text. This is just a place holder so you can see how the site would look like. </p>
<p> If you're having problems editing the template please don't hesitate to ask for help on the forum. You will get help as soon as possible. You can also use the forum to tell us what you like or dislike and what you would like to see more. </p>
<p> Your feedback is very important to us and we will do everything to fulfil your wishes. </p>
<p> This is a template designed by free website templates for you for free you can replace all the text by your own text. This is just a place holder so you can see how the site would look like. </p>
<p> If you're having problems editing the template please don't hesitate to ask for help on the forum. You will get help as soon as possible. <a href="http://www.free-css.com/">more...</a> </p>
</div>
<!-- End of News and Events -->
<!-- Start of Hot Destinations -->
<div class="content_header">
<div class="add_shadow">
<div>
<div>
<div class="content_header2">
<h2>Hot Destinations</h2>
</div>
</div>
</div>
</div>
</div>
<div class="content_box">
<p> Please don't remove the link at the bottom. We have worked hard to make the templates and ask that you respect our hard work so we can continue providing you with high quality templates. </p>
<p> If you really want to remove the link you can buy a copyright free version on our website. </p>
<p> Please don't remove the link at the bottom. We have worked hard to make the templates and ask that you respect our hard work so we can continue providing you with high quality templates. </p>
<p> If you really want to remove the link you can buy a copyright free version on our website. </p>
</div>
<!-- End of Hot Destinations -->
</div>
<!-- End of Right Column -->
<div class="clearthis"> </div>
</div>
<!-- End of Content Body -->
<!-- Start of Page Footer -->
<div id="page_footer"> Web design by <a href="http://www.freewebsitetemplates.com/">Free Website Templates</a> </div>
<!-- End of Page Footer -->
</div>
</body>
</html>
Related examples in the same category