-
Notifications
You must be signed in to change notification settings - Fork 0
/
room-04.html
230 lines (192 loc) · 8.59 KB
/
room-04.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Room 04 - Mayfair suite</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/foundation-icons.css">
</head>
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="mainMenu" data-off-canvas data-position="left">
<h3 class="text-center">Navigation</h3>
<ul class="menu vertical" data-drilldown>
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li class="has-submenu is-drill-down-submenu-parent"><a href="#">Rooms</a>
<ul class="menu vertical">
<li><a href="room-01.html">Room 01</a></li>
<li><a href="room-02.html">Room 02</a></li>
<li><a href="room-03.html">Room 03</a></li>
<li><a href="room-04.html">Room 04</a></li>
<li><a href="room-05.html">Room 05</a></li>
<li><a href="room-06.html">Room 06</a></li>
</ul>
</li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div> <!-- .off-canvas -->
<div class="off-canvas-content" data-off-canvas-content>
<section class="promo-video">
<div id="overlay"></div>
<img src="assets/images/featured/room01.jpg" alt="">
<div class="headliner hide-for-small-only">
<div class="column row">
<h1 class="text-center">Room 04 - Mayfair suite</h1>
</div>
</div> <!-- .headliner -->
<div class="header-content">
<div class="row">
<div class="small-8 medium-4 columns">
<a href="index.html">
<img src="assets/images/logo.svg" alt="Logo">
</a>
</div>
<div class="small-4 medium-4 columns">
<a class="menu-icon float-right" data-open="mainMenu"></a>
</div>
</div>
</div> <!-- .header-content -->
</section>
<div class="row column show-for-small-only">
<h2>Room 04 - Mayfair suite</h2>
</div>
<section class="content">
<div class="row">
<div class="large-6 columns large-centered">
<nav class="roomMenu">
<ul class="menu horizontal expanded" data-magellan>
<li><a href="#room-info">Information</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#booking">Book Now</a></li>
</ul>
</nav>
</div>
</div>
<section id="room-info" data-magellan-target="room-info" class="room-info">
<div class="row">
<div class="large-10 columns large-centered">
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo modi, amet dolore quis minima hic cum perspiciatis aliquam laboriosam qui id reiciendis quod, corporis distinctio eos odit unde dicta in. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad neque incidunt fugit placeat, et quia expedita hic voluptates nostrum sed quidem numquam similique, enim excepturi ipsa eaque maxime tempore iusto.</p>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo modi, amet dolore quis minima hic cum perspiciatis aliquam laboriosam qui id reiciendis quod, corporis distinctio eos odit unde dicta in. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad neque incidunt fugit placeat, et quia expedita hic voluptates nostrum sed quidem numquam similique, enim excepturi ipsa eaque maxime tempore iusto.</p>
</div> <!-- .large-10 -->
</div> <!-- .row -->
</section> <!-- .room-info -->
<section id="gallery" data-magellan-target="gallery" class="gallery bluebg">
<div class="row">
<h2 class="white text-center">Gallery</h2>
<div class="small-up-2 medium-up-4">
<div class="column">
<img src="assets/images/gallery/thumbnail/room01-01.jpg" alt="" class="thumbnail">
</div>
<div class="column">
<img src="assets/images/gallery/thumbnail/room01-02.jpg" alt="" class="thumbnail">
</div>
<div class="column">
<img src="assets/images/gallery/thumbnail/room01-03.jpg" alt="" class="thumbnail">
</div>
<div class="column">
<img src="assets/images/gallery/thumbnail/room01-04.jpg" alt="" class="thumbnail">
</div>
</div>
</div>
</section> <!-- .gallery -->
<!-- SEPARATOR IMAGE -->
<div class="separator-image room01-image"></div>
<!-- BOOKING SECTION -->
<section id="booking" data-magellan-targe="booking" class="booking row">
<div class="large-8 columns small-centered text-center">
<h2>Book Now</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea vitae provident iure assumenda recusandae sapiente labore commodi sed consectetur, praesentium omnis officia veritatis deserunt nemo sint suscipit est? Voluptate, velit.</p>
<a data-open="modalBook" class="button">Book Now</a>
</div>
</section>
<div class="reveal" id="modalBook" data-reveal data-animation-in="scale-in-up" data-animation-out="scale-out-down">
<h2 class="text-center">Booking Form</h2>
<form data-abide novalidate>
<div class="alert callout" style="display: none;" data-abide-error>
<p><i class="fi-alert"></i> There are some problems in your form!</p>
</div>
<div class="row column">
<label for="">Name:
<input type="text" placeholder="Your Name" required>
<span class="form-error">
<i class="fi-alert"></i> The name field is mandatory!!
</span>
</label>
</div>
<div class="row column">
<label for="">Email:
<input type="text" placeholder="Your Email" required pattern="email">
<span class="form-error">
<i class="fi-alert"></i> The email field is mandatory!!
</span>
</label>
</div>
<div class="row column">
<label for="">Phone number:
<input type="text" placeholder="Your phone number" required pattern="number">
<span class="form-error">
<i class="fi-alert"></i> The phone field is mandatory!!
</span>
</label>
</div>
<div class="row column">
<label for="">Message:
<textarea rows="8" placeholder="Your message"></textarea>
</label>
</div>
<div class="row column">
<input type="submit" class="button" value="Submit">
<button class="button success" type="reset" value="Reset"> Reset</button>
</div>
<button class="close-button" data-close aria-label="Close reveal" type="button"><span aria-hidden="true">×</span></button>
</form>
</div>
</section> <!-- .content -->
<!-- FOOTER SECTION -->
<footer>
<div class="row">
<nav class="large-5 columns">
<ul class="vertical menu large-horizontal">
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="rooms.html">Rooms</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</nav>
<div class="contact-information large-3 columns">
<ul class="no-bullet">
<li><i class="fi-marker"></i>842 State Street East New Albany, IN 47150</li>
<li><i class="fi-telephone"></i>+1-202-555-0145</li>
<li><i class="fi-mail"></i>contact@hotel&spa.com</li>
</ul>
</div>
<div class="about-us large-4 columns">
<h4>About Us</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae aliquam mollitia, perferendis recusandae. Necessitatibus minus fugit quas hic? Fuga voluptas, reprehenderit corporis culpa fugit molestias. Et, velit quisquam cupiditate beatae!</p>
<ul class="menu social align-right">
<li>
<a href="http://wwww.twitter.com"><i class="fi-social-twitter"></i></a>
</li>
<li>
<a href="http://wwww.facebook.com"><i class="fi-social-facebook"></i></a>
</li>
</ul>
</div>
</div>
<p class="text-center copyright">All Rights Reserved Hotel & Spa 2015.</p>
</footer>
</div> <!-- .off-canvas-content -->
</div> <!-- .off-canvas-wrapper-inner -->
</div> <!-- .off-canvas-wrapper -->
<script src="js/jquery.min.js"></script>
<script src="js/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>