forked from anuragverma108/WildGuard
-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
190 lines (160 loc) · 8.99 KB
/
about.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - Save World Animals</title>
<link rel="stylesheet" href="assets/css/about.css">
<link rel="stylesheet" href="./assets/css/style.css">
<!--
- google font link
-->
<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=Inter:wght@400;500;600&family=Roboto:wght@300;400;500;700&family=Oswald:wght@600&display=swap"
rel="stylesheet" />
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<link rel="stylesheet" href="./Events-Data/modal.css">
</head>
<body>
<header>
<h1>WildGuard</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About Us</a>
<a href="#">Service</a>
<a href="Contact.html">Contact Us</a>
<a href="donate.html">Donate</a>
<a href="login.html">Login</a>
</nav>
</header>
<!-- About Us Section -->
<section id="about" class="about-section">
<div class="about-overlay">
<h2>About Us</h2>
<p id="paragraph1"></p> <!-- Empty initially, will be filled by JavaScript -->
<p id="paragraph2"></p> <!-- Empty initially, will be filled by JavaScript -->
</div>
</section>
<section>
<div class="container">
<!-- Section Heading -->
<!-- <div class="section-heading">
<h1>About Us</h1>
</div> -->
<!-- Row 1: Vision on the right, Image on the left -->
<div class="row">
<div class="image-content">
<img src="https://images.pexels.com/photos/34231/antler-antler-carrier-fallow-deer-hirsch.jpg?auto=compress&cs=tinysrgb&w=600" alt="Wild Animal">
</div>
<div class="text-content">
<h2>Our Vision</h2>
<p>At WildGuard, we envision a world where wildlife thrives in harmony with human activity. Our efforts are focused on conservation, awareness, and sustainable initiatives that promote the well-being of animals and their habitats. By protecting endangered species and preserving biodiversity, we aim to create a future where every animal has a safe, thriving environment to call home. Our vision drives us to foster coexistence between humans and nature, ensuring that future generations will experience the beauty and diversity of wildlife</p>
</div>
</div>
<!-- Row 2: Mission on the left, Image on the right -->
<div class="row">
<div class="text-content">
<h2>Our Mission</h2>
<p>Our mission is to actively protect wildlife through education, conservation programs, and direct action. We are dedicated to restoring natural ecosystems and advocating for stronger policies that safeguard the most vulnerable species. By partnering with local communities, governments, and global organizations, we work to inspire change, reduce poaching, and mitigate the impact of human activities on wildlife. We believe in the power of collective action to create sustainable solutions that benefit both animals and people, and we strive every day to make this mission a reality.</p>
</div>
<div class="image-content">
<img src="https://images.pexels.com/photos/144234/bull-landscape-nature-mammal-144234.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Wild Animal">
</div>
<!-- <div class="text-content">
<h2>Our Mission</h2>
<p>Our mission is to protect endangered species, preserve wildlife habitats, and foster a connection between humans and nature. We aim to educate and engage communities to take part in our cause and ensure a future for wildlife.</p>
</div> -->
</div>
</div>
</section>
<!--
- #FOOTER
-->
<footer id="footer" class="footer">
<div class="container footer-container">
<div class="footer-left">
<h3>
<a href="#" class="logo">WildGuard</a>
</h3>
<p >WildGuard is dedicated to preserving wildlife and protecting endangered species worldwide. Join us in our
mission to create a sustainable future for the planet's most vulnerable creatures.</p>
</div>
<div class="footer-middle">
<h4>Quick Links</h4>
<div class="quick-links">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#service">Service</a></li>
<li><a href="donate.html">Donate</a></li>
<li><a href="Contact.html">Contact Us</a></li>
</ul>
</div>
</div>
<div class="footer-right">
<div class="">
<a href="review.html">
<button type="submit">🌟Rating/Review🌟</button>
</a>
</div>
<div class="subscribe-form">
<form action="#">
<input type="email" class="email-input" placeholder="Your email address">
<button type="submit">Subscribe</button>
</form>
</div>
<div class="footer-social-icons">
<div class="social-links">
<a href="https://www.facebook.com/"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="https://x.com/"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="https://www.instagram.com/"><ion-icon name="logo-instagram"></ion-icon></a>
<a href="https://www.linkedin.com/"><ion-icon name="logo-linkedin"></ion-icon></a>
<a href="https://www.youtube.com/"><ion-icon name="logo-youtube"></ion-icon></a>
</div>
<div class="message">Stay Connected</div>
</div>
</div>
</div>
<div class="footer-bottom" style="display: inline;">
<p>© 2024 <a href="copyright.html" style="display: inline;">WildGuard</a> All Rights Reserved</p>
<p>
<a href="./terms-of-use.html" class="footer-link" style="display: inline;">Terms of Service</a> |
<a href="./privacy-policy.html" class="footer-link" style="display: inline;">Privacy Policy</a>
</p>
</div>
</footer>
<script>
// Typing effect function
function typeText(element, text, delay = 50) {
let index = 0;
element.innerHTML = '';
element.style.visibility = 'visible'; // Make the paragraph visible once typing starts
const interval = setInterval(() => {
if (index < text.length) {
element.innerHTML += text.charAt(index);
index++;
} else {
clearInterval(interval);
}
}, delay);
}
// Call typing effect for each paragraph
document.addEventListener("DOMContentLoaded", function () {
const paragraph1 = document.getElementById("paragraph1");
const paragraph2 = document.getElementById("paragraph2");
// Text content to be typed out
const text1 = "At WildGuard, we are passionate about protecting and preserving the world’s wildlife. Our mission is simple: to defend wildlife, one paw at a time. With ecosystems facing unprecedented threats, we are committed to ensuring that future generations can experience the beauty and diversity of the animal kingdom.";
const text2 = "Our organization is built on the belief that every species plays a critical role in maintaining the balance of our planet. We work tirelessly to provide resources, support, and awareness for wildlife conservation efforts around the globe. Through our initiatives, we aim to protect endangered species, restore natural habitats, and promote sustainability in the face of environmental challenges.";
// Typing effect on first paragraph, followed by the second paragraph
typeText(paragraph1, text1, 30); // Typing effect for the first paragraph
// Starts the second after the first finishes
setTimeout(() => {
typeText(paragraph2, text2, 30); // Typing effect for the second paragraph
}, text1.length * 30); // Delay based on the length of the first text
});
</script>
</body>
</html>