-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
243 lines (189 loc) · 10.7 KB
/
index.html
File metadata and controls
243 lines (189 loc) · 10.7 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Home page - Climate Action Information">
<meta name="keywords" content="Sustainable Development Goals, Climate Change, Sustainably, Goal 13">
<meta name="author" content="Eva Fossen Haugum">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="assets/images/logo.png">
<link rel="stylesheet" href="styles/index.css">
<title>Assignment 3 - Scrollytelling</title>
</head>
<body>
<!-- scroll up function -->
<a id="top"></a>
<!-- header -->
<header>
<a href="index.html"><img src="assets/images/logo.png" alt="goal 13 logo" loading="lazy"></a>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="https://sdgs.un.org/goals/goal13" target="_blank">More info</a></li>
</ul>
</nav>
</header>
<main>
<!-- introduction -->
<div class="between-sections">
<h2>Discover the impact of human behavior on the planet</h2>
<img class="arrow-down bounce" src="assets/svg/arrow-down.svg" alt="bouncing downwards arrow">
</div>
<!-- scene one -->
<section class="scene">
<div class="frame one">
<div class="one-title">
<h1>CLIMATE CHANGE IS HUMANITY'S <span>"Code Red"</span> warning</h1>
<h2>Our window to avoid climate catastrophe is closing rapidly!</h2>
</div>
<img class="animation-from-left" src="assets/images/antartica.jpg" alt="antartica" loading="lazy">
<!--Photo by <a href="https://unsplash.com/@chrisleboutillier?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Chris LeBoutillier</a> on <a href="https://unsplash.com/photos/c7RWVGL8lPA?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>-->
<img src="assets/images/forest.jpg" alt="parched and cut down forest" loading="lazy">
<!--Photo by <a href="https://unsplash.com/@mattpalmer?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Matt Palmer</a> on <a href="https://unsplash.com/photos/K5KmnZHv1Pg?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>-->
<img class="animation-from-right" src="assets/images/vulcano.jpg" alt="vulcano eruption" loading="lazy">
<!--Photo by <a href="https://unsplash.com/@mattpalmer?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Matt Palmer</a> on <a href="https://unsplash.com/photos/kbTp7dBzHyY?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>-->
<div class="one-text">
<p>As stated in Goal 13 of the United Nations' Sustainable Development Goals (SDGs),
"Climate Action," urgent action is required to combat climate change and its impacts. </p>
<p>The recent
report by the Intergovernmental Panel on Climate Change has declared that climate change is
humanity's "Code Red" warning, emphasizing the severity of the situation we are facing. The
report
highlights that the window to avoid climate catastrophe is closing rapidly, and we must take
immediate and bold action to limit global warming and avoid the worst impacts of climate change.
</p>
</div>
</div>
<div class="circle"></div>
</section>
<div class="fixed-background fixed-one"></div>
<!-- scene two -->
<section class="scene">
<div class="circle"></div>
<div class="frame two">
<div class="two-text">
<h3>Rising global temperatures</h3>
<p>It have become a cause for concern in recent years, as they have led to devastating consequences for our planet. From melting polar ice caps and rising sea levels to extreme weather events like hurricanes, floods, and droughts, the effects of climate change are becoming more visible and pronounced with each passing day.</p>
</div>
<div class="thermometer">
<div class="mercury"></div>
</div>
<h3 class="two-text-2">Drought estimated to displace 700 million people by 2023</h3>
</div>
<div class="circle"></div>
</section>
<div class="fixed-background fixed-two"></div>
<!-- scene three -->
<section class="scene">
<div class="frame three">
<div class="three-text">
<h3>Sea level will rise</h3>
</div>
<div class="three-wave">
<p>with 30-50 cm by the year 2100</p>
</div>
</div>
<div class="circle"></div>
</section>
<div class="fixed-background fixed-three"></div>
<!-- scene four -->
<section class="scene">
<div class="frame four">
<h3 class="four-title">The coral reefs are slowly dying</h3>
<p class="four-text-1 animation-from-left">70%-90% gone by 1.5°C</p>
<p class="four-text-2 animation-from-right">completely dead by 2°C </p>
<div>
<div class="bubble bubble1"></div>
<div class="bubble bubble2"></div>
<div class="bubble bubble3"></div>
<div class="bubble bubble4"></div>
<div class="bubble bubble5"></div>
<div class="bubble bubble6"></div>
<div class="bubble bubble7"></div>
<div class="bubble bubble8"></div>
</div>
<img class="coral-1" src="assets/images/coral-1.png" alt="coral-1" loading="lazy">
<img class="coral-2" src="assets/images/coral-2.png" alt="coral-2" loading="lazy">
<img class="coral-3" src="assets/images/coral-1.png" alt="coral-3" loading="lazy">
<img class="coral-4" src="assets/images/coral-4.png" alt="coral-4" loading="lazy">
<img class="coral-5" src="assets/images/coral-5.png" alt="coral-5" loading="lazy">
<!--<a href="https://www.freepik.com/free-vector/set-underwater-color-coral-elements_11058851.htm#query=corals&position=3&from_view=search&track=sph">Image by macrovector</a> on Freepik -->
</div>
<div class="circle"></div>
</section>
<div class="between-sections">
<h2>But that's only the beginning...</h2>
</div>
<!-- scene five -->
<section class="scene">
<div class="frame five">
<div>
<h3 class="animation-from-left">Droughts</h3>
<p>Estimated to displace 700 million people by 2023</p>
</div>
<div>
<h3>Disasters</h3>
<p>Medium- to largescale disasters will increase 40% from 2015 to 2030</p>
</div>
<div>
<h3 class="animation-from-right">Energy</h3>
<p>Energy-related CO<sub>2</sub> emissions increased 6% in 2021 (highest level ever)</p>
</div>
<div>
<h3 class="animation-from-left">Climate Finance</h3>
<p>Falls short of $100 billion yearly commitment</p>
</div>
<a class="five-download" href="assets/files/goal13-report.pdf" download target="_blank">
<img src="assets/images/goal13-report.png" alt="goal 13-report" loading="lazy"><span>Download
report</span>
</a>
<div>
<h3 class="animation-from-right">Global temperatures</h3>
<p>Rising global temperatures continue unabated, leading to more extreme weather</p>
</div>
</div>
<div class="circle"></div>
<div class="circle"></div>
</section>
<div class="between-sections">
<h2>Join us in the fight against climate change!</h2>
</div>
<div class="fixed-background fixed-four"></div>
<!-- scene six -->
<section class="scene">
<div class="frame six">
<img class="six-picture animation-from-right" src="assets/images/antartica.jpg" alt="antartica">
<div class="six-help">
<h3>WE NEED <span>YOUR HELP</span></h3>
<p>Every
individual has a responsibility to contribute towards a sustainable future. Taking action
on climate change is not only the right thing to do; it's also an opportunity to create new
jobs, businesses, and technologies that can power the green economy of the future.</p>
<p>You can help to make a difference by taking simple steps in your everyday life, such as reducing
your carbon footprint by using public transportation, recycling, and eating a plant-based diet.
You can also support organizations that are working to address climate change by volunteering
your time or making a donation.</p>
</div>
<img class="six-picture-two animation-from-left" src="assets/images/fabric.jpg" alt="fabric">
<div class="six-help-2">
<p><strong>Together</strong>, we can take action to protect the planet and ensure a sustainable
future for
generations to come. Join the movement for climate action today and be a part of the solution!
</p>
<a class="animation-from-left" href="https://www.un.org/en/about-us/how-to-donate-to-the-un-system" target="_blank"><span>Click here to
help</span></a>
</div>
</div>
</section>
</main>
<!-- scene footer -->
<footer>
<p>© Eva Fossen Haugum</p>
<p>Text and facts © United Nations</p>
<!-- button so the user can easily get back to the top -->
<a href="#top"><img class="back-up bounce" src="assets/svg/arrow-up.svg" alt="bouncing upwards arrow - to get to the top"></a>
</footer>
<script src="script.js"></script>
</body>
</html>