forked from anuragverma108/WildGuard
-
Notifications
You must be signed in to change notification settings - Fork 0
/
SaveEcology.html
150 lines (135 loc) · 5.64 KB
/
SaveEcology.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Save Ecology</title>
<link rel="stylesheet" href="./assets/css/SaveNature.css">
</head>
<body>
<!-- #HEADER -->
<header class="header">
<div class="container">
<h1 class="logo">Save Ecology</h1>
<nav class="nav">
<ul>
<li><a href="index.html">WildGuard</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#ecosystems">Ecosystems</a></li>
<li><a href="#sustainability">Sustainability</a></li>
<li><a href="#statistics">Statistics</a></li>
<li><a href="#how-to-help">How to Help</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!-- About Section -->
<section id="about" class="section">
<div class="container">
<h2 class="section-title">Why Saving Ecology Matters</h2>
<p class="line">Ecology is the foundation of life on Earth. It's the relationship between living organisms and their environment. Our ecosystems are under threat due to pollution, deforestation, climate change, and loss of biodiversity. Saving our ecology means ensuring the survival of future generations.</p>
</div>
</section>
<!-- Statistics Section -->
<section id="stats" class="section stats-grid">
<div class="stat-item">
<div class="icon">
<img src="assets/images/tree-icon.png.png" alt="Tree Icon">
</div>
<div class="stat-info">
<h3>31%</h3>
<p class="stat-description">Forest areas still cover Earth, but are shrinking due to deforestation.</p>
</div>
</div>
<div class="stat-item">
<div class="icon">
<img src="assets/images/ocean-icon.png" alt="Ocean Icon">
</div>
<div class="stat-info">
<h3>71%</h3>
<p class="stat-description">Of the Earth's surface is covered by oceans, crucial for climate regulation.</p>
</div>
</div>
<div class="stat-item">
<div class="icon">
<img src="assets/images/species-icon.png" alt="Species Icon">
</div>
<div class="stat-info">
<h3>1M</h3>
<p class="stat-description">Species are at risk of extinction, threatening the balance of ecosystems.</p>
</div>
</div>
</section>
<!-- Get Involved Section -->
<section id="help" class="section">
<div class="container">
<h2 class="section-title">How You Can Help Save Ecology</h2>
<div class="help-grid">
<div class="help-item">
<div class="help-icon">
<img src="assets/images/recycle-icon.png" alt="Recycle Icon">
</div>
<div class="help-info">
<h3>Reduce, Reuse, Recycle</h3>
<p>Minimize waste by recycling and choosing eco-friendly products.</p>
</div>
</div>
<div class="help-item">
<div class="help-icon">
<img src="assets/images/energy-icon.png" alt="Energy Icon">
</div>
<div class="help-info">
<h3>Use Clean Energy</h3>
<p>Switch to renewable energy sources to reduce carbon emissions.</p>
</div>
</div>
<div class="help-item">
<div class="icon">
<img src="assets/images/carbon-icon.png" alt="Carbon Icon">
</div>
<div class="help-info">
<h3>Plant Trees</h3>
<p>Support reforestation projects to restore natural habitats.</p>
</div>
</div>
</div>
<div class="help-call-to-action">
Together, we can protect our ecosystems and preserve biodiversity!
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="section">
<div class="container">
<h2 class="section-title">Contact Us</h2>
<form class="contact-form">
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<textarea placeholder="Your Message" rows="4" required></textarea>
<button type="submit" class="btn">Send Message</button>
</form>
</div>
</section>
<!-- Footer Section -->
<footer class="footer">
<div class="container footer-content">
<div>
<h3>About Us</h3>
<p>We are a global initiative committed to ecological preservation and sustainable practices.</p>
</div>
<div>
<h3>Follow Us</h3>
<ul class="social-links">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 Save Ecology Initiative. All rights reserved.</p>
</div>
</footer>
</body>
</html>