-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
259 lines (231 loc) · 10.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata for character set and viewport -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Stylesheets -->
<link rel="stylesheet" href="CSS/style.css" />
<link rel="stylesheet" href="CSS/index-style.css" />
<link rel="stylesheet" href="CSS/animations.css" />
<link rel="stylesheet" href="CSS/newsletter-style.css" />
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="IMAGES/navfooter-images/mainicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="FAVICON_ICONS/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="FAVICON_ICONS/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="FAVICON_ICONS/favicon-16x16.png">
<link rel="manifest" href="FAVICON_ICONS/site.webmanifest">
<link rel="mask-icon" href="FAVICON_ICONS/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#ffffff">
<!-- Page title -->
<title>Wildlife Sri Lanka | Home</title>
</head>
<script src="//unpkg.com/alpinejs" defer></script>
<body x-data="body">
<!-- Navigation Section -->
<nav class="navbar">
<!-- Logo link -->
<a href="index.html"><img src="IMAGES/navfooter-images/logo.webp" class="logo" alt="logo" /></a>
<!-- Navigation Links -->
<ul class="nav-links">
<!-- Home link -->
<li><a href="index.html" class="active">Home</a></li>
<!-- Introduction link -->
<li><a href="introduction.html">Introduction</a></li>
<!-- About DWC link -->
<li><a href="department.html">About DWC</a></li>
<!-- Animals dropdown -->
<li>
<a href="#">Animals</a>
<ul class="sub-menu">
<!-- Sri Lankan Leopard link -->
<li><a href="leopard.html">Sri Lankan Leopard</a></li>
<!-- Animal Gallery link -->
<li><a href="animalgallery.html">Animal in Sri Lanka</a></li>
</ul>
</li>
<!-- Parks dropdown -->
<li>
<a href="#">Parks</a>
<ul class="sub-menu">
<!-- Wilpattu National Park link -->
<li><a href="wilpattu.html">Wilpattu National Park</a></li>
<!-- Yala National Park link -->
<li><a href="yaala.html">Yala National Park</a></li>
<!-- Kumana National Park link -->
<li><a href="kumana.html">Kumana National Park</a></li>
</ul>
</li>
<!-- Events link -->
<li><a href="events.html">Events</a></li>
<!-- Contact Us link -->
<li><a href="login.html" class="ctn">Login</a></li>
</ul>
<!-- Menu button for mobile -->
<img src="IMAGES/navfooter-images/menu-btn.webp" class="menu-btn" />
</nav>
<!-- Main Content Section -->
<main>
<!-- Header Section -->
<header id="home-header">
<!-- Header content with welcome message -->
<section class="header-content">
<h2 class="shadow" id="indexSubtitle" x-text="indexSubtitle" contenteditable="true"></h2>
<aside class="line"></aside>
<h1 class="shadow" id="indexTitle" x-text="indexTitle" contenteditable="true"></h1>
<a href="#home-sec1" class="ctn">Scroll</a>
</section>
</header>
<!-- Events Section -->
<section class="events">
<!-- Title for upcoming wildlife expeditions -->
<section class="title" id="home-sec1">
<h1 id="eventsTitle" x-text="eventsTitle" contenteditable="true"></h1>
<aside class="line"></aside>
</section>
<!-- Event details with images and descriptions -->
<section class="row">
<section class="col">
<img src="IMAGES/homepage-images/expeditions.webp" alt="an image of a yala safari trip"
class="event-images" />
<h4 id="wilpattuTitle" x-text="wilpattuTitle" contenteditable="true"></h4>
<p class="txt-center" id="wilpattuText" x-text="wilpattuText" contenteditable="true">
</p>
<a href="events.html#main" class="ctn">Learn More</a>
</section>
<section class="col">
<img src="IMAGES/homepage-images/birdwatching.webp" alt="an image of people bird Watching"
class="event-images" />
<h4 id="kumanaTitle" x-text="kumanaTitle" contenteditable="true"></h4>
<p class="txt-center" id="kumanaText" x-text="kumanaText" contenteditable="true">
</p>
<a href="events.html#main" class="ctn">Learn More</a>
</section>
</section>
</section>
<!-- Conservation Section -->
<section class="conserve" id="home-sec2">
<!-- Conservation content with title and description -->
<section class="conserve-content">
<h1 class="shadow" id="wondersTitle" x-text="wondersTitle" contenteditable="true"></h1>
<aside class="line"></aside>
<p id="wondersText" x-text="wondersText" contenteditable="true">
</p>
<a href="introduction.html#intro-sec1" class="ctn">Explore !</a>
</section>
</section>
<!-- Tours Section -->
<section class="tours">
<section class="row">
<section class="col content-col">
<!-- Title for upcoming wildlife conservations -->
<h1 id="conserveTitle" x-text="conserveTitle" contenteditable="true"></h1>
<aside class="line"></aside>
<p id="conserveText" x-text="conserveText" contenteditable="true">
<ol class="home-list">
<h3>Why Join with Us?</h3>
<li>Embark on a thrilling safari in the heart of the savannah.</li>
<ul>
<li>Experience the thrill of tracking wild predators.</li>
<li>Learn about the unique ecosystem of the savannah.</li>
</ul>
</li>
<li>Observe majestic elephants in their natural habitat.</li>
<ul>
<li>Witness family interactions among elephant herds.</li>
<li>Understand the importance of elephant conservation efforts.</li>
</ul>
</li>
</ol>
</p>
<a href="events.html#content-4" class="ctn">Learn More</a>
</section>
<section class="image-col">
<!-- Image gallery for conservation projects -->
<section class="image-gallery">
<img src="IMAGES/homepage-images/img1.webp" alt="an image of feeding an elephant" />
<img src="IMAGES/homepage-images/img2.webp" alt="an image of treating a injured dog" />
<img src="IMAGES/homepage-images/img3.webp" alt="an image of treating a injured baby deer" />
<img src="IMAGES/homepage-images/img4.webp" alt="an image of treating a electrified owl" />
</section>
</section>
</section>
</section>
</main>
<!-- Go to top button -->
<section id="gotopbtn">
<a href="#"><img src="IMAGES/navfooter-images/arrowhead-up.webp" alt="go to top button" /></a>
</section>
<!-- Footer Section -->
<footer>
<!-- Footer container with sections for contact, quick links, and social media -->
<section class="footer-container">
<section class="footer-section">
<h4>Contact</h4>
<p class="footer-para">
Email: contact@slwildlife.com<br />Phone: 077-177-7788
</p>
</section>
<section class="footer-section">
<h4>Quick Links</h4>
<!-- Quick links to various pages -->
<a href="index.html" class="quick-links">Home</a>
<a href="introduction.html" class="quick-links">Introduction</a>
<a href="department.html" class="quick-links">About Us</a>
<a href="leopard.html" class="quick-links">Sri Lankan Leopard</a>
<a href="animalgallery.html" class="quick-links">Animals</a>
<a href="wilpattu.html" class="quick-links">Wilpattu</a>
<a href="yaala.html" class="quick-links">Yala</a>
<a href="kumana.html" class="quick-links">Kumana</a>
<a href="events.html" class="quick-links">Events</a>
<a href="contact.html" class="quick-links">Contact Us</a>
</section>
<section class="footer-section">
<h4>Follow Us</h4>
<p class="footer-para">Stay connected on social media.</p>
<!-- Social media icons with links -->
<section class="social-icons">
<a href="https://facebook.com/" target="_blank"><img src="IMAGES/navfooter-images/facebook-icon.webp"
alt="Facebook" /></a>
<a href="https://twitter.com/" target="_blank"><img src="IMAGES/navfooter-images/twitter-icon.webp"
alt="Twitter" /></a>
<a href="https://instagram.com/" target="_blank"><img src="IMAGES/navfooter-images/instagram-icon.webp"
alt="Instagram" /></a>
</section>
</section>
<section class="newsletter-section">
<h4>Subscribe to Our Newsletter</h4>
<p>Stay updated with our latest news and promotions.</p>
<form id="newsletter-form">
<input type="email" id="newsletter-email" name="email" placeholder="Enter your email" required>
<button type="submit" id="subscribe-btn">Subscribe</button>
</form>
</section>
</section>
<!-- Copyright text with link to creator's contact -->
<h5 id="copyright-text">
© 2004-2024 All Rights Reserved. Created by
<a href="http://wa.me/+94751229892" target="_blank">
Hirusha Gunasena.
</a>
</h5>
<!-- References:
- Smith, John. "The Beauty of Wildlife." National Geographic, 2023.
- Wildlife Conservation Society. "Exploring Sri Lankan Biodiversity.
- Wikipedia.
- Sri Lankan wildlife conservation department
- Youtube -->
</footer>
<!-- JavaScript for mobile menu toggle -->
<script>
const menubutton = document.querySelector(".menu-btn");
const navlinks = document.querySelector(".nav-links");
menubutton.addEventListener("click", () => {
navlinks.classList.toggle("mobile-menu");
});
</script>
<script src="JS/homepage.js"></script>
<script src="JS/newsletter.js"></script>
</body>
</html>