-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathadvocacy.html
329 lines (311 loc) · 19.9 KB
/
advocacy.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Our Advocacy</title>
<meta charset="UTF-8">
<!--I add user-scalable = no so mobile devices view remove scrolling sideways-->
<meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<!-- Google Fonts -->
<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=Lato:wght@300;400;700&family=Poppins&family=Raleway:wght@400;500;600;700&family=Source+Sans+Pro&display=swap" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<section id="hero-advocacy" class="hero-75">
<!-- Possible thing to add: make the navbar have a fixed position then solid background when you scroll down instead of disappearing -->
<div id="header">
<div class="navbar transparent w3-bar w3-mobile w3-left-align w3-large">
<a href="index.html"><img src="images/logo-edited.png" id="logo" class="navbar-item" alt="logo"></a>
<a href="about.html" class="navbar-item navbar-btn w3-hide-small w3-hide-medium w3-padding-48 ">About Us</a>
<a href="involved.html" class="navbar-item navbar-btn w3-hide-small w3-hide-medium w3-padding-48 ">Get Involved</a>
<a href="advocacy.html" class="navbar-item navbar-btn w3-hide-small w3-hide-medium w3-padding-48 ">Our Advocacy</a>
<a href="donate.html" class="navbar-item navbar-btn w3-hide-small w3-hide-medium w3-padding-48">Donate</a>
<a href="signup.html" class="navbar-item navbar-btn w3-hide-small w3-hide-medium w3-padding-48 w3-right">Begin Your Legacy</a>
<!-- Navbar for mobile -->
<!-- NOTE: navbar turns white when we press this, so we'll have to change it -->
<a class="w3-bar-item w3-button w3-hide-large w3-right w3-padding-48 w3-hover-white w3-large" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
<div id="navMenu" class="w3-bar-block w3-white w3-hide w3-hide-large w3-large">
<a href="about.html" class="w3-bar-item w3-button w3-padding-large">About Us</a>
<a href="involved.html" class="w3-bar-item w3-button w3-padding-large">Get Involved</a>
<a href="advocacy.html" class="w3-bar-item w3-button w3-padding-large">Our Advocacy</a>
<a href="signup.html" class="w3-bar-item w3-button w3-padding-large">Begin Your Legacy</a>
<a href="donate.html" class="w3-bar-item w3-button w3-padding-large">Donate</a>
</div>
</div>
</div>
<div class="bottomleft"><h1 class="hero-h1">Our Advocacy</h1></div>
</section>
<section id="advocacy-content">
<div class="w3-content">
<div class="advocacy-heading text-white">
<h1 class="section-heading-h1">In the last 20 years alone, the Philippines lost over 1 million hectares of tree cover</h1>
</div>
<div class="timeline">
<div class = "timeline-card">
<div class = "timeline-img-box">
<img src="images/palawan.jpg" class = "timeline-img">
</div>
<div class = "timeline-text">
<img class="timeline-icon" src="icons/location.png" alt="vision">
<h1 class = "timeline-title"> Palawan</h1>
</div>
</div>
<div class = "timeline-card">
<div class = "timeline-text">
<h1 class = "timeline-title"> Mindoro Island</h1>
<img class="timeline-icon" src="icons/location.png" alt="vision">
</div>
<div class = "timeline-img-box">
<img src="images/mindoro.jpg" class = "timeline-img">
</div>
</div>
<div class = "timeline-card">
<div class = "timeline-img-box">
<img src="images/benguet.jpg" class = "timeline-img" id = "timeline-img3">
</div>
<div class = "timeline-text">
<img class="timeline-icon" src="icons/location.png" alt="vision">
<h1 class = "timeline-title"> Benguet</h1>
</div>
</div>
</div>
</div>
<div class="forests-matter-container">
<div class="w3-content">
<div class="advocacy-heading text-white">
<h1 class="section-heading-h1">Why Our Forests Matter<hr></h1>
</div>
<div class="forests-matter-content">
<div class="w3-row">
<div class="w3-col l6">
<div class="matters-card bg-white">
<div class="matters-card-img">
<img src="images/drinking-water.jpg" alt="drinking-water">
</div>
<div class="matters-card-info">
<h2 class="advocacy-h2">Health<hr class="no-margin"></h2>
<h3><strong>Forests and trees help us live better and healthier lives</strong></h3>
<h5>Three-quarters of the world’s freshwater comes from forested watersheds. Countless medicinal plants have originated from forests. Exposing oneself to green spaces strengthens the immune system, reduces stress, lowers blood pressure, and improves focus.</h5>
</div>
</div>
</div>
<div class="w3-col l6">
<div class="matters-card bg-white">
<div class="matters-card-img">
<img src="images/erosion.jpg" alt="erosion">
</div>
<div class="matters-card-info">
<h2 class="advocacy-h2">Protection<hr class="no-margin"></h2>
<h3><strong>Forests mitigate many natural disasters and issues</strong></h3>
<h5>Tree roots hold soil in place and let water easily seep into the ground, stopping flooding and erosion. They can also redistribute water to keep soils moist during droughts. Of course, trees are also crucial for absorbing various greenhouse gases that cause global warming.</h5>
</div>
</div>
</div>
</div>
<div class="w3-row">
<div class="w3-col l6">
<div class="matters-card bg-white">
<div class="matters-card-img">
<img src="images/agriculture.jpg" alt="agriculture">
</div>
<div class="matters-card-info">
<h2 class="advocacy-h2">Agriculture<hr class="no-margin"></h2>
<h3><strong>Forests are crucial for crop yields and food security </strong></h3>
<h5>Soil erosion ruins topsoil, leading to poor crop yield and economic repurcussions. The lack of forest cover also makes croplands more susceptible to landslides and typhoons Thus, threatening the livelihood and food security of millions of Filipinos.</h5>
</div>
</div>
</div>
<div class="w3-col l6">
<div class="matters-card bg-white">
<div class="matters-card-img">
<img src="images/ph-eagle.jpg" alt="ph-eagle">
</div>
<div class="matters-card-info">
<h2 class="advocacy-h2">Biodiversity<hr class="no-margin"></h2>
<h3><strong>Our forests are home to thousands of native species </strong></h3>
<h5>Philippine forests boast some of the richest and most diverse ecosystems in the world, with over half of flora and fauna being native to the country. However, deforestation continues to disrupt and destroy these ecosystems, causing hundreds of species to become endangered.</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="what-do">
<div class="facts-container w3-content">
<div class="w3-row">
<div class="fact flex-center flex-column w3-col l3 m6">
<div class="fact-icon-bg flex-center flex-column img-shadow bg-white">
<img class="fact-icon" src="icons/wood.png" alt="wood">
</div>
<div class="fact-info text-white">
<h3 class="fact-heading text-shadow">80 million</h3>
<h5>hectares of primary forest has been lost in the <strong>last two decades</strong>. This is caused by unsustainable mining, commercial agriculture, illegal logging, infrastructures, and increased forest fires.</h5>
</div>
</div>
<div class="fact flex-center flex-column w3-col l3 m6">
<div class="fact-icon-bg flex-center flex-column img-shadow bg-white">
<img class="fact-icon" src="icons/co2.png" alt="carbon-dioxide">
</div>
<div class="fact-info text-white">
<h3 class="fact-heading text-shadow">4.8 billion</h3>
<h5>metric tons of carbon dioxide were released into the atmosphere between 2015 and 2017 due to tree cover loss. That's a bigger carbon footprint than the lifetime of <strong>85 million cars.</strong></h5>
</div>
</div>
<div class="fact flex-center flex-column w3-col l3 m6">
<div class="fact-icon-bg flex-center flex-column img-shadow bg-white">
<img class="fact-icon" src="icons/coal.png" alt="coal">
</div>
<div class="fact-info text-white">
<h3 class="fact-heading text-shadow">2.4 billion</h3>
<h5>people use woodfuel for cooking, while hundreds of millions of farmers rely on forests for crop yields. Deforestation threatens the <strong>food security of the entire world</strong>, especially the rural poor.
</div>
</div>
<div class="fact flex-center flex-column w3-col l3 m6">
<div class="fact-icon-bg flex-center flex-column img-shadow bg-white">
<img class="fact-icon" src="icons/indigenous.png" alt="indigenous">
</div>
<div class="fact-info text-white">
<h3 class="fact-heading text-shadow">250 million</h3>
<h5>people have <strong>livelihoods, cultures, and basic needs</strong> that revolve around forests. Many of these people are part of indigenous groups that already suffer from human rights violations, poverty, and discrimination.</h5>
</div>
</div>
</div>
</div>
<div id="banner-what-to" class="text-white">
<div class="w3-content">
<div class="advocacy-heading">
<h1 class="section-heading-h1">What Can You Do?</h1>
<h4>There are many ways you can support I Am A Legacy in the fight against deforestation. Volunteer or participate in any of our environmental events and campaigns. Support our organization by giving a one-time or monthly donation. Share our social media posts. Best of all, join us as an official member!</h4>
</div>
</div>
</div>
<div class="advocacy-part2">
<div class="w3-content">
<div class="w3-row container-shadow bg-white">
<div class="w3-col l6">
<div class="fb-video" data-href="https://www.facebook.com/watch/?v=347312403838862" data-width="auto" data-show-text="false">
</div>
</div>
<div class="w3-col l6">
<div class="vid-text">
<h2 class="advocacy-h2">Volunteer<hr class="no-margin"></h2>
<h3>Eco-Camp</h3>
<p class="grid-text">is one of the major activities of the Save Negros Forests campaign. The camp aims to develop the youth's knowledge regarding the importance of the Negros Natural Park (NNNP). The 3-day activity provided the volunteers with research-based information about the vitality and importance of nature.</p>
<a class="card-btn transparent" href="involved.html">LEARN MORE</a>
</div>
</div>
</div>
<br>
<div class="w3-row container-shadow bg-white">
<div class="w3-col l6">
<div class="fb-video" data-href="https://www.facebook.com/watch/?v=811714909378925" data-width="auto" data-show-text="false">
</div>
</div>
<div class="w3-col l6">
<div class="vid-text">
<h2 class="advocacy-h2">Become a Member<hr class="no-margin"></h2>
<h3>Cooperation</h3>
<p class="grid-text"> is the only way we can create sweeping, long-lasting, and impactful change on communities and society as a whole. Becoming an official member of I Am A Legacy lets you pioneer acts of authentic volunteerism that touches and changes lives in the name of generosity, kindness, and love. Join us now to begin sowing a legacy of your own.</p>
<a class="card-btn transparent" href="signup.html">JOIN NOW</a>
</div>
</div>
</div>
<br>
<div class="w3-row container-shadow bg-white">
<div class="w3-col l6">
<div class="fb-video" data-href="https://www.facebook.com/watch/?v=302718134444595" data-width="auto" data-show-text="false">
</div>
</div>
<div class="w3-col l6">
<div class="vid-text">
<h2 class="advocacy-h2">Donate<hr class="no-margin"></h2>
<h3>Generosity</h3>
<p class="grid-text">is one of the simplest actions you can do in your life, yet one of the most impactful. As Filipinos, it is our responsibility to help our fellow countrymen in need. Your generosity has the potential to save lives and give people hope. Spread compassion. Enact change. Create legacies.</p>
<a class="card-btn transparent" href="donate.html">DONATE</a>
</div>
</div>
</div>
<br>
<div class="reference-list flex-center flex-column text-white">
<h6>References</h6>
<h6 class="apa-reference">Food And Agriculture Organization of the United Nations (2020). The state of the world’s forests (SOFO). https://www.fao.org/documents/card/en/c/ca8642en</h6>
<h6 class="apa-reference">Food and Agriculture Organization of the United Nations (2020). People, biodiversity, and forests. Fao.org. https://www.fao.org/3/ca8642en/online/ca8642en.html#chapter-4_3</h6>
<h6 class="apa-reference">Nunez, C. (2019, February 7). Deforestation explained. National Geographic. https://www.nationalgeographic.com/environment/article/deforestation</h6>
<h6 class="apa-reference apa-one-line">UNESCO. (2017, September 7). Indigenous peoples. https://en.unesco.org/indigenous-peoples</h6>
</div>
</div>
</div>
</section>
<footer class="w3-container">
<div class="w3-content w3-row">
<div class="w3-quarter">
<h5 class="footer-link"><a href="index.html">Home</a></h5>
<h5 class="footer-link"><a href="advocacy.html">Our Advocacy</a></h5>
</div>
<div class="w3-quarter">
<h5 class="footer-link"><a href="about.html">About Us</a></h5>
<h5 class="footer-link"><a href="donate.html">Donate</a></h5>
</div>
<div class="w3-quarter">
<h5 class="footer-link"><a href="involved.html">Get Involved</a></h5>
<h5 class="footer-link"><a href="signup.html">Begin Your Legacy</a></h5>
</div>
<div class="w3-quarter">
<form action="#">
<h6>Subscribe to the Legacy Newsletter </h6>
<input class="w3-input" type="text" placeholder="Email">
<input id="newsletter-submit" type="submit" value="Sign Up">
</form>
</div>
</div>
<div class="w3-content w3-row">
<div class="w3-col l3 m3">
<h3>Contact Us</h3>
<h6>Email: [email protected]</h6>
<h6>Contact No.: +63 961 044 2124</h6>
<h6>Address: Purok Star Apple 2, Brgy. 27, Bacolod, Negros Occidental</h6>
</div>
<div class="w3-col l3 m3">
<div class="social-icons">
<h3>Find Us Online</h3>
<div class="wrapper">
<div class="icon facebook">
<div class="tooltip">Facebook</div>
<span><a href="https://www.facebook.com/I-Am-A-Legacy-2080852895460859"><i class="fab fa-facebook-f"></a></i></span>
</div>
<div class="icon twitter">
<div class="tooltip">Twitter</div>
<span><i class="fab fa-twitter"></i></span>
</div>
<div class="icon instagram">
<div class="tooltip">Instagram</div>
<span><i class="fab fa-instagram"></i></span>
</div>
<div class="icon youtube">
<div class="tooltip">Youtube</div>
<span><i class="fab fa-youtube"></i></span>
</div>
</div>
</div>
</div>
<div class="w3-col l4 m6">
<h3>Attributions</h3>
<h6>Icons created by Freepik, juicy_fish, Smashicons, Nikita Golubev, Gajah Mada, Aficons Studio, Creative Stall, & flatart_icons - Flaticon</h6>
</div>
</div>
<div class="w3-content">
<div class="flex-center">
<h6>Copyright © 2022 I Am A Legacy. All Rights Reserved.</h6>
</div>
</div>
</footer>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
<script src="script.js"></script>
</body>
</html>