hotel-and-travel
<!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>Hotel and Travel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com/
*/
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #e0e0ba;
background: #12110f;
}
a:link, a:visited { color: #ff5400; text-decoration: none; font-weight: normal;}
a:active, a:hover { color: #ff5400; text-decoration: underline;}
.cleaner {
clear: both;
width: 100%;
height: 1px;
font-size: 1px;
}
p {
margin: 0px;
padding: 0px;
}
img {
margin: 0px;
padding: 0px;
border: none;
}
.cleaner_w10 {
float: left;
width: 10px;
height: 100%;
font-size: 1px;
}
.cleaner_h10 {
clear: both;
width: 100%;
height: 10px;
font-size: 1px;
}
.cleaner_h20 {
clear: both;
width: 100%;
height: 20px;
font-size: 1px;
}
.cleaner_h30 {
clear: both;
width: 100%;
height: 30px;
font-size: 1px;
}
.cleaner_h40 {
clear: both;
width: 100%;
height: 40px;
font-size: 1px;
}
.cleaner_horizontal_divider_01 {
clear: both;
width: 100%;
height: 2px;
font-size: 1px;
background: url(hotel-and-travel-images/horizontal_divider_01.jpg) repeat-x;
}
.rc_btn_01 a{
float: left;
clear: both;
display: block;
width: 150px;
padding: 4px 0 5px 0;
text-align: center;
background: url(hotel-and-travel-images/button_01.jpg) no-repeat;
color: #000000;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
.rc_btn_02 a{
float: left;
clear: both;
display: block;
width: 100px;
padding: 4px 0 5px 0;
text-align: center;
background: url(hotel-and-travel-images/button_02.jpg) no-repeat;
color: #000000;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
#container{
width: 960px;
margin: 0 auto;
padding: 0 10px;
}
#header {
width: 940px;
height: 120px;
margin: 0px;
padding: 0px;
font-family: "Times New Roman", Times, serif;
background: url(hotel-and-travel-images/header_bg.jpg) no-repeat;
}
#header #website_title {
width: 360px;
margin-left: 290px;
padding: 45px 0 0 0;
text-align: center;
}
#website_title #title {
font-size: 40px;
color: #f9f886;
margin-bottom: 10px;
}
#website_title #salgon {
clear: both;
font-size: 16px;
color:#FFF;
}
/* banner */
#banner {
clear: both;
width: 940px;
height: 280px;
margin: 0px;
padding: 0px;
background: url(hotel-and-travel-images/banner_bg.jpg) no-repeat;
}
#banner #menu{
float: left;
width: 580px;
height: 50px;
/* background: url(hotel-and-travel-images/menu_bg.png) no-repeat; */
}
#menu ul {
width: 580px;
margin: 15px 0 0 180px;
padding: 0px;
list-style: none;
}
#menu ul li{
display: inline;
}
#menu ul li a{
float: left;
padding: 0 20px;
font-size: 14px;
text-align: center;
text-decoration: none;
background: url(hotel-and-travel-images/menu_divider.gif) top right repeat-y;
color: #FFF;
font-weight: bold;
outline: none;
}
#menu li a:hover, #menu li .current{
color: #eceb81;
}
/* end of menu*/
/* end of banner */
/* content */
#content {
clear: both;
position: relative;
width: 940px;
margin: 0px;
padding: 0px;
background: #3c3936;
}
#content_bottom {
position: absolute;
border: 0;
left: 0;
width: 940px;
height: 20px;
background: url(hotel-and-travel-images/content_bottom.jpg) no-repeat;
}
#content #content_left{
float: left;
width: 345px;
margin: 0px;
padding: 30px 0 0 0;
background: #2f2c29 url(hotel-and-travel-images/left_column_top.jpg) top repeat-x;
}
#content_left .content_title_01 {
font-size: 22px;
color: #eceb81;
padding-bottom: 10px;
margin-bottom: 20px;
background: url(hotel-and-travel-images/horizontal_divider_01.jpg) bottom repeat-x;
}
#content #content_right{
float: right;
width: 565px;
margin: 0px;
padding: 30px 0 0 30px;
background: url(hotel-and-travel-images/content_top.jpg) top repeat-x;
}
#content_right .content_title_01 {
font-size: 22px;
color: #eceb81;
padding-bottom: 10px;
margin-bottom: 20px;
background: url(hotel-and-travel-images/horizontal_divider_02.jpg) bottom repeat-x;
}
#content_left .content_left_section {
padding: 0 30px;
}
.content_left_section p{
text-align: justify;
}
.content_left_section .news_title {
font-size: 14px;
font-weight: bold;
color: #eceb81;
}
.content_left_section form {
margin: 0px;
padding: 0px;
text-align: left;
}
.content_left_section form select {
margin-right: 10px;
}
.content_left_section form label {
display: inline-block;
width: 50px;
margin-right: 5px;
}
.content_left_section form .form_row{
margin-bottom: 20px;
}
.content_left_section .inputfield {
color: #000;
font-variant: normal;
height: 16px;
padding: 2px;
}
#content_right .content_right_section {
margin: 0 30px 0 0;
}
/*
#content_right .content_right_section {
padding: 0 0 15px 0;
margin: 0 30px 15px 0;
background: url(hotel-and-travel-images/horizontal_divider.jpg) bottom repeat-x;
}
*/
.content_right_section img {
float: left;
border: 5px solid #2f2c29;
margin: 3px 20px 0 0;
}
.content_right_section p{
text-align: justify;
padding-bottom: 10px;
}
#content_right .content_right_2column_box {
float: left;
width: 250px;
margin-right: 30px;
}
#content_right .gallery_box {
float: left;
width: 82px;
padding: 5px;
background: #221f1d;
text-align: center;
margin-right: 15px;
}
#content_right .gallery_box:hover {
background: #13110f;
}
.gallery_box a {
color: #FFF;
text-decoration: none;
}
.gallery_box a:hover {
text-decoration: underline;
}
.gallery_box img{
margin: 0 0 5px 0;
border: none;
}
/* footer */
#footer {
clear: both;
width: 940px;
margin-bottom: 10px;
padding: 15px 0 10px 0;
text-align: center;
color: #b0af54;
background: #221f1d url(hotel-and-travel-images/content_bottom.jpg) bottom no-repeat;
}
#footer a{
color: #b0af54;
text-decoration: underline;
font-weight: normal;
}
/* end of footer */
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="website_title">
<div id="title"> Hotel & Travel </div>
<div id="salgon"> The best service at the lowest price</div>
</div>
</div>
<!-- end of header -->
<div id="banner">
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/" class="current">Home</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Bookings</a></li>
<li><a href="http://www.free-css.com/">Locations</a></li>
<li><a href="http://www.free-css.com/">Gallery</a></li>
<li><a href="http://www.free-css.com/" class="last">Contact</a></li>
</ul>
</div>
</div>
<!-- end of banner -->
<div id="content">
<div id="content_left">
<div class="content_left_section">
<div class="content_title_01">Booking</div>
<form method="get" action="http://www.free-css.com/">
<div class="form_row">
<label>Arrival</label>
<select name="day">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name="month">
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>Aug</option>
<option>Sep</option>
<option>Oct</option>
<option>Nov</option>
<option>Dec</option>
</select>
<select name="year">
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
<option>2013</option>
<option>2024</option>
</select>
</div>
<div class="form_row">
<label>Departure</label>
<select name="day">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name="month">
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>Aug</option>
<option>Sep</option>
<option>Oct</option>
<option>Nov</option>
<option>Dec</option>
</select>
<select name="year">
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
<option>2013</option>
<option>2024</option>
</select>
</div>
<div class="form_row">
<label>Persons:</label>
<input class="inputfield" name="person" type="text" style="width: 30px; margin-right: 20px;" />
<label>Rooms:</label>
<input class="inputfield" name="person" type="text" style="width: 30px;" />
</div>
<div class="cleaner_h20"> </div>
<div class="rc_btn_01"><a href="http://www.free-css.com/">Check Availability</a></div>
</form>
<div class="cleaner"> </div>
</div>
<!-- end of booking -->
<div class="cleaner_h30"> </div>
<div class="cleaner_horizontal_divider_01"> </div>
<div class="cleaner_h30"> </div>
<div class="content_left_section">
<div class="content_title_01">Latest News</div>
<div class="news_title">Nam auctor aliquam leo</div>
<p>Pellentesque est elit, sagittis sit amet porttitor ut, ornare vel turpis. Vivamus eu enimvitae neque its posuere rutrum. <a href="http://www.free-css.com/">read more</a></p>
<div class="cleaner_h30"> </div>
<div class="news_title">Suspendisse pharetra eros molestie</div>
<p>Vivamus eu enimvitae neque its posuere rutrum. Nam accumsan turpis at turpis molestie a convallis forte tor ornare. <a href="http://www.free-css.com/">read more</a></p>
<div class="cleaner_h20"> </div>
<div class="rc_btn_02"><a href="http://www.free-css.com/">View All</a></div>
</div>
<!-- end of news section -->
<div class="cleaner_h30"> </div>
<div class="cleaner_horizontal_divider_01"> </div>
<div class="cleaner_h30"> </div>
<a href="http://www.free-css.com/"><img src="hotel-and-travel-images/special_offer.jpg" alt="" /></a>
<div class="cleaner_h30"> </div>
</div>
<!-- end of content left -->
<div id="content_right">
<div class="content_right_section">
<div class="content_title_01">Welcome to hotel & travel</div>
<img src="hotel-and-travel-images/image_01.jpg" alt="" />
<p>This is a free website template provided by TemplateMo.com. You may download, modify and apply this layout for your personal or business websites. Credit goes to photovaco.com for photos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum, urna eu feugiat ultricies, turpis leo tempor lacus, in vestibulum diam nisl sed lorem. </p>
<p>Mauris at tortor non mauris rhoncu vesti bulum. Praesent purus nuncn com modo metus. Mae cen astin cidu tellus et risus com modo lobor tiSed alique.</p>
</div>
<div class="cleaner_h40"> </div>
<div class="content_right_2column_box">
<div class="content_title_01">Tour Guides</div>
<p>Curabitur tempor mattis placerat. Duis malesuada posuere magna at fermentum.</p>
<ul>
<li>Quisque facilisis suscipit elit</li>
<li>Lacus et dictum tristique</li>
<li>Eeros ac tincidunt aliquam</li>
<li>Nullam commodo arcu non facilisis</li>
<li>Duis commodo erat</li>
</ul>
<div class="cleaner_h10"> </div>
<div class="rc_btn_02"><a href="http://www.free-css.com/">View All</a></div>
</div>
<div class="content_right_2column_box">
<div class="content_title_01">Services</div>
<p>Donec eget ligula metus. In sapien nibh, tincidunt non ultricies vel, molestie quis massa. </p>
<ul>
<li>Cras metus lectus</li>
<li>Mauris vitae lacinia tortor</li>
<li>Suspendisse potenti</li>
<li>Pellentesque tincidunt magna</li>
</ul>
<div class="cleaner_h10"> </div>
<div class="rc_btn_02"><a href="http://www.free-css.com/">View All</a></div>
</div>
<div class="cleaner_h40"> </div>
<div class="content_right_section">
<div class="content_title_01">Gallery</div>
<div class="gallery_box"> <img src="hotel-and-travel-images/image_02.jpg" alt="" /> <a href="http://www.free-css.com/">one</a> </div>
<div class="gallery_box"> <img src="hotel-and-travel-images/image_03.jpg" alt="" /> <a href="http://www.free-css.com/">two</a> </div>
<div class="gallery_box"> <img src="hotel-and-travel-images/image_04.jpg" alt="" /> <a href="http://www.free-css.com/">three</a> </div>
<div class="gallery_box"> <img src="hotel-and-travel-images/image_05.jpg" alt="" /> <a href="http://www.free-css.com/">four</a> </div>
<div class="gallery_box"> <img src="hotel-and-travel-images/image_06.jpg" alt="" /> <a href="http://www.free-css.com/">five</a> </div>
<div class="cleaner_h20"> </div>
<div class="rc_btn_02"><a href="http://www.free-css.com/">View All</a></div>
<div class="cleaner"> </div>
</div>
<div class="cleaner_h20"> </div>
</div>
<!-- end of content right -->
<div class="cleaner"> </div>
</div>
<div id="footer"> Copyright © 2024 <a href="http://www.free-css.com/"><strong>Your Company Name</strong></a> | Designed by <a href="http://www.templatemo.com">Free CSS Templates</a>
<div style="clear: both; margin-top: 10px;"> <a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="" width="88" height="31" vspace="8" border="0" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/hotel-and-travel-images/vcss-blue" alt="" vspace="8" border="0" /></a> </div>
</div>
<!-- end of footer -->
</div>
<!-- end of container -->
</body>
</html>
Related examples in the same category