forked from anuragverma108/WildGuard
-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
101 lines (81 loc) · 5.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="about.css">
<title>WildGuard - About Us</title>
</head>
<body>
<!-- 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>
<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>