-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
357 lines (334 loc) · 12.1 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
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>XPLORA</title>
<link href="./style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="./img/logoPs.jpg" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
/>
<!-- BOOTSTRAP -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
/>
</head>
<body>
<nav>
<div class="container-nav">
<a class="navBar-logo" href="./index.html"
><img
src="./Imgs/logo.jpg"
alt="Green Modern style leaf"
width="60px"
height="60px"
/>XPLORA</a
>
<button class="nav-button" id="my-button">
<span class="material-symbols-outlined"> Menu </span>
</button>
<div class="navLinks">
<ul class="navBar_nav" id="myLinks">
<li class="nav-item"><a href="./index.html"> Home </a></li>
<li class="nav-item">
<a href="./parks.html"> Parks </a>
</li>
<li class="nav-item">
<a href="./about.html"> About </a>
</li>
<li class="nav-item">
<a href="./contact.html"> Contact </a>
</li>
</ul>
</div>
<div class="search-container">
<form action="/action_page.php">
<input
type="search"
id="site-search"
placeholder="Search in site.."
name="search"
/>
<button type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- SECTION I - CAROUSEL -->
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img
src="./Imgs/home/Yosemite1 (1).jpg"
class="d-block w-100"
alt="Yosemite"
/>
<div class="carousel-caption d-none d-md-block">
<h1>Y O S E M I T E</h1>
</div>
</div>
<div class="carousel-item">
<img
src="./Imgs/home/KhaoSok1.jpg"
class="d-block w-100"
alt="Khao"
/>
<div class="carousel-caption d-none d-md-block">
<h1>K H A O S O K</h1>
</div>
</div>
<div class="carousel-item">
<img
src="./Imgs/home/Plitvice1.jpg"
class="d-block w-100"
alt="Plitvice"
/>
<div class="carousel-caption d-none d-md-block">
<h1>P L I T V I C E</h1>
</div>
</div>
<div class="carousel-item">
<img
src="./Imgs/home/Serengeti1.jpg"
class="d-block w-100"
alt="Serengeti"
/>
<div class="carousel-caption d-none d-md-block">
<h1>S E R E N G E T I</h1>
</div>
</div>
<div class="carousel-item">
<img
src="./Imgs/home/Glacier1.jpg"
class="d-block w-100"
alt="LOS GLACIARES"
/>
<div class="carousel-caption d-none d-md-block">
<h1>G L A C I A R E S</h1>
</div>
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselExample"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#carouselExample"
data-bs-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- SECTION II PARKS AND INFO -->
<div class="homeTitle">
<h2 class="display-5 text-center">Top 5 XPLORA parks</h2>
<p class="fs-2">
Here at XPLORA we like to gather more information on the great parks of
the world and bring help you find your ideal park. In here you can find
out top 5 parks for May 2024
</p>
</div>
<!-- SERENGETI -->
<section
class="container-fluid row mx-0 mt-5 justify-content-center align-items-center"
>
<div class="col-md-6 col-12 m-0 p-0">
<a href="https://www.serengeti.com/"
><img src="./Imgs/home/Serengeti2.jpg" alt="Serengeti" class="w-100"
/></a>
</div>
<div class="col-md-6 col-12 p-5">
<h2 class="display-5"></h2>
<p class="fs-2">
<strong>The Serengeti National Park</strong> is a large national park
in <strong>northern Tanzania</strong> that stretches over 14,763 km2.
The Park had been recognised as a unique ecosystem, providing us with
many insights into how the natural world functions and showing us how
dynamic ecosystems really are.
</p>
<p class="fs-2">
Serengeti has the highest concentration of large mammals on this
planet and its famous known for its 2,500 Lions the largest
concentration found anywhere and the great wildebeest migration.
</p>
</div>
</section>
<!-- KHAO SOK -->
<section
class="container-fluid row mx-0 mt-5 justify-content-center align-items-center"
>
<div class="col-md-6 col-12 m-0 p-0">
<a href="https://www.khaosok.com/">
<img src="./Imgs/home/KhaoSok2.jpg" alt="Khao Sok" class="w-100"
/></a>
</div>
<div class="col-md-6 col-12 p-5">
<h2 class="display-5"></h2>
<p class="fs-2">
A big portion of luck led to
<strong>Khao Sok National Park</strong> being the wonderful place we
can explore today. Had it not been for a deadly epidemic in the 1940s
and communist insurgency groups in the 1970s, there might not be much
virgin forest left in the area by now. But flora and fauna of Khao Sok
were fortunate enough to remain largely untouched, until the region
was finally declared a national park in 1980. Since then a lot of
people in the area have gone to great lengths to protect and care for
the beautiful nature in this part of
<strong>Southern Thailand</strong>.
</p>
</div>
</section>
<!-- GLACIARES -->
<section
class="container-fluid row mx-0 mt-5 justify-content-center align-items-center"
>
<div class="col-md-6 col-12 m-0 p-0">
<a href="https://national-parks.org/argentina/los-glaciares"
><img src="./Imgs/home/glacier2.jpg" alt="Glacieres" class="w-100"
/></a>
</div>
<div class="col-md-6 col-12 p-5">
<h2 class="display-5"></h2>
<p class="fs-2">
<strong>Los Glaciares National Park</strong> is located in the
<strong>Southwest of Santa Cruz Province in the Argentine</strong>
part of Patagonia. Comprised of a National Park and a National Reserve
it has a total surface area of 600,000 hectares. Los Glaciares owes
its name to the numerous glaciers covering roughly half of the World
Heritage property.
</p>
<p class="fs-2">
Many of these glaciers are fed by the massive South Patagonian Ice
Field, the most extensive South American relict of the glaciological
processes of the Quaternary Period. In addition, there are impressive
glaciers independent of the main ice field. The property therefore
constitutes a massive freshwater reservoir.
</p>
</div>
</section>
<!-- YOSEMITE -->
<section
class="container-fluid row mx-0 mt-5 justify-content-center align-items-center"
>
<div class="col-md-6 col-12 m-0 p-0">
<a href="https://www.yosemite.com/"
><img src="./Imgs/home/Yosemite2.jpg" alt="Yosemite" class="w-100"
/></a>
</div>
<div class="col-md-6 col-12 p-5">
<h2 class="display-5"></h2>
<p class="fs-2">
<strong>Yosemite National Park</strong> is located in
<strong>California</strong>. It is bordered on the southeast by Sierra
National Forest and on the northwest by Stanislaus National Forest.
The park covers 759,620 acres in four counties, centered in Tuolumne
and Mariposa, extending north and east to Mono and south to Madera.
</p>
<p class="fs-2">
Designated a World Heritage Site in 1984, Yosemite is internationally
recognized for its granite cliffs, waterfalls, clear streams, giant
sequoia groves, lakes, mountains, meadows, glaciers, and biological
diversity. Almost 95 percent of the park is designated wilderness.
</p>
</div>
</section>
<!-- PLITVICE -->
<section
class="container-fluid row mx-0 mt-5 justify-content-center align-items-center"
>
<div class="col-md-6 col-12 m-0 p-0">
<a href="https://np-plitvicka-jezera.hr/en/"
><img src="./Imgs/home/Plitvice2.jpg" alt=Plitvice" class="w-100"></a
>
</div>
<div class="col-md-6 col-12 p-5">
<h2 class="display-5"></h2>
<p class="fs-2">
<strong>Plitvice Lakes National Park</strong> is situated in the lower
elevations of the Dinarides in the central part of
<strong>Croatia</strong> covering almost 30,000 hectares. Within a
beautiful karst landscape dominated by a mix of forests and meadows,
the magnificent Plitvice lake system stands out, fascinating
scientists and visitors alike.
</p>
<p class="fs-2">
Interconnected by many waterfalls and watercourses above and below
ground, the lakes are grouped into the upper and lower lakes. The lake
system is the result of millennia of ongoing geological and
biochemical processes creating natural dams known as tufa barriers
</p>
</div>
</section>
<!-- FOOTER -->
<div class="footerLogo">
<p class="fs-1 fw-bold">
<img src="./Imgs/logoPs.jpg" alt="logo" />XPLORA
</p>
</div>
<footer>
<div class="container">
<section class="footer">
<div class="footer-column">
<div class="footer-headings">
<a href="./index.html" class="footer-links">
home
</a>
</div>
</div>
<div class="footer-column">
<div class="footer-headings">
<a href="./about.html" class="footer-links">
about
</a>
</div>
</div>
<div class="footer-column">
<div class="footer-headings">
<a href="./contact.html" class="footer-links">
contact
</a>
</div>
</div>
</div>
<!-- ICONS -->
<div class="footer-column">
<div class="icons">
<a href="https://www.facebook.com/">
<i class="bi bi-facebook btn"></i></a>
<a href="https://www.instagram.com/">
<i class="bi bi-instagram btn"></i></a>
</div>
</div>
</section>
</div>
</footer>
<!-- JAVASCRIPT -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
<script src="./script.js"></script>
</body>
</html>