-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·314 lines (266 loc) · 15.3 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
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
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<html style="overflow-x: hidden;"></html>
<link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
<link rel="stylesheet" href="css/vars.css">
<link rel="stylesheet" href="css/buttons.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/structure.css">
<link rel="stylesheet" href="css/clock.css">
<link rel="stylesheet" href="css/background.css">
<link rel="stylesheet" href="css/fadeIn.css">
<link rel="stylesheet" href="css/slideshow.css">
<link rel="stylesheet" href="css/mobile.css" media="(orientation: portrait)">
<link rel="stylesheet" href="css/mobilestructure.css" media="(orientation: portrait)">
<link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script id="textFitLib" src="textFit.slow.js"></script>
<script>
function scrollToPos(vh){
console.log(vh)
console.log(window.innerHeight*(vh/100))
window.scrollTo(0,window.innerHeight*(vh/100))
}
</script>
</head>
<body">
<script src="/js/countdown.js"> </script>
<script src="js/transitionBackground.js"></script>
<script src="js/slideshow.js"></script>
<div class="main" id="main1">
<div class="mainImage fadeIn fadeIn1">
<img src="assets/logoclear.png" alt="logo" id="logo">
</div>
<div class="mainTitleContainer fadeIn">
<p class="mainTitle">
The Climate Society
</p>
</div>
<div class="slideshow">
<div class="slideshowItems" id="slideShowItems">
<img src="assets/events/ubcBotanicalGarden.jpg" alt="" class="slideItem" id="slide0">
<img src="assets/events/bottledrive.jpg" alt="" class="slideItem" id="slide1">
<img src="assets/events/pull.jpg" alt="" class="slideItem" id="slide2">
<img src="assets/events/reforesting.JPG" alt="" class="slideItem" id="slide3">
<img src="assets/events/signprotesting.JPG" alt="" class="slideItem" id="slide4">
<img src="assets/events/climateDemonstrations/downtownProtest0.jpg" alt="" class="slideItem" id="slide5">
<!-- <img src="assets/events/treeplanting.jpeg" alt="" class="slideItem" id="slide6"> -->
</div>
<div class="arrows">
<svg class="arrow" id="arrow1" viewBox="0 0 78 67" fill="none" xmlns="http://www.w3.org/2000/svg" onclick="moveRight()">
<circle cx="31" cy="33" r="19" fill="#D9D9D9"/>
<path d="M22.2929 32.2636C21.9024 32.6541 21.9024 33.2873 22.2929 33.6778L28.6569 40.0418C29.0474 40.4323 29.6805 40.4323 30.0711 40.0418C30.4616 39.6512 30.4616 39.0181 30.0711 38.6276L24.4142 32.9707L30.0711 27.3138C30.4616 26.9233 30.4616 26.2902 30.0711 25.8996C29.6805 25.5091 29.0474 25.5091 28.6569 25.8996L22.2929 32.2636ZM41.5 31.9707L23 31.9707L23 33.9707L41.5 33.9707L41.5 31.9707Z" fill="black"/>
</svg>
<svg class="arrow" id="arrow2" viewBox="0 0 78 67" fill="none" xmlns="http://www.w3.org/2000/svg" onclick="moveLeft()">
<circle cx="31" cy="33" r="19" fill="#D9D9D9"/>
<path d="M42.1562 34.2C42.5667 33.8305 42.6 33.1983 42.2305 32.7877L36.2099 26.0981C35.8404 25.6876 35.2081 25.6543 34.7976 26.0238C34.3871 26.3932 34.3538 27.0255 34.7233 27.436L40.075 33.3824L34.1286 38.7341C33.7181 39.1036 33.6848 39.7359 34.0543 40.1464C34.4238 40.5569 35.0561 40.5901 35.4666 40.2207L42.1562 34.2ZM22.9603 33.483L41.4347 34.4553L41.5398 32.4581L23.0654 31.4858L22.9603 33.483Z" fill="black"/>
</svg>
</div>
</div>
<div class="mainSection fadeIn fadeIn1" id="ourProjects">
<div class="sectionText" id="projectText">
<p class="textHeader fadeIn">
Our Projects!
</p>
<p class="textText fadeIn">
Our projects encompass a range of environmental initiatives: organizing community recycling drives, participating in awareness-raising protests, reforesting local areas, cleaning and maintaining parks, managing invasive species, and collaborating with botanical experts. Each activity contributes significantly to environmental conservation and the fight against climate change.
</p>
<button class="mainButton fadeIn fadeIn1" onclick="location.href='./projects'">
<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="buttonSvg"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
<p>Check out Our Projects!</p>
</button>
</div>
<div class="sectionOther">
<div class="sectionImage fadeIn fadeIn1">
<img src="assets/events/reforesting2.JPG" alt="">
</div>
</div>
</div>
<div class="mainSection fadeIn" id="ourTeam">
<div class="sectionOther">
<div class="sectionImage">
<img src="assets/events/bottledrive.jpg" alt="">
</div>
</div>
<div class="sectionText" id="teamText">
<p class="textHeader">
Our Team!
</p>
<p class="textText">
Our team, comprised of dedicated environmental advocates, brings together a diverse mix of ecologists, volunteers, organizers, and educators. United by a shared commitment to combat climate change, we collaborate effectively to drive impactful community initiatives and inspire meaningful environmental stewardship.
</p>
<button class="mainButton" onclick="location.href='./team'">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="buttonSvg"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
<p>
Check out Our Team!
</p>
</button>
</div>
</div>
<div class="mainSection fadeIn fadeIn1" id="ourBlog">
<div class="sectionText" id="projectText">
<p class="textHeader fadeIn">
Our Blog!
</p>
<p class="textText fadeIn">
Welcome to our blog, a hub for fresh perspectives on environmental action and climate awareness. Here, we share concise, impactful stories and updates, connecting our community with the vital work of preserving our planet. Join us in exploring innovative solutions and engaging discussions that make a difference.
</p>
<button class="mainButton fadeIn fadeIn1" onclick="location.href='./blog'">
<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="buttonSvg"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
<p>Check out Our Blog!</p>
</button>
</div>
<div class="sectionOther">
<div class="sectionImage fadeIn fadeIn1">
<img src="assets/blog2.jpg" alt="">
</div>
</div>
</div>
<div class="clock fadeIn fadeIn1" id="Clock">
<div class="clockHeader">
<p id="clockHeaderText">
TIME LEFT TO LIMIT GLOBAL WARMING TO 1.5 C
</p>
</div>
<div class="clockRow">
<div class="clockObject Row1Object">
<p class="clockTime" id="countdown0">
5
</p>
<p class="clockLabel">
YRS
</p>
</div>
<div class="clockObject Row1Object">
<p class="clockTime" id="countdown1">
153
</p>
<p class="clockLabel">
DAYS
</p>
</div>
</div>
<div class="clockRow">
<div class="clockObject Row2Object">
<p class="clockTime" id="countdown2">
7
</p>
<p class="clockLabel">
HRS
</p>
</div>
<div class="clockObject Row2Object">
<p class="clockTime" id="countdown3">
5
</p>
<p class="clockLabel">
MIN
</p>
</div>
<div class="clockObject Row2Object">
<p class="clockTime" id="countdown4">
32
</p>
<p class="clockLabel">
SEC
</p>
</div>
</div>
</div>
</div>
<div class="main" id="main2">
<div class="mainSection2" id="ourMission">
<div class="fadeIn fadeIn2">
<p class="main2Header">
Our Mission
</p>
<p class="main2Text">
At the Climate Society, our dedication to addressing the dire situation of our planet's changing climate is both deeply personal and critically important. We are acutely aware of the severity of the climate crisis and its devastating impacts, and this knowledge fuels our commitment to action. The current state of the climate is alarming; rising global temperatures, melting ice caps, extreme weather events, and declining biodiversity are just a few of the stark realities we face.
</p>
</div>
<img src="assets/mission.jpg" class="main2Image fadeIn fadeIn3"alt="">
</div>
<div class="mainSection2">
<img src="assets/vision.jpg" class="main2Image fadeIn fadeIn2"alt="">
<div class="fadeIn fadeIn3">
<p class="main2Header">
Vision for the future.
</p>
<p class="main2Text">
The Climate Society envisions a sustainable future where environmental stewardship and sustainable practices are paramount. Our goal is to proactively create a healthier planet, emphasizing clean energy accessibility, ecosystem preservation, and community resilience to environmental changes. We strive for a world where future generations coexist harmoniously with nature, enjoying a balanced and rejuvenated Earth.
</p>
</div>
</div>
<div class="mainSection2">
<div class="fadeIn fadeIn2">
<p class="main2Header">
Community Empowerment
</p>
<p class="main2Text">
At The Climate Society, community involvement is key. We empower individuals and groups to actively participate in environmental conservation. Our initiatives include educational workshops, sustainable living projects, and biodiversity enhancement programs. By uniting communities, we foster a shared commitment to tangible, eco-friendly changes.
</p>
</div>
<img src="assets/community.jpg" class="main2Image fadeIn fadeIn3" alt="">
</div>
<div class="mainSection2">
<img src="assets/education.jpg" class="main2Image fadeIn fadeIn2"alt="">
<div class="fadeIn fadeIn3">
<p class="main2Header">
Educational Outreach
</p>
<p class="main2Text">
The Climate Society places a strong emphasis on education as a tool for change. We believe in informing and inspiring the next generation about the importance of environmental protection. Our educational programs are designed to engage students and communities, providing them with the knowledge and skills necessary to become proactive environmental stewards.
</p>
</div>
</div>
<div class="threeWaysOuterDiv">
<p class="main2Header">
How You Can Help
</p>
<div class="threeWays">
<div class="way fadeIn fadeIn2">
<img src="/assets/renewable.jpg" alt="">
<div class="wayHeader">
Energy Efficiency and Renewable Energy Use
</div>
<div class="main2Text wayText">
Optimize home energy use with LED lighting, energy-efficient appliances, and unplugging devices when not in use. Consider investing in renewable energy sources like solar panels or choosing green energy providers, reducing your carbon footprint and supporting sustainable energy transition.
</div>
</div>
<div class="way fadeIn fadeIn1">
<img src="/assets/bike.jpg" alt="">
<div class="wayHeader">
Adopt Sustainable Transportation
</div>
<div class="main2Text wayText">
Embrace eco-friendly travel methods such as biking, walking, carpooling, or using public transportation. Consider using electric or hybrid vehicles. These practices reduce reliance on fossil fuels and cut down greenhouse gas emissions. </div>
</div>
<div class="way fadeIn fadeIn3">
<img src="/assets/advocate.jpg" alt="">
<div class="wayHeader">
Educate and Advocate
</div>
<div class="main2Text wayText">
Educate and Advocate:
Stay informed about climate issues and share this knowledge with others. Advocate for environmental policies and practices in your community and workplace. Raising awareness and supporting collective action can lead to significant change. </div>
</div>
</div>
</div>
<p class="main2Header">
Our Partners
</p>
<div class="partners">
<img src="assets/partners/magee.jpeg" alt="" id="magee">
<img src="assets/partners/escolaDasNaceos.jpeg" alt="" id="edn">
<img src="assets/partners/escolaCanadenseBrasilia.jpeg" alt="" id="ecb">
<img src="assets/partners/advocaciaNaruto.jpeg" alt="" id="an">
<img src="assets/partners/safeway.jpeg" alt="" id="safeway">
<img src="assets/partners/saveOnFoods.jpeg" alt="" id="saveOns">
</div>
</div>
<script src="js/fadeInObjects.js"></script>
</body>