-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
259 lines (215 loc) · 8.9 KB
/
index.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
250
251
252
253
254
255
256
257
258
259
<!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" />
<title>Safari Retreat</title>
<!--meta tags for search engines results-->
<meta name="description"
content="Safari Retreat, Safari, Retreat, Resort in Africa, Safari in Africa" />
<meta name="keywords" content="safari, resort, retreat, africa, savannah, adventures, relax, food, animals" />
<!-- link to favicon.io -->
<link
rel="apple-touch-icon"
sizes="180x180"
href="assets/favicon.ico/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="assets/favicon.ico/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="assets/favicon.ico/favicon-16x16.png"
/>
<link rel="manifest" href="assets/favicon.ico/site.webmanifest" />
<!-- link to css file -->
<link rel="stylesheet" href="assets/css/style.css" />
<!-- link to kit from Font Awesome -->
<script
src="https://kit.fontawesome.com/114b037aa4.js"
crossorigin="anonymous"
></script>
</head>
<body>
<!-- header -->
<header id="header">
<h1 id="header-text"><a href="index.html">safari retreat</a></h1>
<!--makes the navmenu toggle-->
<input type="checkbox" id="checkbox-navmenu" name="checkbox-navmenu" />
<!--bars icon for the checkbox-->
<label for="checkbox-navmenu" id="label-checkbox"
><i class="fa-solid fa-bars" style="color: white"></i
></label>
<nav class="hidden-navmenu">
<ul id="nav-menu">
<li id="nav-home"><a href="index.html" class="active">Home</a></li>
<li><a href="safari-gallery.html">Safari gallery</a></li>
<li><a href="booking-page.html">Booking page</a></li>
<li><a href="contact-us.html">Contact us</a></li>
</ul>
</nav>
</header>
<!-- main content -->
<main>
<!-- hero section -->
<!--hero slide-->
<div class="hero-slides">
<div class="slide slide-1">
<img src="assets/images/hero-image-1.webp" alt="two cheetahs sitting next to eachother in the savannah">
</div>
<div class="slide slide-2">
<img src="assets/images/hero-image-5.webp" alt="lion laying down">
</div>
<div class="slide slide-3">
<img src="assets/images/hero-image-3.webp" alt="family of three elephants walking in the grass">
</div>
<div id="hero-div-bg">
<p>
<strong>
Join our safaris to see <br />
these beautiful animals!
</strong>
</p>
</div>
</div>
<!-- info section -->
<section id="info">
<h2>safari adventures awaits</h2>
<div>
<p>
Are you looking for some adventures? Do you want to be able to relax
and enjoy delicious food? Search no more! Safari Retreat got it all. Go on exciting safaris during the day and
enjoy our delicoius dinner and pool area during the night.
</p>
</div>
</section>
<div id="body-margin">
<!-- Retreat section -->
<section id="retreat">
<h3>retreat <i class="fa-solid fa-people-roof"></i></h3>
<hr/>
<!--retreat text-->
<div class="div-center">
<p>
Do you want to wake up to the sunrise and see over all of the
savannah while you enjoy your breakfast at the porch? Book your stay now here with us at the
Safari Retreat! We got complete packages where you can choose
from a big menu of different foods and activities.
</p>
<!--retreat images-->
<div id="retreat-images" >
<div id="retreat-images-column1">
<div class="retreat-image" >
<img
src="assets/images/retreatimage1.webp"
alt="man and woman sitting by a pool smiling"
/>
</div>
<div class="retreat-image" >
<img
src="assets/images/retreatimage2.webp"
alt="man and woman standing in bathroom shavings the mans face"
/>
</div>
<div class="retreat-image">
<img src="assets/images/retreatimage3.webp"
alt="man and woman holding hands at the porch looking out at the savannah" />
</div>
</div>
<p>
Join us on our safaris, take a nap in the glorius sun, join a class of yoga, relax in our new spa section or take a
swim in one of our five different pools. Every hotel room also got its own private pool and porch.
If you want to join the safari speak to the reception at the day
of your arrival and select which day that fits you best.
</p>
<div id="retreat-images-column2">
<div class="retreat-image">
<img
src="assets/images/retreatimage4.webp"
alt="chef preparing food on plates made by wood"
/>
</div>
<div class="retreat-image">
<img src="assets/images/retreatimage5.webp"
alt="a waitress holding two plates of delicious food"/>
</div>
</div>
</div>
<p>Breakfast, lunch and dinner are
included in the price. You can choose from different menus. We got meat, fish, vegetarian and vegan food. If you are allergic you can speak to the reception and they will contact the kitchen with all the details they need to prepare your food correct.
Take your chance to a once in a lifetime experience and
<strong><a href="booking-page.html">book</a></strong> your stay
with us now.
</p>
</div>
</section>
<!-- safari section -->
<section id="safari">
<h3>safari <i class="fa-solid fa-paw"></i></h3>
<hr/>
<div id="safari-text-and-video">
<p>
Are you ready to see the big cats up close and personal? Maybe
even pet one? Or get the chance to ride an elephant? Get ready for a once in a lifetime experience and see the big 5 in their natural habitat. Book your stay with us now to ensure your place in the safari
adventures. To see more pictures from the
safaris press
<strong><a href="safari-gallery.html">here</a></strong>.
</p>
<!--Safari video section-->
<iframe id="safari-video" width="560" height="315" src="https://www.youtube.com/embed/Y5_6LALJ_mc?si=_ZcJjLuP1gJdRKgQ"
title="YouTube video player"
allow="accelerometer; control; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<p>Do you only want to enjoy the safari without staying over
night?
No worries!
<strong><a href="contact-us.html">Contact us</a></strong> and we
will help you with your booking.
</p>
</div>
</section>
</div>
</main>
<!-- footer -->
<footer id="footer">
<hr />
<!-- copied this code below from Love Running project for the social media links: URL: https://github.com/Code-Institute-Solutions/Love-Running-Solutions.git -->
<ul id="social-networks">
<li id="follow-us">Follow us</li>
<li>
<a
href="https://www.facebook.com/"
target="_blank"
rel="noopener"
aria-label="Visit our Facebook page (opens in a new tab)"
><i class="fa-brands fa-square-facebook"></i
></a>
</li>
<li>
<a
href="https://www.instagram.com/"
target="_blank"
rel="noopener"
aria-label="Visit our Instagram page (opens in a new tab)"
><i class="fa-brands fa-square-instagram"></i
></a>
</li>
<li>
<a
href="https://www.twitter.com/"
target="_blank"
rel="noopener"
aria-label="Visit our Twitter page (opens in a new tab)"
><i class="fa-brands fa-square-twitter"></i
></a>
</li>
</ul>
</footer>
</body>
</html>