generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
about.html
247 lines (226 loc) · 15.3 KB
/
about.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
<!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 hotel is a detached Victorian property overlooking Barmouth Bay convenitently located for access to Snowdonia National Park.">
<title>Bea Abermaw Hotel | About Us</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">
<link rel="stylesheet" href="assets/css/slideshow.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 -->
<div class="page-wrapper">
<div class="content-wrapper">
<header>
<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>
<section>
<h1 class="page_heading">About us and our beautiful area</h1>
<div class="w-full w-md-three-quarter about_container">
<div class="card">
<h2 class="card-title">Bae Abermaw Hotel</h2>
<p>The Bae Abermaw is an elegant detached Victorian property affording spectacular views over
the mouth of the Mawddach estuary and Barmouth bay. A stone building decorated in a light,
airy style, the fourteen bed hotel offers a relaxing, modern atmosphere for couples, friends
and families. The hotel is fully licensed with drinks available in the lounge bar and
gardens, where you can take in the beautiful views of the surrounding area.</p>
<p>All the bedrooms have en-suite bathrooms as well as tea and coffee facilities, complimentary
toiletries, hairdryers and smart TV. Breakfast is a full Welsh breakfast, with vegetarian
and gluten-free options available, along with fruits, yoghurts, cereals and pastries. Pets
are allowed in our double standard and family rooms with a £10/night charge for extra
cleaning, providing they're well behaved.</p>
<p>Barmouth is situated on the west coast of North Wales, on the edge of the Snowdonia National
Park, which is the largest National Park in Wales. Barmouth itself lies between a mountain
range and the Irish sea on the mouth of the river Mawddach. The road between Barmouth and
Dolgellau offers amazing views of the estuary, it’s worth a stop to take a look at the
breathtaking views. There also some spectacular walks higher in the hills if you have a
little more time to explore, a camera is essential as the views are astounding. Barmouth is
the perfect destination for vintage seaside holidays, walking & outdoor activity breaks, or
fresh air getaways at any time of year.</p>
</div>
</div>
<!-- W3C Slideshow https://www.w3schools.com/howto/howto_js_slideshow.asp-->
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 6</div>
<img src="assets/images/bay_img_1.jpg" alt="Picture of an expansive beach" style="width:100%">
<div class="text">Expansive Beach</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 6</div>
<img src="assets/images/bay_img_2.jpg" alt="Picture of views over the bae abermaw" style="width:100%">
<div class="text">Amazing Views</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 6</div>
<img src="assets/images/bay_img_3.jpg" alt="Picture of bae abermaw" style="width:100%">
<div class="text">Beautiful Bay</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 6</div>
<img src="assets/images/bay_img_4.jpg" alt="Picture of the local welsh landscape" style="width:100%">
<div class="text">Fantastic Welsh Landscape</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 6</div>
<img src="assets/images/bay_img_5.jpg" alt="Picture of people fishing in the bay" style="width:100%">
<div class="text">Fishing Opportunities</div>
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 6</div>
<img src="assets/images/the_bay.jpg" alt="Picture of several boats at low tide" style="width:100%">
<div class="text">An active boating community</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
<span class="dot" onclick="currentSlide(6)"></span>
</div>
<!-- / W3C Slideshow -->
<div class="w-full w-md-three-quarter about_container">
<div class="card">
<h2 class="card-title">Location</h2>
<p>Situated in the beautiful seaside town of Barmouth, on the West Coast of Wales Our hotel
offers a gateway to the majestic mountains of Snowdonia, and there are many more activities
in and around Barmouth for the family to enjoy. We have a beautiful outdoor bar overlooking
the estuary with a spectacular view. Which you can enjoy with a glass of wine from a
carefully chosen selection.
</p>
<p>Don't let the steep hill to the Hotel put you off, that's how we get our view!
</p>
</div>
</div>
<div class="w-full w-md-three-quarter about_container">
<div class="card">
<h2 class="card-title">Local Interest</h2>
<p>The Mawddach trail leads across the bridge and into Dolgellau, a small town on the edge of
Snowdonia National Park, across the estuary is the famous Blue Lake, which offers amazing
views of the Mawddach estuary and the Irish sea. The area is well known for cycling and the
Coed y Brenin visitor centre where cycle trails are available for the whole family, no
matter what your abilities are.Cader Idris is one of the highest southern mountains in
Snowdonia and can be climbed easily in a day.
</p>
</div>
</div>
</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>
<script src="assets/js/slideshow.js"></script>
</body>
</html>