-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
384 lines (348 loc) · 23.2 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
<!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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@100;200;300;400;700&family=Noto+Emoji&family=Poppins:wght@100;300;500&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="common.css">
<link rel="icon" href="icons/turtleicon.ico" type="image/x-icon">
<title>turtletopia</title>
<script type="module" src="assets/js/header.js" defer></script>
</head>
<body>
<!-- navigation bar section -->
<header id="header" class="scrolled">
<input type="checkbox" id="menu-bar">
<label for="menu-bar">Menu</label>
<nav class="nav-bar" id="nav-menu">
<ul class="nav-bar-items">
<li><a id="nav-a" class="active" href="index.html">Home</a></li>
<li><a href="categories.html">Turtles</a></li>
<li><a href="threats.html">Threats</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="hikkaduwa.html">Hikkaduwa</a></li>
<li>
<a href="#">Other Hatcheries</a>
<ul class="nav-bar-items-2">
<li><a href="kosgoda.html">Kosgoda</a></li>
<li><a href="bentota.html">Bentota</a></li>
</ul>
</li>
<li><a href="donate.html">Donate</a></li>
</ul>
</nav>
</header>
<!-- main viewport section -->
<div class="main-viewport">
<div class="main-viewport-images">
<div>
<img class="main-viewport-image" src="images/david-troeger-9XzyEzPAHMI-unsplash.jpg" alt=""></div>
</div>
<div class="main-viewport-header">
<div class="main-viewport-header-text">
<span>Dive in</span>
<br>
<h2>Turtletopia</h2>
</div>
<!-- onclick property directs the viewport to the section in the value -->
<button class="scroll-btn" onclick="location.href='#first-section'">
<img src="icons/angle-down_teel.svg" alt="">
</button>
</div>
</div>
<!-- first main section -->
<section id="first-section" class="introduction">
<div class="introduction-main">
<div class="introduction-main-header"> <!-- header was here -->
<section class="introduction-main-header-title">
<h1>What is a turtle hatchery?</h1>
<hr>
<h2>About</h2>
<br>
</section>
<section class="introduction-main-header-text">
<p>A turtle hatchery is a protected area where sea turtles can safely lay their eggs and where the hatched baby turtles
can crawl out into the ocean. These hatcheries play a crucial role in the conservation of sea turtles, as they help
to increase the survival rates of turtle hatchlings and protect them from predators, poachers, and other dangers. In
addition, hatcheries provide an opportunity for scientists and conservationists to study turtle populations and
develop strategies for their conservation.
</p><br>
<p>Turtle hatcheries are particularly important in areas where sea turtle populations are declining due to habitat
destruction, pollution, climate change, and other human-related factors. By providing a safe environment for turtle
eggs to hatch and baby turtles to grow, hatcheries help to maintain and restore turtle populations. However,
hatcheries are not a long-term solution to the problem of declining turtle populations, as they do not address the
root causes of the problem. Therefore, hatcheries must be complemented with efforts to address the threats facing
turtle populations, such as habitat protection, pollution reduction, and sustainable fishing practices.
</p>
</section>
</div>
</div>
</section>
<!-- second main section -->
<section class="second-section">
<div class="second-section-container">
<h2>Sri Lankan Marine Turtles</h2>
<hr>
<p>Sri Lanka is home to five different species of sea turtles, all of which can be found in various locations along the
country's coastline. Here is some brief information regarding each of the species:</p>
<div class="second-section-list">
<ul>
<li class="second-section-list-item">
<span class="second-section-list-item-title">Green Sea Turtle :</span>These turtles are the most commonly seen
species in Sri Lanka and can be found all along the
coastline, from Kalpitiya in the northwest to Rekawa in the south. They are known to nest on beaches such as
Kosgoda,
Habaraduwa, and Galle.
</li>
<li class="second-section-list-item">
<span class="second-section-list-item-title">Leatherback Turtle :</span>While leatherbacks are not as
common as other species, they can still be found in Sri Lanka.
These turtles are known to nest on a few select beaches in the country, including Dondra Head, Welipatanvila,
and
Polhena.
</li>
<li class="second-section-list-item">
<span class="second-section-list-item-title">Olive Ridley Turtle :</span>These turtles are found along the
eastern and southern coastlines of Sri Lanka. They are known
to nest on beaches such as Pottuvil Point, Panama, and Bundala National Park.
</li>
<li class="second-section-list-item">
<span class="second-section-list-item-title">Loggerhead Turtle :</span>Loggerheads are a rare sight in Sri
Lanka and are only occasionally spotted along the southern
coast. They are known to nest on a few select beaches, including Rekawa and Panama.
</li>
<li class="second-section-list-item">
<span class="second-section-list-item-title">Hawksbill Turtle :</span>These turtles are also a rare sight
in Sri Lanka, but they can be found along the country's
southwestern coast. They are known to nest on beaches such as Koggala, Welipatanvila, and Rekawa.
</li>
</ul>
</div>
</div>
</section>
<!-- third main section -->
<section class="third-section">
<div class="third-section-header">
<h2>The turtle gallery</h2>
<hr>
</div>
<div class="third-section-long-item">
<img class="thumbnail-long" src="images/Green Sea.jpg" alt="">
<div>
<span class="third-section-text">Green Sea Turtle</span>
</div>
</div>
<div class="third-section-container">
<div class="third-section-item">
<img class="thumbnail" src="images/Hawksbill Turtle.jpg" alt="">
<div>
<span class="third-section-text">Hawksbill</span>
</div>
</div>
<div class="third-section-item">
<img class="thumbnail" src="images/Leatherback.jpg" alt="">
<div>
<span class="third-section-text">Leatherback</span>
</div>
</div>
<div class="third-section-item">
<img class="thumbnail" src="images/Olive-Ridley.jpg" alt="">
<div>
<span class="third-section-text">Olive Ridley</span>
</div>
</div>
<div class="third-section-item">
<img class="thumbnail" src="images/Loggerhead Turtle.jpg" alt="">
<div>
<span class="third-section-text">Loggerhead</span>
</div>
</div>
</div>
<div>
<button class="introduction-main-header-button">
<span>
Explore the gallery
</span>
</button>
</div>
</section>
<!-- fourth main section -->
<section class="fourth-section">
<div class="fourth-section-container">
<video autoplay loop>
<source src="videos/2kqwed.mp4" type="video/mp4">
</video>
</div>
</section>
<!-- fifth main section -->
<section class="fifth-section">
<div class="fifth-section-container">
<div class="fifth-section-header">
<h2>Hikkaduwa</h2>
<h2>Marine Turtle Conservation and Rescue Center</h2>
<hr>
</div>
<div>
<p>The Sea Turtle Hatchery and Rescue Centre is located north of Hikkaduwa, a few kilometers away from the town's main area. Its goal is to preserve endangered turtle species, and it is one among several hatcheries on the southern coast of the island. Initially launched as a community initiative to safeguard the region's biodiversity, it has developed into a complete hatchery and rescue center, where teams work tirelessly day and night to analyze, nurture and shield multiple species of turtles.</p><br>
<!-- <p>It takes care of five different turtle species, namely Olive Ridley, Leatherback, Loggerhead, Hawksbill, and Green Turtles. The centre has modern facilities including water tanks to care for the newborn turtles and adult species that have been rescued due to injuries. Visitors can observe the unique sight of turtle egg-laying, with the eggs carefully placed in neat sand mounds. The centre closely monitors each of these mounds to track the hatching process of the turtle eggs.
</p> -->
</div>
</div>
</section>
<!-- sixth main section -->
<section class="sixth-section">
<div class="sixth-section-container">
<img src="images/naail-hussain-KkEbJTIQi_Q-unsplash.jpg" alt="">
</div>
</section>
<!-- seventh main section -->
<!-- <section class="seventh-section">
<div class="seventh-section-header">
<div class="seventh-section-header-title">
<h2>Turtle hatcheries in sri lanka</h2>
<hr>
</div>
<div>
<p>Sri Lanka is home to three well-known turtle hatcheries that attract tourists: <strong>Hikkaduwa, Kosgoda, and Bentota</strong>
<br>
<br>
<p>Thesehatcheries work to protect and conserve sea turtles, which are endangered due to habitat loss and poaching.
At these hatcheries, visitors can learn about the different species of turtles, see the eggs and hatchlings, and
even participate in the release of baby turtles into the ocean.</p>
</div>
</div>
<div class="seventh-section-slide-wrapper">
<div class="seventh-section-slider">
<img id="seventh-section-slide-1" src="images/kosgoda2.jpg" alt="an image of hikkaduwa hatchery">
<img id="seventh-section-slide-2" src="images/hikkaduwa2.jpg" alt="an image of kosgoda hatchery">
<img id="seventh-section-slide-3" src="images/bentota3.jpg" alt="an image of bentota hatchery">
</div>
<div class="seventh-section-slider-nav">
<a href="#seventh-section-slide-1"></a>
<a href="#seventh-section-slide-2"></a>
<a href="#seventh-section-slide-3"></a>
</div>
</div>
</section> -->
<!-- eighth main section -->
<section class="eighth-section">
<div class="eighth-section-header">
<div class="eighth-section-header-title">
<h2>Why do we need to protect turtles?</h2>
<hr>
</div>
<div>
<p class="eighth-section-paragraph-1">Protecting sea turtles is crucial because they play a vital role in the marine ecosystem. These gentle creatures help
maintain healthy seagrass beds and coral reefs by grazing on the plants that grow there, which creates space for new
growth. Additionally, sea turtles serve as a food source for many predators, helping to balance the ocean's food chain.
Sadly, many turtle populations are threatened by human activities such as poaching, habitat destruction, and pollution.
</p><br>
<ol>
<li>Sea turtles help maintain healthy marine ecosystems</li>
<li>They serve as food for predators, balancing the food chain</li>
<li>Many turtle populations are threatened by human activities</li>
</ol>
<br>
<p class="eighth-section-paragraph-2">
Hatcheries play an important role in turtle conservation efforts by providing a safe place for turtle eggs to hatch and
young turtles to grow before being released into the wild. Hatcheries protect the eggs from natural predators and human
activities, which can damage or destroy nests. By incubating the eggs and keeping the hatchlings safe during the
vulnerable early stages of their lives, hatcheries help to increase the survival rates of turtle populations.
</p><br>
<ul>
<li>Hatcheries provide a safe place for turtle eggs to hatch and grow</li>
<li>They protect eggs from natural predators and human activities</li>
<li>Hatcheries increase the survival rates of turtle populations</li>
</ul>
</div>
</div>
<div>
<button class="button-for-all">
<a href="threats.html">
<span>
See more
</span>
</a>
</button>
</div>
</section>
<!-- footer section -->
<footer>
<div class="footer-main">
<div class="footer-container">
<div class="footer-logo">
<h1><span class="span-1">Turtle</span><span class="span-2">topia</span></h1>
</div>
<div class="footer-middle">
<div class="footer-list">
<ul>
<h4>Pages</h4>
<li><a href="#">Home</a></li>
<li><a href="donate.html">Donate</a></li>
</ul>
</div>
<div class="footer-list">
<ul>
<h4>Turtles</h4>
<li><a href="categories.html">Categories</a></li>
<li><a href="threats.html">Threats</a></li>
<li><a href="gallery.html">Gallery</a></li>
</ul>
</div>
<div class="footer-list">
<ul>
<h4>Socials</h4>
<li><a href="https://www.facebook.com/">Facebook</a></li>
<li><a href="https://www.instagram.com/">Instagram</a></li>
<li><a href="https://twitter.com/">Twitter</a></li>
<li><a href="https://vimeo.com/">Vimeo</a></li>
</ul>
</div>
</div>
<div class="card">
<a href="https://www.instagram.com/" class="socialContainer containerOne">
<svg class="socialSvg instagramSvg" viewBox="0 0 16 16"> <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"></path> </svg>
</a>
<a href="https://twitter.com/" class="socialContainer containerTwo">
<svg class="socialSvg twitterSvg" viewBox="0 0 16 16"> <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path> </svg>
</a>
<a href="https://linkedin.com/" class="socialContainer containerThree">
<svg class="socialSvg linkdinSvg" viewBox="0 0 448 512"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path></svg>
</a>
<a href="https://web.whatsapp.com/" class="socialContainer containerFour">
<svg class="socialSvg whatsappSvg" viewBox="0 0 16 16"> <path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"></path> </svg>
</a>
</div>
<!-- <div class="footer-social-container">
<div class="footer-social-list">
<a href="https://www.facebook.com/"><img src="icons/facebook.svg" alt=""></a>
<a href="https://www.instagram.com/"><img src="icons/instagram.svg" alt=""></a>
<a href="https://twitter.com/"><img src="icons/twitter.svg" alt=""></a>
<a href="https://vimeo.com/"><img src="icons/vimeo-v.svg" alt=""></a>
</div>
</div> -->
</div>
<div class="footer-base">
<span>© 2023 Turtletopia.com All Rights Reserved</span>
</div>
</div>
<!-- **references**
Abeywickrama, D. and Abeywickrama, D. (2020) “Hikkaduwa Beach | Attractions in Hikkaduwa | Love Sri Lanka,” Love Sri Lanka -, 4 August. Available at: https://www.lovesrilanka.org/hikkaduwa-beach/.
Tripadvisor (no date) Tripadvisor: Over a billion reviews & contributions for Hotels, Attractions, Restaurants, and more. Available at: https://www.tripadvisor.com/.
DID YOU KNOW THAT FIVE OF THE SEVEN SPECIES OF SEA TURTLES IN THE WORLD VISIT THE SHORES OF SRI LANKA TO BREED? (no date). Available at: https://www.srilanka-botschaft.de/current-news/do-you-know-that-five-of-the-seven-species-of-seaturtles-in-the-world-visit-the-shores-of-sri-lanka-to-breed.
Threats to Turtles — The State of the World’s Sea Turtles | SWOT (no date). Available at: https://www.seaturtlestatus.org/threats-to-turtles.
Rainforest Trust (2023) Côte d’Ivoire’s First Marine Protected Area – Rainforest Trust. Available at: https://www.rainforesttrust.org/urgent-projects/creating-cote-divoires-first-marine-protected-area-2/.
Sea Save (2022) “Ocean Week in Review | Sea Save,” Sea Save [Preprint]. Available at: https://seasave.org/week-in-review/.
{{::og.title}} (no date). Available at: https://www.thisiswhyimbroke.com/turtle-gifts/.
Turtle Gifts - Etsy Singapore (no date). Available at: https://www.etsy.com/sg-en/market/turtle_gifts.
36 Flipping Cool Turtle Gifts (2022). Available at: https://printedmemories.com/blogs/guides/turtle-gifts.
Amazon.com. Spend less. Smile more. (no date). Available at: https://www.amazon.com/.
Pexels (no date) Free Stock Photos, Royalty Free Stock Images & Copyright Free Pictures · Pexels. Available at: https://www.pexels.com/.
Unsplash (no date) Beautiful Free Images & Pictures | Unsplash. Available at: https://unsplash.com/. -->
</footer>
</body>
</html>