-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
148 lines (135 loc) · 7.69 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@100;200;400;500;700&display=swap" rel="stylesheet">
<title>Assignment_3 group_9</title>
<link rel="stylesheet" type="text/css" href="/src/sass/style.css">
</head>
<body>
<div id="landscape-message" class="landscape-message">
Switch to landscape mode for the best viewing experience.
<button id="ok-button">OK</button>
</div>
<a href="https://www.undp.org/sustainable-development-goals/below-water"><img class="goal_14" src="images/goal-14.png" alt="goal-14-image"></a>
<div class="change">
<div class="change change-1" data-color="#bed4e9"></div>
<div class="change change-2" data-color="#5379ae"></div>
<div class="change change-3" data-color="#0b385f"></div>
<div class="change change-4" data-color="#0f1924"></div>
<div class="change change-5" data-color="#000000"></div>
</div>
<div class="clouds">
<img class="cloud_1 "src="images/cloud5.svg" alt="clouds">
<img class="cloud_2 "src="images/cloud5.svg" alt="clouds">
<img class="cloud_3 "src="images/cloud2.svg" alt="clouds">
</div>
<div class="scroll-section__howtofix fade-out" data-index="0" data-start="0">
<p>This is Barnard, he lives on an iceberg in the north pole. Lately because of pollution, he´s home has slowly started to melt</p>
</div>
<div class="scroll-section__howtofix fade-out" data-index="1" data-start="5">
<p>This means he have to swim all the time and eventually be so tired he’s going to drown.</p>
</div>
<div class="scroll-section__howtofix fade-out" data-index="2" data-start="10">
<p>Arctic sea ice recedes every summer,
but still covers millions of square miles of ocean today.
But the Arctic is warming faster than anywhere else on
Earth and ice-free summers could become a reality.
</p>
</div>
<div class="scroll-section__howtofix fade-out" data-index="3" data-start="40">
<p>Human activities are at the root of this problem, because of the carbon dioxide from industry's, co2 gasses from cars and other greenhouse gasses. </p>
</div>
<div class="scroll-section__howtofix fade-out" data-index="4" data-start="50">
<p>Changes in water temperature causes algae to leave coral reefs,
turning them white and making them vulnerable to
disease and death—a phenomenon known as coral bleaching.
</p>
</div>
<div class="scroll-section__howtofix fade-out" data-index="5" data-start="75">
<p>This have raised temperatures, especially on the poles. As a result, icebergs are rapidly melting into the sea and retreating on land.</p>
</div>
<div class="scroll-section">
<div class="scroll-section__text"></div>
</div>
<div class="scene1">
<div class="water__element"></div>
<div class="iceberg__element">
<img class="iceplatform__element--modifier" src="../Iceparts/Iceberg_platform_1.svg" alt="ice-platform">
<img class="iceoverlay__element--modifier" src="../Iceparts/Iceberg_overlay_2.svg" alt="ice-overlay">
<img class="icebottom__element--modifier" src="../Iceparts/Iceberg_bottom_1.svg" alt="ice-bottom">
</div>
<div class="icebear_element">
<div class="headmove__element--modifier">
<img class="icebear-headBase__element--modifier" src="../Iceparts/Icebear_headBase_1.svg" alt="icebear-headBase">
</div>
<img class="icebear-body__element--modifier" src="/Iceparts/Icebear_body_1.svg" alt="icebear-body">
<div class="leftLeg-move__element--modifier">
<img class="icebear-legLeft__element--modifier" src="/Iceparts/Icebear_legLeft_1.svg" alt="icebear-legLeft">
<img class="icebear-tail__element--modifier" src="/Iceparts/Icebear_tail_1.svg" alt="icebear-tail">
<img class="icebear-footLeft__element--modifier" src="/Iceparts/Icebear_footLeft_1.svg" alt="icebear-footLeft">
</div>
<div class="rightLeg-move__element--modifier">
<img class="icebear-legRight__element--modifier" src="/Iceparts/Icebear_legRight_1.svg" alt="icebear-legRight">
<img class="icebear-footRight__element--modifier" src="/Iceparts/Icebear_footRight_1.svg" alt="icebear-footRight">
</div>
</div>
</div>
</div>
<div class="scene2">
<div class="fish">
<img class="big__fish" src="images/fish/big-fish.svg" alt="big-fish">
<img class="small__fish" src="images/fish/small-fish.svg" alt="small-fish">
<img class="small__amount__fish" src="images/fish/light_fish.svg" alt="small-amount-fish">
<img class="cluster__fish" src="images/fish/cluster-fish.svg" alt="cluster-fish">
<img class="small__fish__2" src="images/fish/small-fish.svg" alt="small-fish">
</div>
<div class="trash">
<img class="trash__can" src="images/trash/trash-can.svg" alt="trash-can">
<img class="trash__spoon" src="images/trash/trash-spoon.svg" alt="trash-spoon">
<img class="trash__bag" src="images/trash/trash-bag.svg" alt="trash-bag">
<img class="trash__sock" src="images/trash/trash-sock.svg" alt="trash-sock">
</div>
</div>
<section class="scroll-section scroll-section--scene3">
<div class="scroll-section__content">
<div class="scroll-section__images">
<img class="scroll-section__img1" src="/images/deadfish 1.svg" alt="dead fish on the ocean floor">
<img class="scroll-section__img2" src="/images/deadfish 2.svg" alt="dead fish on the ocean floor">
<img class="scroll-section__img3" src="/images/seaweed1.svg" alt="seaweed">
<img class="scroll-section__img4" src="/images/seaweed2.svg" alt="seaweed">
<img class="scroll-section__img5" src="/images/oceanfloor.svg" alt="ocean floor">
<img class="scroll-section__img6" src="/images/deadfish 2.svg" alt="dead fish on the ocean floor">
<img class="scroll-section__img7" src="/images/toxic.svg" alt="toxic barrel">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>
</section>
<div class="scroll-section scroll-section--scene4">
<p class="scroll-section__bottom1">If we dont do something...
Rising sea levels could impact 1 billion people by the year 2050. Heat waves will become more frequent and severe around the world,
affecting hundreds of millions—or even billions—of people if we don’t act.
</p>
<div class="scroll-section__bottom2">
<p>Things YOU can do to help:</p>
<ul>
<li>Recycle your trash properly</li>
<li>Save energy at home</li>
<li>Walk or bicycle instead of taking your car</li>
</ul>
</div>
<p class="scroll-section__bottom3"> Act now to save other animals like Barnard</p>
</div>
<script src="/index.js"></script>
</body>
</html>