travel-and-tour
<!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>Travel and Tour</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #0d2d4b;
background: #73afd6 url(travel-and-tour-images/body.jpg) top repeat-x;
}
a:link, a:visited { color: #71950f; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #990000; text-decoration: underline; }
.button_01 a {
display: block;
width: 80px;
height: 21px;
padding: 3px 0 0 0;
background: url(travel-and-tour-images/button.png) no-repeat;
color: #fff;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
}
.button_01 a:hover {
color: #666;
background: url(travel-and-tour-images/button_hover.png) no-repeat;
}
p { margin: 0px; padding: 0px; }
img { margin: 0px; padding: 0px; border: none; }
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.float_l { float: left; }
.float_r { float: right; }
#wrapper_outter {
width: 100%;
margin: 0 auto;
background: url(travel-and-tour-images/body_top.jpg) top center no-repeat;
}
#wrapper_inner {
width: 1000px;
margin: 0 auto;
background: url(travel-and-tour-images/body_top.jpg) top center no-repeat;
}
#wrapper {
width: 980px;
padding: 0 10px;
background: url(travel-and-tour-images/template_content.png) repeat-y center;
}
#container {
width: 980px;
padding: 30px 0;
background: url(travel-and-tour-images/content_top.jpg) top center no-repeat;
}
#header {
padding: 0 30px;
}
#header #header_left {
float: left;
width: 570px;
height: 250px;
}
/* menu */
#header_left #menu {
clear: both;
width: 564px;
height: 44px;
background: url(travel-and-tour-images/menu.png) no-repeat;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
padding: 0;
margin: 0;
display: inline;
}
#menu ul li a {
float: left;
display: block;
height: 20px;
padding: 12px 20px;
margin-right: 10px;
text-align: center;
font-size: 14px;
text-decoration: none;
color: #00CCFF;
font-weight: bold;
outline: none;
}
#menu li a:hover, #menu li .current {
color: #ffffff;
}
/* end of menu */
#header_left #site_title {
float: left;
width: 400px;
margin: 30px 0 0 40px;
}
#site_title h1 {
margin: 0;
padding: 0;
}
#site_title h1 a {
margin: 0px;
padding: 0px;
font-size: 30px;
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
#site_title h1 a:hover {
font-weight: bold;
text-decoration: none;
}
#site_title h1 a span {
display: block;
margin-top: 5px;
margin-left: 5px;
font-size: 14px;
color: #666;
font-weight: bold;
letter-spacing: 2px;
}
/* end of site title */
/* login */
#header #header_right {
float: right;
width: 284px;
height: 154px;
padding: 15px 20px;
overflow: hidden;
background: url(travel-and-tour-images/login.png) no-repeat;
}
#header #header_right h2 {
border-bottom: 1px solid #666666;
padding-bottom: 5px;
}
#header #header_right form {
margin: 0;
padding: 0;
}
#header #header_right form label {
float: left;
text-align: right;
display: block;
width: 80px;
margin-top: 3px;
margin-right: 10px;
}
.input_field {
float: right;
height: 20px;
width: 160px;
padding: 0 5px;
margin-bottom: 10px;
color: #000000;
font-size: 12px;
font-variant: normal;
line-height: normal;
}
#submit_btn {
float: right;
height: 25px;
width: 80px;
padding: 0 0 10px 0;
cursor: pointer;
font-size: 12px;
text-align: center;
vertical-align: bottom;
white-space: pre;
outline: none;
}
/* end of login */
/* content */
#content_wrapper {
clear: both;
padding: 0 30px 0 15px;
margin-bottom: 20px;
}
#content_outer {
float: left;
width: 630px;
padding: 30px 0 0 0;
background: url(travel-and-tour-images/main_content_top.png) no-repeat top center;
}
#content {
padding: 0 40px 20px 40px;
background: url(travel-and-tour-images/main_content_middle.png) repeat-y center;
}
#content h2 {
font-size: 18px;
font-weight: bold;
margin: 0 0 15px 0;
color: #71950f;
}
#content .content_section {
clear: both;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px dotted #666;
}
#content p {
margin-bottom: 10px;
}
#content .em_text {
color: #0d2d4b;
}
#content .featured_tour {
width: 250px;
margin: 10px 0 0 0;
padding: 0;
list-style: none;
}
.featured_tour li {
margin: 0;
padding: 0;
}
.featured_tour li a {
display: block;
color: #71950f;
font-weight: bold;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px dotted #CCC;
}
.featured_tour li a span {
font-weight: normal;
display: block;
color: #888;
}
#content_bottom {
display: block;
width: 630px;
height: 5px;
background: url(travel-and-tour-images/main_content_bottom.png) no-repeat;
}
/* end of content */
/* sidebar */
#template_sidebar {
float: right;
width: 280px;
padding-top: 20px;
}
#template_sidebar .sidebar_section {
margin-bottom: 40px;
}
#template_sidebar h2 {
margin: 0 0 10px 0;
padding: 10px 0;
font-size: 26px;
font-weight: bold;
color: #000000;
}
#template_sidebar h3 {
margin: 0 0 5px 0;
}
#template_sidebar p {
margin-bottom: 10px;
}
#template_sidebar .image_wrapper {
display: block;
width: 260px;
height: 140px;
padding: 10px;
margin-bottom: 8px;
background: url(travel-and-tour-images/image_frame_280x140.png);
background-repeat: no-repeat;
}
#template_sidebar .image_wrapper img {
width: 260px;
height: 120px;
}
/* end of sidebar */
/* footer */
#footer {
clear: both;
width: 920px;
padding: 30px 0 0 0;
margin: 0 30px 0 30px;
border-top: 1px solid #999;
margin: 0 auto;
text-align: center;
color: #666666;
}
#footer a {
font-weight: bold;
color: #135b9b;
}
#footer .footer_menu {
margin: 0 0 10px 0;
padding: 0px;
list-style: none;
}
.footer_menu li {
margin: 0px;
padding: 0 20px;
display: inline;
border-right: 1px solid #aea68c;
}
.footer_menu li a {
color: #135b9b;
}
.footer_menu .last_menu {
border: none;
}
/* end of footer */
</style>
</head>
<body>
<div id="wrapper_outter">
<div id="wrapper_inner">
<div id="wrapper">
<div id="container">
<div id="header">
<div id="header_left">
<div id="menu">
<ul>
<li><a href="#" class="current"><span></span>Home</a></li>
<li><a href="#">Tours</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!-- end of menu -->
<div id="site_title">
<h1><a href="#"> <img src="travel-and-tour-images/logo.png" alt="" /> <span>free website template</span> </a></h1>
</div>
</div>
<!-- end of header left -->
<div id="header_right">
<h2>Member Login</h2>
<form action="#" method="get">
<label>Username</label>
<input type="text" value="" name="username" size="10" class="input_field" />
<div class="cleaner"></div>
<label>Password</label>
<input type="password" value="" name="password" class="input_field" />
<div class="cleaner"></div>
<input type="submit" name="login" value="Login" alt="login" id="submit_btn" />
</form>
</div>
<!-- end of header right -->
<div class="cleaner"></div>
</div>
<!-- end of header -->
<div id="content_wrapper">
<div id="content_outer">
<div id="content">
<div class="content_section">
<h2>Welcome to Travel & Tour</h2>
<p><a href="#">Free Website Templates</a> are provided by <a href="#">TemplateMo.com</a>. Feel free to download, edit and use this template for your websites. Credit goes to <a href="#">Public Domain Picutures</a> for the header picture used in this template.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et quam vitae ipsum vulputate varius vitae semper nunc. Quisque eget elit quis augue pharetra feugiat. Suspendisse turpis arcu, dignissim ac laoreet a, condimentum in massa.</p>
</div>
<div class="content_section">
<h2> Tour Programs</h2>
<p class="em_text">Sed et quam vitae ipsum vulputate varius vitae semper nunc. Quisque eget elit quis augue pharetra feugiat. Suspendisse turpis arcu, dignissim ac laoreet a, condimentum in massa.</p>
<ul class="featured_tour float_l">
<li> <a href="#">Donec a nunc nec est euismod congue <span>Duis id erat quis sem eleifend molestie.</span></a> </li>
<li> <a href="#">Proin at urna eu sem convallis elementum <span>Ut dapibus tincidunt tempus. Aliquam ac pellentesque mauris. Donec at nisl tellus. </span></a> </li>
<li> <a href="#">Aenean tristique vehicula laoreet <span>Vestibulum ante ipsum primis in faucibus orci luctus.</span></a> </li>
<li> <a href="#">Praesent et odio sit amet <span>Pellentesque euismod auctor libero, in euismod eros.</span></a> </li>
</ul>
<ul class="featured_tour float_r">
<li> <a href="#">Vestibulum euismod vulputate consectetur <span>Suspendisse risus tortor, sagittis ac ante.</span></a> </li>
<li> <a href="#">tiam turpis arcu, tempus id mauris <span>Nulla dictum rhoncus lacinia. Quisque feugiat malesuada nulla, sit amet fringilla dui.</span></a> </li>
<li> <a href="#">Suspendisse id mauris nec mi <span>Pellentesque euismod auctor libero, in euismod eros.</span></a> </li>
<li> <a href="#">Aenean tristique vehicula laoreet. <span>Cras eget massa aliquam dolor consectetur pharetra. Vivamus vehicula tincidunt eleifend</span></a> </li>
</ul>
<div class="cleaner"></div>
<div class="button_01"><a href="#">View All</a></div>
<div class="cleaner"></div>
</div>
</div>
<!-- end of content -->
<div id="content_bottom"></div>
<div class="cleaner"></div>
</div>
<!-- end of content_outer -->
<div id="template_sidebar">
<div class="sidebar_section">
<h2>New Destinations</h2>
<div class="image_wrapper"> <a href="#"><img src="travel-and-tour-images/image_01.jpg" alt="" width="260" height="120" /></a> </div>
<h3>Lorem ipsum dolor sit amet</h3>
<p>Sed et quam vitae ipsum vulputate varius vitae semper nunc. Quisque eget elit quis augue pharetra feugiat. </p>
<div class="button_01"><a href="#">Read more</a></div>
<div class="cleaner_h30"></div>
<div class="image_wrapper"> <a href="#"><img src="travel-and-tour-images/image_02.jpg" alt="" width="260" height="120" /></a> </div>
<h3>Maecenas scelerisque porttitor</h3>
<p>Donec augue sem, interdum sed elementum a, feugiat id ligula. Sed id blandit dolor. Curabitur nibh ligula. </p>
<div class="button_01"><a href="#">Read more</a></div>
</div>
</div>
<!-- end of template_sidebar -->
<div class="cleaner"></div>
</div>
<!-- end of content_wrapper -->
<div id="footer">
<ul class="footer_menu">
<li><a href="#">Home</a></li>
<li><a href="#">Tours</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Gallery</a></li>
<li class="last_menu"><a href="#">Contact</a></li>
</ul>
Copyright © 2048 <a href="#">Your Company Name</a> | Designed by <a href="http://www.templatemo.com/">Free CSS Templates</a></div>
<!-- end of footer -->
<div class="cleaner"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category