five-star-hotel : Business « Templates « HTML / CSS

five-star-hotel

     

<!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" xml:lang="en" lang="en">
<head>
<title>Five Star Hotel | Booking</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
* { margin:0; padding:0;}
html, body { height:100%;}
body { background:url(five-star-hotel-images/body-bg.gif) center top #37271c; font-family:Tahoma, Geneva, sans-serif; font-size:100%; line-height:1.125em; color:#bca695;}

input, select, textarea { font-family:Tahoma, Geneva, sans-serif; font-size:1em;}

.fleft { float:left;}
.fright { float:right;}
.clear { clear:both;}

.alignright { text-align:right;}
.aligncenter { text-align:center;}

.wrapper { width:100%; overflow:hidden;}
.container { width:100%;}

p { margin-bottom:18px;}

/*forms*/
input, select { vertical-align:middle; font-weight:normal;}
img {border:0; vertical-align:top; text-align:left;}
object { vertical-align:top; outline:none;}

#reservation-form { font-size:.91em; font-weight:bold;}
#reservation-form fieldset { border:none;}
#reservation-form .field { display:block; height:55px;} 
#reservation-form label { display:block; padding-bottom:4px;}
#reservation-form select { border:1px solid #5d3825; background:#1d110b; color:#bca695;}
#reservation-form select.select1 { width:40px; margin-right:10px;}
#reservation-form select.select2 { width:127px;}
#reservation-form input { width:23px; text-align:center; border:1px solid #5d3825; background:#1d110b; color:#bca695;}
#reservation-form .button { font-size:1em;}

/*list*/
ul { list-style:none;}

/*other*/
.img-indent { margin:0 10px 0 -8px; float:left;}
.img-indent.alt { margin-right:25px;}
.img-box { width:100%; overflow:hidden; padding-bottom:20px;}
.img-box img { float:left; margin:0 20px 0 0;}

.extra-wrap { overflow:hidden; }

.p1 { margin-bottom:9px;}
.p2 { margin-bottom:18px;}
.p3 { margin-bottom:27px;}

.alt-top { padding-top:9px;}

/*txt, links, lines, titles*/
a {color:#bca695; outline:none;}
a:hover{text-decoration:none;}

h1 { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:60px; line-height:1em; color:#c30000; text-transform:uppercase; font-weight:normal; letter-spacing:-2px;}
h1 a { color:#c30000; text-decoration:none;}
h2 { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#c30000; font-size:30px; line-height:1em; font-weight:normal; margin-bottom:12px; letter-spacing:-1px;}
h3 { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#c30000; font-size:25px; line-height:1em; font-weight:normal; margin-bottom:16px;}
h4 { font-size:.91em;}
h5 { font-size:1.33em; color:#c30000; padding-top:10px; margin-bottom:26px;}
h6 { font-size:1em; color:#e7e7e7;}

.txt1 { font-size:.91em;}
.txt2 { color:#c30000; font-size:1.33em; text-transform:uppercase;}

.link1 { display:block; float:left; background:url(five-star-hotel-images/link1-bgd.gif) left top repeat-x; color:#fff; text-decoration:none;}
.link1 em { display:block; background:url(five-star-hotel-images/link1-left.gif) no-repeat left top;}
.link1 b { display:block; background:url(five-star-hotel-images/link1-right.gif) no-repeat right top; padding:2px 15px 2px 15px; font-weight:normal; font-style:normal;}
.link1:hover { text-decoration:underline;}

.button { text-align:center; font-size:.91em;}
.button span { display:inline-block; background:url(five-star-hotel-images/button-side.gif) no-repeat left top; padding-left:1px;}
.button span span { background:url(five-star-hotel-images/button-side.gif) no-repeat right top; padding-right:1px; padding-left:0;}
.button span span a { display:inline-block; background:url(five-star-hotel-images/button-bg.gif) left top repeat-x; padding:0 0 3px 0; color:#d5c6bb; width:152px; text-decoration:none; text-transform:uppercase; font-weight:bold;}
.button span span a:hover { text-decoration:underline;}

.button1 { text-align:center; font-size:.91em;}
.button1 span { display:inline-block; background:url(five-star-hotel-images/button-side.gif) no-repeat left top; padding-left:1px;}
.button1 span span { background:url(five-star-hotel-images/button-side.gif) no-repeat right top; padding-right:1px; padding-left:0;}
.button1 span span a { display:inline-block; background:url(five-star-hotel-images/button-bg.gif) left top repeat-x; padding:0 20px 3px 20px; color:#d5c6bb; text-decoration:none; text-transform:uppercase; font-weight:bold;}
.button1 span span a:hover { text-decoration:underline;}

.line-hor { background:#4d3525; height:1px; overflow:hidden; font-size:0; line-height:0; margin:21px 0 16px 0;}
.line-ver { background-image:url(five-star-hotel-images/line-ver.gif); background-repeat:repeat-y; width:100%;}

.title { margin-bottom:20px;}

/*boxes*/
.box { background:#1d110b; width:100%;}
.box .inner { padding:21px 30px 30px 28px;}

.dept-list { float:left;}
.dept-list dd { clear:both; text-align:right;}
.dept-list dd span { float:left; padding-right:25px;}
.dept-list dd p { text-align:left;}


/*header*/
#header .row-1 { height:136px; }
#header .row-2 { height:390px; background:url(five-star-hotel-images/header-bg.png) no-repeat left bottom;}
#header .row-2.alt { height:278px; background:url(five-star-hotel-images/header-bg1.png) no-repeat left bottom; width:100%; padding:0; margin:0;}
#header .row-2 .indent { padding:13px 0 0 13px;}

#header .logo { float:left; padding:40px 0 0 45px;}
#header .logo em { position:absolute; top:25px; text-transform:uppercase; font-style:normal; font-size:16px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; padding-left:5px;}
#header .logo strong { color:#ad0000; font-size:.91em; padding-left:5px;}
#header .phones { float:right; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:25px; line-height:1em; color:#c30000; padding:43px 48px 0 0; letter-spacing:-1px;}

.header-box { background:url(five-star-hotel-images/header-bg1.jpg) no-repeat left top; width:950px; height:364px;}
.header-box .inner { padding:307px 0 0 2px;}

.header-box-small { background:url(five-star-hotel-images/header-bg-small.jpg) no-repeat left top; width:950px; height:252px; }
.header-box-small .inner { padding:195px 0 0 2px;}

#header .nav { width:100%; overflow:hidden;}
#header .nav li { display:inline;}
#header .nav li a { display:block; float:left; width:156px; height:55px; line-height:52px; font-size:16px; text-transform:uppercase; font-weight:bold; color:#fff; text-decoration:none; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; text-align:center; margin-right:2px; background:url(five-star-hotel-images/nav-bg1.png) no-repeat left top;}
#header .nav li a:hover { background:url(five-star-hotel-images/nav-bg2.png) no-repeat left top;}
#header .nav li a.current { background:url(five-star-hotel-images/nav-bg2.png) no-repeat left top;}

/*content*/
#content { background:url(five-star-hotel-images/content-bg.png) left top; margin:0 8px;  padding:11px 40px 20px 40px;}
#content .indent { padding:17px 0 20px 0;}

#content ul { padding-bottom:20px;}
#content ul li { background:url(five-star-hotel-images/bull1.gif) no-repeat left 8px; padding:0 0 0 13px;}

.contacts-list dt { font-weight:bold; margin-bottom:10px;}
.contacts-list dd { font-weight:bold;}

#content .gallery { width:100%; }
#content .gallery ul { overflow:hidden; margin:-7px -40px -11px -32px; position:relative;}
#content .gallery ul li { background:url(five-star-hotel-images/img-wrapper.png) no-repeat left top; width:155px; height:110px; padding:0; float:left; margin-right:3px;}
#content .gallery ul li img {margin:13px 0 0 11px;}

#content .gallery-images { width:100%;}
#content .gallery-images ul {overflow:hidden; margin:0 -32px -14px 0; position:relative; padding-bottom:0;}
#content .gallery-images ul li { float:left; padding:0 0 14px 0; background:none; margin-right:16px;}

#content .img-list li { width:100%; overflow:hidden; background:none; padding:0 0 18px 0;}
#content .img-list li img { float:left; margin:6px 9px 0 0;}

.extra-img { position:relative; margin:0 -9px 0 -8px;}

.gallery-main { background:url(five-star-hotel-images/gallery-wrapper.png) no-repeat left top; width:607px; height:433px; margin:0 -10px 0 -6px; position:relative;}
.gallery-main .inner { padding:12px 0 0 12px;}
.gallery-main .prev { position:absolute; left:11px; top:12px;}
.gallery-main .next { position:absolute; right:11px; top:12px;}

.list1 { font-size:.91em; padding:4px 0 15px 0;}
.list1 dt { font-weight:bold; color:#e3dad2; margin-bottom:12px; padding:0 0 0 4px;}
.list1 dd { border-bottom:1px solid #57473c; padding:0 5px 7px 4px; margin-bottom:4px; line-height:1.45em;}
.list1 dd span { float:right;}
.list1 dd.alt { border-bottom:none;}
.list1 dd.last { font-weight:bold; color:#c30000; border-bottom:none;}

#content .list2 { padding-bottom:8px;}
#content .list2 li { font-size:.91em; padding-bottom:8px;}

#content .list3 li a { text-decoration:none;}
#content .list3 li a:hover { text-decoration:underline;}

#content .list4 li { width:100%; overflow:hidden; padding:0; background:none; font-size:.91em; padding-bottom:15px;}
#content .list4 li img { float:left; margin:0 13px 0 0;}

#content .aside ul { font-size:.91em;}

/*footer*/
#footer { font-family:Arial, Helvetica, sans-serif; padding:28px 40px 35px 40px;}
#footer a { color:#e3dad2;}
#footer .nav { text-align:center; padding-bottom:25px;}
#footer .nav li { display:inline;}
#footer .nav li a { padding:0 48px 0 45px; color:#e3dad2;}

/**/

</style>


<link href="layout.css" rel="stylesheet" type="text/css" />
<script src="maxheight.js" type="text/javascript"></script>
<!--[if lt IE 7]>
<link href="ie_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="ie_png.js"></script>
<script type="text/javascript">ie_png.fix('.png, #header .row-2, #header .nav li a, #content, .gallery li');</script>
<![endif]-->
</head>
<body id="page5" onload="new ElementMaxHeight();">
<div id="main">
  <!-- header -->
  <div id="header">
    <div class="row-1">
      <div class="wrapper">
        <div class="logo">
          <h1><a href="#">Five Star</a></h1>
          <em>Hotel</em> <strong>True Luxury</strong> </div>
        <div class="phones"> 1-800-412-45-56<br />
          1-800-542-64-48 </div>
      </div>
    </div>
    <div class="row-2">
      <div class="indent">
        <!-- header-box begin -->
        <div class="header-box">
          <div class="inner">
            <ul class="nav">
              <li><a href="index.html">Home page</a></li>
              <li><a href="services.html">Services</a></li>
              <li><a href="gallery.html">Gallery</a></li>
              <li><a href="restaurant.html">Restaurant</a></li>
              <li><a href="testimonials.html">Testimonials</a></li>
              <li><a href="booking.html" class="current">Booking</a></li>
            </ul>
          </div>
        </div>
        <!-- header-box end -->
      </div>
    </div>
  </div>
  <!-- content -->
  <div id="content">
    <div class="wrapper">
      <div class="aside maxheight">
        <!-- box begin -->
        <div class="box maxheight">
          <div class="inner">
            <h3>Reservation:</h3>
            <form action="#" id="reservation-form">
              <fieldset>
                <div class="field">
                  <label>Check In:</label>
                  <select class="select1">
                    <option>30</option>
                  </select>
                  <select class="select2">
                    <option>April 2009</option>
                  </select>
                </div>
                <div class="field">
                  <label>Check Out:</label>
                  <select class="select1">
                    <option>01</option>
                  </select>
                  <select class="select2">
                    <option>May 2009</option>
                  </select>
                </div>
                <div class="field"> Persons: &nbsp;
                  <input type="text" value="1"/>
                  &nbsp; &nbsp; &nbsp; &nbsp; Rooms:&nbsp;
                  <input type="text" value="1"/>
                </div>
                <div class="button"><span><span><a href="#">Check Availability</a></span></span></div>
              </fieldset>
            </form>
          </div>
        </div>
        <!-- box end -->
      </div>
      <div class="content">
        <div class="indent">
          <h2>Our location</h2>
          <img class="img-indent png" alt="" src="five-star-hotel-images/5page-img1.png" />
          <div class="extra-wrap">
            <p class="alt-top">Our hotel is located in the most spectacular part of Prague - surrounded by boutiques, restaurants and luxurious shops.</p>
            <p>Please feel free to come visit us at the following adress:</p>
            <dl class="contacts-list">
              <dt>Gazek st., 210</dt>
              <dd>1-800-412-4556</dd>
              <dd>1-800-542-6448</dd>
            </dl>
          </div>
          <div class="clear"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- footer -->
  <div id="footer">
    <ul class="nav">
      <li><a href="#">Home</a>|</li>
      <li><a href="#">Services</a>|</li>
      <li><a href="#">Gallery</a>|</li>
      <li><a href="#">Restaurant</a>|</li>
      <li><a href="#">Testimonials</a>|</li>
      <li><a href="#">Booking</a></li>
    </ul>
    <div class="wrapper">
      <div class="fleft">Copyright &copy; 2009 <a href="#">Name Here</a>. All Rights Reserved</div>
      <div class="fright">Designed by TemplateMonster - <a href="http://www.templatemonster.com/">website templates</a> provider</div>
    </div>
  </div>
</div>
</body>
</html>

Related examples in the same category

1.	metamorph_disco
2.	businesdesign2007
3.	businesportal
4.	business template
5.	business web design
6.	business web template 38
7.	business-1
8.	business-2
9.	business-box
10.	business-center
11.	business-co
12.	business-company
13.	business-consultants
14.	Business-Design
15.	business-elegance
16.	business-llc
17.	business-online
18.	business-solution
19.	business-strategy
20.	business-time
21.	business-way
22.	business-world
23.	businessblog
24.	businessdesign
25.	businesshighway
26.	businesslike
27.	BusinessName
28.	BusinessSolution
29.	businesssolutions01
30.	businesstheme
31.	businessweb
32.	Business_Elegance
33.	business_events
34.	business_maritime
35.	busineswebdesign
36.	CarCar
37.	car-club
38.	car-dealer
39.	cars-website
40.	bloodybusiness
41.	Bloody_Business
42.	biz-company
43.	biz-solution
44.	biz-watch
45.	bizbox
46.	bizgroup
47.	metamorph_autosalon
48.	metamorph_business
49.	metamorph_casino
50.	alouette-agency
51.	advertising
52.	financial-services
53.	financial-website
54.	metamorph_advice
55.	bloom
56.	blooming
57.	clubcard
58.	clubhouse
59.	bed-and-breakfast
60.	construction-company
61.	construction-group
62.	constructional-company
63.	consulting-services
64.	Consulting
65.	corporate-2.0
66.	corporate-blue
67.	corporate
68.	CorporateBlack
69.	corporateblue
70.	CorporateBlue2
71.	corporategreen
72.	CorporateGrey
73.	corporateluxe
74.	corporateprofiles
75.	CorporateRedGrey
76.	Corporate_Design
77.	corporation-ltd
78.	design-company
79.	metamorph_shopping
80.	metamorph_spasaloon
81.	metamorph_restaurant
82.	metamorph_photostudio
83.	abc-company
84.	ad-agency
85.	foo_shooting_club
86.	firming
87.	financialco
88.	abstract-studio
89.	carpet-cleaning
90.	architect-company
91.	architect-group
92.	architect
93.	architectural-company
94.	architectural-group
95.	architecture-bureau
96.	architecture
97.	computer-business
98.	computer-store
99.	djclub
100.	dally_studio
101.	future-business
102.	global-business
103.	global-hosting
104.	global
105.	globalhouse
106.	globalpress
107.	enterprise
108.	corpplus
109.	corpwire-magazine
110.	funkycorporate
111.	simply_business
112.	Small_Corporation
113.	your-business
114.	voip-company
115.	economics
116.	educational-site
117.	ec-mania
118.	furniture-collections
119.	mobileshop
120.	political-party
121.	pizza-factory
122.	pizzaparlor
123.	plainoffice
124.	plantshop
125.	play-school
126.	office
127.	online-casino
128.	online-radio
129.	online_education
130.	outsource-inc
131.	software-co
132.	software-company
133.	simplyBusiness
134.	smallstudio
135.	small-corporation
136.	rainbow_consultant
137.	Professional
138.	professional-web2
139.	premium-business
140.	premiumtemplateshop
141.	radio-station
142.	real-estate-agency
143.	real-estate-co
144.	real-estate
145.	realestate-company
146.	realestate
147.	sample-resume
148.	sample_business_site
149.	resume
150.	shop-around
151.	shop-online
152.	social-community-management
153.	workshyfop
154.	workspacer
155.	whirlpool
156.	WebStore
157.	weblogo
158.	strategicbusinessdesigns
159.	thebluecompany
160.	thebookstore
161.	TheCorporation
162.	total_management
163.	thepinkcompany
164.	theme-marketplace
165.	transportcompany
166.	internetmarket
167.	internetjobs
168.	market-leader
169.	Market
170.	marketing-company
171.	lawyer-and-attorney
172.	lawyer-marketing
173.	Job-Portal
174.	happy-print-shop
175.	health-care
176.	inbusiness
177.	industrial-company
178.	industrial-construction
179.	industrial
180.	industry
181.	internethosting
182.	internetservices
183.	luxury-hotel
184.	luxury-restaurant
185.	military-school
186.	headquarters
187.	hosting-co
188.	incorporated
189.	interior-design
190.	internetcorporation
191.	internetmanagement
192.	internet-studio
193.	TWO COLUMN CSS BUSINESS WEBSITE TEMPLATE
194.	Business template 2