-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
499 lines (463 loc) · 22.8 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
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ZooTopia - Discover the Wonders of Wildlife</title>
<meta name="title" content="Explore ZooTopia: Home to Incredible Animals and Conservation Efforts" />
<meta name="description" content="Visit ZooTopia for an unforgettable journey through diverse habitats. Discover exotic animals, participate in exciting events, and learn about wildlife conservation!" />
<meta name="keywords" content="Zoo, Wildlife, Animals, Conservation, Family Fun, Educational Experiences, Events, ZooTopia" />
<!-- Open Graph Data -->
<meta property="og:title" content="Explore ZooTopia: Home to Incredible Animals and Conservation Efforts" />
<meta property="og:description" content="Visit ZooTopia for an unforgettable journey through diverse habitats. Discover exotic animals, participate in exciting events, and learn about wildlife conservation!" />
<meta property="og:image" content="https://irtiza90.github.io/ZooTopia/images/8.jpg">
<meta property="og:url" content="https://irtiza90.github.io/ZooTopia" />
<meta property="og:type" content="website" />
<!-- Twitter Card Data -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Explore ZooTopia: Home to Incredible Animals and Conservation Efforts" />
<meta name="twitter:description" content="Visit ZooTopia for an unforgettable journey through diverse habitats. Discover exotic animals, participate in exciting events, and learn about wildlife conservation!" />
<meta name="twitter:image" content="https://irtiza90.github.io/ZooTopia/images/8.jpg">
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Zoo",
"name": "ZooTopia",
"url": "https://irtiza90.github.io",
"logo": "https://irtiza90.github.io/ZooTopia/images/bird-logo.png",
"image": "https://irtiza90.github.io/ZooTopia/images/8.jpg",
"description": "Visit ZooTopia for an unforgettable journey through diverse habitats. Discover exotic animals, participate in exciting events, and learn about wildlife conservation!",
}
</script>
<link rel="shortcut icon" href="./images/bird-logo.png" type="image/x-png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/site.css">
<link rel="stylesheet" href="./css/nav.css">
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/slider.css">
<link rel="stylesheet" href="./css/img-modal.css">
<link rel="stylesheet" href="./css/timings.css">
<link rel="stylesheet" href="./css/pricing.css">
<link rel="stylesheet" href="./css/payment-form.css">
<link rel="stylesheet" href="./css/gallery.css">
</head>
<body data-loading="true">
<span class="loader"></span>
<header>
<div class="topnav" id="myTopnav">
<a href="./index.html" class="site-icon">
<img src="./images/bird-logo.png">
</a>
<a href="./index.html" class="active">Home</a>
<div class="dropdown">
<button class="dropbtn">Categories</button>
<div class="dropdown-content">
<a href="./category/land.html">Terrestial</a>
<a href="./category/aquatic.html">Aquatic</a>
<a href="./category/aerial.html">Aerial</a>
</div>
</div>
<a href="./about.html">About</a>
<a href="./events.html">Events</a>
<a href="javascript:void(0);" class="icon">
<i class="fa fa-bars"></i>
</a>
<a class="active get-ticket-btn" href="./checkout.html">Get Ticket <i style="margin-left: 4px;" class="fa-solid fa-arrow-right"></i></a>
</div>
<!-- Top Navigation Menu -->
<div class="topnav-mobile">
<a href="./index.html" style="width: 50px; height: 50px; padding: 0; background: none !important;">
<img src="./images/bird-logo.png" loading="lazy" style="width: 50px;height: 50px;float: left;object-fit: contain;">
</a>
<div id="myLinks">
<a href="./index.html">Home</a>
<a href="./events.html">Events</a>
<a href="./about.html">About</a>
<a class="active" href="./checkout.html" style="
padding: 2rem;
text-align: end;
padding-right: 50px;
background: #008000a1;
">Get Ticket <i style="margin-left: 4px;" class="fa-solid fa-arrow-right"></i></a>
</div>
<a href="javascript:void(0);" class="icon" onclick="mobileMenu()">
<i class="fa fa-bars"></i>
</a>
</div>
</header>
<main>
<section id="slider">
<div id="bannerSlider" class="carousel slide" data-bs-ride="false">
<!-- <div class="carousel-indicators">
<button type="button" data-bs-target="#bannerSlider" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#bannerSlider" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#bannerSlider" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div> -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./images/banner/1.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Welcome to ZooTopia</h5>
<p>A World of Wildlife Awaits!</p>
</div>
</div>
<div class="carousel-item">
<img src="./images/banner/2.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Explore the Majestic Animals</h5>
<p>From the king of the jungle to the graceful creatures of the sky, our zoo is home to a variety of extraordinary animals.</p>
</div>
</div>
<div class="carousel-item">
<img src="./images/banner/3.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Join Us for Exciting Events!</h5>
<p>Don't miss out on our special events! From educational programs to family fun days, there’s something for everyone.</p>
</div>
</div>
<div class="carousel-item">
<img src="./images/events/1.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Upcoming Event</h5>
<p>Tropical Rainforest Exploration</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#bannerSlider" 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="#bannerSlider" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<section id="gallery">
<!-- Header -->
<div class="header">
<h1>Animal gallery</h1>
</div>
<div id="img-gallery-modal" class="modal" style="display: none;">
<span class="close">×</span>
<img class="modal-content" src="">
<div id="caption">
<!-- filled by javascirpt -->
</div>
</div>
<div class="row">
<div class="column">
<div class="container img-modal">
<img src="./images/3.jpg" alt="Avatar" class="image" style="width: 100%" />
<div class="overlay">
<div class="text">African lion</div>
</div>
<div class="modal-overlay d-none">
<p>Scientific Name: Panthera leo</p> <p>Sleeping Hours: 16-20 hours per day</p> <p>Meal Hours: Lions usually hunt early in the morning or late in the evening. In the zoo, they are fed once a day, often in the early afternoon.</p> <p>Description: Known as the "king of the jungle," African lions are social felines that live in prides. Their majestic manes and powerful roars make them a highlight of any zoo.</p>
</div>
</div>
<div class="container img-modal">
<img src="./images/8.jpg" alt="Avatar" class="image" style="width: 100%" />
<div class="overlay">
<div class="text">Giraffe</div>
</div>
<div class="modal-overlay d-none">
<p>Scientific Name: Giraffa camelopardalis</p> <p>Sleeping Hours: 4-6 hours per day</p> <p>Meal Hours: Giraffes graze throughout the day, with peak feeding times in the morning and late afternoon. They primarily eat leaves from acacia trees.</p> <p>Description: With their long necks and legs, giraffes are the tallest land animals. Their unique patterns and graceful movements make them a favorite among zoo visitors.</p>
</div>
</div>
<div class="container img-modal">
<img src="./images/5.jpg" alt="Avatar" class="image" style="width: 100%; height: 29.4rem;" />
<div class="overlay">
<div class="text">Zebra</div>
</div>
<div class="modal-overlay d-none">
<p>Scientific Name: Equus zebra</p> <p>Sleeping Hours: 12-16 hours per day</p> <p>Meal Hours: Zebras are primarily grazers, feeding during the day and night. They mainly eat grass and leaves, with peak feeding times in the morning and late afternoon.</p> <p>Description: Known for their distinctive black-and-white stripes, zebras are social animals that live in herds. They are native to Africa and are closely related to horses and donkeys.</p>
</div>
</div>
</div>
<div class="column">
<div class="container img-modal">
<img src="./images/22.jpg" alt="Avatar" class="image" style="width: 100%; height: 550px;" />
<div class="overlay">
<div class="text">Meerkat</div>
</div>
<div class="modal-overlay d-none">
<p>Scientific Name: Suricata suricatta</p> <p>Sleeping Hours: 10-12 hours per day</p> <p>Meal Hours: Meerkats are most active in the morning and late afternoon. They forage for insects, plants, and small animals.</p> <p>Description: Social and highly energetic, meerkats live in groups called mobs. Their upright stance and playful behavior make them engaging to watch.</p>
</div>
</div>
<div class="container img-modal">
<img src="./images/25.jpg" alt="Avatar" class="image" style="width: 100%" />
<div class="overlay">
<div class="text">American Alligator</div>
</div>
<div class="modal-overlay d-none">
<p>Scientific Name: Alligator mississippiensis</p> <p>Sleeping Hours: 12-14 hours per day</p> <p>Meal Hours: Alligators typically hunt in the early morning and late evening. In captivity, they are fed every 2-3 days.</p> <p>Description: These large reptiles are native to the southeastern United States. They are known for their powerful jaws and distinctive bumpy skin.</p>
</div>
</div>
<div class="container img-modal">
<img src="./images/20.jpg" alt="Avatar" class="image" style="width: 100%" />
<div class="overlay">
<div class="text">Hippopotamus</div>
</div>
<div class="modal-overlay d-none">
<p>Scientific Name: Hippopotamus amphibius</p> <p>Sleeping Hours: 16-20 hours per day</p> <p>Meal Hours: Hippos are primarily nocturnal feeders, grazing on grass in the evening and early morning. They are fed a variety of vegetation in captivity, often in the early afternoon.</p> <p>Description: Hippos are massive semi-aquatic mammals with a large, barrel-shaped body. They spend most of their time in water to keep cool and protect their skin from the sun.</p>
</div>
</div>
<div class="container img-modal">
<img src="./images/31.jpg" alt="Avatar" class="image" style="width: 100%" />
<div class="overlay">
<div class="text">Red Panda</div>
</div>
<div class="modal-overlay d-none">
<p>Scientific Name: Ailurus fulgens</p> <p>Sleeping Hours: 12-16 hours per day</p> <p>Meal Hours: Red pandas are most active in the early morning and late afternoon. They eat bamboo, fruits, and small animals.</p> <p>Description: Despite their name, red pandas are not closely related to giant pandas. They are smaller, with reddish-brown fur and a bushy tail.</p>
</div>
</div>
</div>
<div class="column">
<div class="container img-modal">
<img src="./images/12.jpg" alt="Avatar" class="image" style="width: 100%; height: 33.4rem;" />
<div class="overlay">
<div class="text">African Elephant</div>
</div>
<div class="modal-overlay d-none">
<p>Scientific Name: Elephas maximus</p> <p>Sleeping Hours: 4-6 hours per day</p> <p>Meal Hours: Elephants eat throughout the day, with peak feeding times in the morning and late afternoon. They consume a variety of vegetation, including grass, fruit, and bark.</p> <p>Description: These large, intelligent mammals are known for their impressive trunks and tusks. Asian elephants are smaller than their African counterparts and have distinctive smaller ears.</p>
</div>
</div>
<div class="container img-modal">
<img src="./images/1.jpg" alt="Avatar" class="image" style="width: 100%" />
<div class="overlay">
<div class="text">Wolf</div>
</div>
<div class="modal-overlay d-none">
<p>Scientific Name: Canis lupus</p> <p>Sleeping Hours: 8-12 hours per day</p> <p>Meal Hours: Wolves are primarily nocturnal and often hunt in packs during the evening and early morning. They can go several days without eating between hunts.</p> <p>Description: Wolves are highly social animals that live in packs, known for their complex social structures and vocalizations. They are found in a variety of habitats across North America, Europe, and Asia.</p>
</div>
</div>
<div class="container img-modal">
<img src="./images/34.jpg" alt="Avatar" class="image" style="width: 100%" />
<div class="overlay">
<div class="text">Tiger</div>
</div>
<div class="modal-overlay d-none">
<p>Scientific Name: Panthera tigris</p> <p>Sleeping Hours: 16-20 hours per day</p> <p>Meal Hours: Tigers are primarily nocturnal hunters, usually active at night. In captivity, they are typically fed once or twice a day.</p> <p>Description: Tigers are the largest wild cats and are known for their powerful build and striking orange and black stripes. They are solitary animals and primarily found in Asia.</p>
</div>
</div>
<div class="container img-modal">
<img src="./images/17.jpg" alt="Avatar" class="image" style="width: 100%" />
<div class="overlay">
<div class="text">Giant Panda</div>
</div>
<div class="modal-overlay d-none">
<p>Scientific Name: Ailuropoda melanoleuca</p> <p>Sleeping Hours: 10-16 hours per day</p> <p>Meal Hours: Pandas eat most frequently in the morning and late afternoon. Their diet is primarily bamboo, but they may also eat fruits and small amounts of meat.</p> <p>Description: Native to China, giant pandas are beloved for their black-and-white fur and gentle demeanor. They spend much of their time eating and sleeping.</p>
</div>
</div>
</div>
</div>
</section>
<section id="timings" class="container my-5 px-md-5 pb-4">
<h2>Time Table</h2>
<table>
<tr>
<th>DAY</th>
<th>Time</th>
</tr>
<tr>
<td>Monday</td>
<td>9am-6pm</td>
</tr>
<tr>
<td>Tuesday</td>
<td>9am-6pm</td>
</tr>
<tr>
<td>Wednesday</td>
<td>9am-6pm</td>
</tr>
<tr>
<td>Thursday</td>
<td>9am-6pm</td>
</tr>
<tr>
<td>Friday</td>
<td>9am-6pm</td>
</tr>
<tr>
<td>Saturday</td>
<td>9am-9pm</td>
</tr>
<tr>
<td>Sunday</td>
<td>9am-9pm</td>
</tr>
</table>
</section>
<section id="pricing" class="pricing">
<div class="pricing-card price-table-1">
<div class="pricing-card-price">
<h1>$15</h1>
<small>/mo</small>
</div>
<div class="shadow-container">
<div class="pricing-card-header">
<div class="pricing-title">
<h1>Basic</h1>
<!-- <p>Lorem ipsum dolor sit</p> -->
</div>
</div>
</div>
<div class="pricing-card-body">
<div class="pricing-body-title">
<h2>Featues</h2>
<!-- <p>Lorem ipsum dolor sit amet.</p> -->
</div>
<ul class="pricing-card-list">
<li class="pricing-card-list-item">
<i class="fas fa-check"></i>
<span>Access to all animal exhibits</span>
</li>
<li class="pricing-card-list-item">
<i class="fas fa-check"></i>
<span>One free train ride per visit</span>
</li>
<li class="pricing-card-list-item">
<i class="fas fa-check"></i>
<span>Monthly newsletter with updates</span>
</li>
<li class="pricing-card-list-item">
<i class="fas fa-check"></i>
<span>10% discount on gift shop purchases</span>
</li>
<li class="pricing-card-list-item">
<i class="fas fa-check"></i>
<span>Access to public feeding times</span>
</li>
</ul>
</div>
<!-- <button class="pricing-card-button">order now</button> -->
</div>
<div class="pricing-card price-table-2">
<div class="pricing-card-price">
<h1>$99</h1>
<small>/mo</small>
</div>
<div class="shadow-container">
<div class="pricing-card-header">
<div class="pricing-title">
<h1>VIP Bundle</h1>
<!-- <p>Lorem ipsum dolor sit</p> -->
</div>
</div>
</div>
<div class="pricing-card-body">
<div class="pricing-body-title">
<h2>Features</h2>
<!-- <p>Lorem ipsum dolor sit amet.</p> -->
</div>
<ul class="pricing-card-list">
<li class="pricing-card-list-item">
<i class="fas fa-check"></i>
<span>All benefits from the Family Bundle</span>
</li>
<li class="pricing-card-list-item">
<i class="fas fa-check"></i>
<span>Exclusive early access to new exhibits</span>
</li>
<li class="pricing-card-list-item">
<i class="fas fa-check"></i>
<span>20% discount on gift shop purchases</span>
</li>
<li class="pricing-card-list-item">
<i class="fas fa-check"></i>
<span>Priority seating at special events</span>
</li>
<li class="pricing-card-list-item">
<i class="fas fa-check"></i>
<span>Access to VIP lounge</span>
</li>
</ul>
</div>
<!-- <button class="pricing-card-button">order now</button> -->
</div>
<div class="pricing-card price-table-3">
<div class="pricing-card-price">
<h1>$40</h1>
<small>/mo</small>
</div>
<div class="shadow-container">
<div class="pricing-card-header">
<div class="pricing-title">
<h1>Family Bundle</h1>
<!-- <p>Lorem ipsum dolor sit</p> -->
</div>
</div>
</div>
<div class="pricing-card-body">
<div class="pricing-body-title">
<h2>Features</h2>
<!-- <p>Lorem ipsum dolor sit amet.</p> -->
</div>
<ul class="pricing-card-list">
<li class="pricing-card-list-item">
<i class="fas fa-check"></i>
<span>Access to all animal exhibits</span>
</li>
<li class="pricing-card-list-item">
<i class="fas fa-check"></i>
<span>Unlimited train rides</span>
</li>
<li class="pricing-card-list-item">
<i class="fas fa-check"></i>
<span>Monthly newsletter with updates</span>
</li>
<li class="pricing-card-list-item">
<i class="fas fa-check"></i>
<span>15% discount on gift shop purchases</span>
</li>
<li class="pricing-card-list-item">
<i class="fas fa-check"></i>
<span>Access to public feeding times</span>
</li>
<li class="pricing-card-list-item">
<i class="fas fa-check"></i>
<span>Free entry for two children</span>
</li>
</ul>
</div>
<!-- <button class="pricing-card-button">order now</button> -->
</div>
</section>
</main>
<!-- FOOTER start -->
<footer>
<div class="footer-container">
<div class="social-icons">
<a href="https://facebook.com"><i class="fa-brands fa-facebook"></i></a>
<a href="https://instagram.com"><i class="fa-brands fa-instagram"></i></a>
<a href="https://x.com"><i class="fa-brands fa-twitter"></i></a>
<a href="https://youtube.com"><i class="fa-brands fa-youtube"></i></a>
</div>
<div class="footernav">
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./events.html">Events</a></li>
<li><a href="./contact.html">Contact Us</a></li>
<li><a href="./sitemap.html">Sitemap</a></li>
</ul>
</div>
</div>
<div class="footerbottom">
<p class="mb-0">
Copyright © 2024, Designed by
<span class="designer">PR-2024-04F</span>
</p>
</div>
</footer>
<!-- FOOTER /end -->
<script src="./bootstrap/js/bootstrap.bundle.js"></script>
<script src="./js/nav.js"></script>
<script src="./js/gallery.js"></script>
<script>
document.body.setAttribute('data-loading', false);
</script>
</body>
</html>