generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
rooms.html
249 lines (231 loc) · 13.9 KB
/
rooms.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
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!DOCTYPE html>
<html 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">
<meta name="description" content="The Bae Abermaw has a variety of pet friendly rooms both with and without a sea view. All rooms are ensuite.">
<title>Bea Abermaw Hotel | Our Rooms</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon-variables.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">
<script src="https://kit.fontawesome.com/fe7dbc17ad.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Modal for booking -->
<!-- CODE adapted from https://www.gethalfmoon.com/docs/modal/ -->
<div class="modal" id="book_modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<a href="#" class="btn close" role="button" aria-label="Close">
<span class="material-icons" aria-hidden="true">
close
</span>
</a>
<h5 class="modal-title">Search for availability</h5>
<form action="https://formdump.codeinstitute.net" method="POST">
<div class="form-row">
<div class="col-sm">
<label for="checkIn" class="required">Check in</label>
<input type="date" id="checkIn" name="Check In" class="form-control" required>
</div>
<div class="col-sm">
<label for="checkOut" class="required">Check out</label>
<input type="date" id="checkOut" name="Check Out" class="form-control" required>
</div>
</div>
<div class="form-row row-eq-spacing">
<div class="col-sm">
<label for="req" class="required">People and Rooms</label>
<select id="req" class="form-control" name="Requirements" required>
<!-- html valid first select box option
derived from code ref 2. in README -->
<option disabled selected value>-- Select a Room Option --</option>
<option value="2A0C1R">2 Adults, 0 Children, 1 Room</option>
<option value="2A1C1R">2 Adults, 1 Child, 1 Room</option>
<option value="2A2C2R">2 Adults, 2 Children, 2 Rooms</option>
</select>
</div>
</div>
<div class="form-row row-eq-spacing-sm">
<div class="col-sm">
<label for="first-name" class="required">First name</label>
<input type="text" class="form-control" name="Firstname" id="first-name" placeholder="First name" required>
</div>
<div class="col-sm">
<label for="last-name" class="required">Last name</label>
<input type="text" class="form-control" name="lastname" id="last-name" placeholder="Last name" required>
</div>
</div>
<div class="form-row row-eq-spacing-sm">
<div class="col-sm">
<label for="email" class="required">Email Address</label>
<input type="email" class="form-control" name="email" id="email" placeholder="Email" required>
</div>
</div>
<button type="submit" class="btn btn-primary">Book</button>
</form>
</div>
</div>
</div>
<!-- / Modal for booking -->
<!-- Modals for rooms images -->
<!-- Double Sea View room modal -->
<div class="modal" id="dsv_modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content modal-content-media w-full w-md-half">
<a href="#" class="close" role="button" aria-label="Close">
<span class="material-icons" aria-hidden="true">
close
</span>
</a>
<img src="assets/images/double_sea_view_small.png" class="img-fluid img_full" alt="Room with sea view">
<img src="assets/images/ensuite_small.png" class="img-fluid img_full" alt="Ensuite for room with sea view">
</div>
</div>
</div>
<!-- Double Standard room modal -->
<div class="modal" id="ds_modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content modal-content-media w-full w-md-half">
<a href="#" class="close" role="button" aria-label="Close">
<span class="material-icons" aria-hidden="true">
close
</span>
</a>
<img src="assets/images/double_standard_room_small.png" class="img-fluid img_full" alt="Standard double room">
<img src="assets/images/double_standard_ensuite_small.png" class="img-fluid img_full" alt="Ensuite for standard room">
</div>
</div>
</div>
<!-- Family Sea View room modal -->
<div class="modal" id="fsv_modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content modal-content-media w-full w-md-half">
<a href="#" class="close" role="button" aria-label="Close">
<span class="material-icons" aria-hidden="true">
close
</span>
</a>
<img src="assets/images/family_room_sea_view_small.png" class="img-fluid img_full" alt="Family room with a sea view">
<img src="assets/images/family_room_sea_view_ensuite_small.png" class="img-fluid img_full" alt="Ensuite for family room with a sea view">
</div>
</div>
</div>
<!-- / Modals for rooms images -->
<!-- MAIN PAGE -->
<div class="page-wrapper">
<div class="content-wrapper">
<header>
<!-- navigation -->
<nav id="main_nav" class="row">
<a href="index.html" class="col-4 col-md-2"><img src="assets/images/logo.png" alt="Bea Abermaw Hotel" class="logo"></a>
<div class="col-8 col-md-10">
<!-- main navigation for screens up to 768px -->
<div class="row d-lg-none">
<ul class="col-12 navigation">
<li class="nav_item col-6 col-sm-3 col-lg-2"><a href="index.html"><span class="material-icons md-18 d-sm-none d-lg-inline">house</span> Home</a>
</li>
<li class="nav_item col-6 col-sm-3 col-lg-2"><a href="rooms.html"><span class="material-icons md-18 d-sm-none d-lg-inline">hotel</span> Rooms</a>
</li>
<li class="nav_item col-6 col-sm-3 col-lg-2"><a href="about.html"><span class="material-icons md-18 d-sm-none d-lg-inline">groups</span> About</a>
</li>
<li class="nav_item col-6 col-sm-3 col-lg-2"><a href="contact.html"><span class="material-icons md-18 d-sm-none d-lg-inline">forum</span> Contact</a>
</li>
</ul>
</div>
<!-- secondary navigation for screen above 768px -->
<div class="row d-none d-lg-block justify-content-end">
<ul class="navigation_lg col">
<li class="nav_item_lg col-2"><a href="index.html"><span class="material-icons md-18 d-sm-none d-lg-inline">house</span> Home</a></li>
<li class="nav_item_lg col-2"><a href="rooms.html"><span class="material-icons md-18 d-sm-none d-lg-inline">hotel</span> Rooms</a></li>
<li class="nav_item_lg col-2"><a href="about.html"><span class="material-icons md-18 d-sm-none d-lg-inline">groups</span> About</a></li>
<li class="nav_item_lg col-2"><a href="contact.html"><span class="material-icons md-18 d-sm-none d-lg-inline">forum</span> Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>
<!-- BODY SECTION -->
<section>
<h1 class="page_heading">Our Rooms</h1>
<div class="row row-eq-spacing">
<div class="col-12 col-md-6 text-center"> <!-- full width on XS and SM screen, 50% on MD screens and up -->
<div class="content thumbnail_container">
<a href="#dsv_modal"><img src="assets/images/double_sea_view_small.png" class="thumbnail w-full w-md-500" alt="Double room with sea view"></a>
<div class="thumbnail_text">
Click for more...
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card h-full top-auto bottom-auto">
<h2 class="card-title">
Double or Twin - Sea View
</h2>
<p>Enjoy comfort in this room with one super king or two twin beds, coffee and tea making facility, bathroom with a walk-in shower and smart TV. One of our pet-friendly categories.</p>
</div>
</div>
</div> <!-- / Room 1 -->
<div class="row row-eq-spacing">
<div class="col-12 col-md-6">
<div class="card h-full">
<h2 class="card-title">
Double room - Standard
</h2>
<p>Enjoy comfort in this room with one super king, coffee and tea making facility, bathroom with a walk-in shower and smart TV. One of our pet-friendly categories.
</p>
</div>
</div>
<div class="col-12 col-md-6 text-center">
<div class="content thumbnail_container">
<a href="#ds_modal"><img src="assets/images/double_standard_room_small.png" class="thumbnail w-full w-md-500" alt="Standard Double room"></a>
<div class="thumbnail_text">
Click for more...
</div>
</div>
</div>
</div> <!-- / Room 2 -->
<div class="row row-eq-spacing">
<div class="col-12 col-md-6 text-center">
<div class="content thumbnail_container">
<a href="#fsv_modal"><img src="assets/images/family_room_sea_view_small.png" class="thumbnail w-full w-md-500" alt="Family room with sea view"></a>
<div class="thumbnail_text">
Click for more...
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card h-full">
<h2 class="card-title">
Family room-Ensuite-Sea View
</h2>
<p>Discover our sea views in this spacious room with one super king bed, a sofa bed, coffee and tea making facility, bathroom with a walk-in shower and smart TV. One of our pet-friendly rooms.
</p>
</div>
</div>
</div> <!-- / Room 3 -->
</section>
<!-- / BODY SECTION -->
<footer class="bg-secondary">
<div class="row">
<div class="col">
<ul class="footer_nav">
<li class="book"><a href="#book_modal" class="">Book Now</a></li>
<li class="footer_nav_item d-none d-md-inline-block"><a href="rooms.html">Rooms</a></li>
<li class="footer_nav_item d-none d-md-inline-block"><a href="about.html">About</a></li>
<li class="footer_nav_item d-none d-md-inline-block"><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="col-auto footer_social">
<a class="social_link" href="https://facebook.com" target="_blank" rel="noopener noreferrer"><span class="fab fa-facebook"></span><span class="sr-only">Facebook Link</span></a>
<a class="social_link" href="https://twitter.com" target="_blank" rel="noopener noreferrer"><span class="fab fa-twitter"></span><span class="sr-only">Twitter Link</span></a>
<a class="social_link" href="https://instagram.com" target="_blank" rel="noopener noreferrer"><span class="fab fa-instagram"></span><span class="sr-only">Instagram Link</span></a>
</div>
</div>
</footer>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/halfmoon.min.js"></script>
</body>
</html>