-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstory.html
162 lines (139 loc) · 6.5 KB
/
story.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deep Blue Clean up</title>
<link rel="stylesheet" href="storystyle.css">
</head>
<body>
<!--- wave starts -->
<div class="wave"></div>
<!--- wave ends -->
<div class="orangeflower"></div>
<div class="greenflower"></div>
<!--- first row of waste starts -->
<div class="container-ocean">
<div class="drop-targets">
<div>
<div class="item cigarettes" id="item" draggable="true">
<img src="assets/cigarettes.png" alt="cigarettes" class="cigarettes">
</div>
</div>
<div>
<div class="item plasticbag" id="item" draggable="true">
<img src="assets/plasticbag.png" alt="plasticbag" class="plasticbag">
</div>
</div>
<div>
<div class="item straw" id="item" draggable="true">
<img src="assets/straw.png" alt="straw" class="straw">
</div>
</div>
<div>
<div class="item sixpackring" id="item" draggable="true">
<img src="assets/sixpackrings.png" alt="six pack rings" class="sixpackring">
</div>
</div>
<div>
<div class="item empty" id="item" draggable="true"></div>
</div>
</div>
</div>
<!--- first row of waste ends -->
<div class="funfact">
<div class="instructions-text funfact">
<h3>How to play?</h3>
<p>Hold down and drag the items in the middle of the beach! Make sure not to let
go or else the waves will sweep it away!
</p>
</div>
<div class="cigarettes-text hidden funfact">
<h3>How can you help?</h3>
<p>Cleanups can help increase awareness about
the extent of cigarette butt pollution and why it’s
important to stop cigarette litter. Cigarette litter will
end when tobacco use does. That means changing the culture around tobacco.
Eliminating cigarette litter for good also means helping smokers quit. </p>
</div>
<div class="plasticbag-text hidden funfact">
<h3>How can you help?</h3>
<p>Thousands of marine animals choke and die from ingesting this plastic, and
many more are being slowly poisoned by the dioxin and other pollutants introduced
by this mass of plastic. Dioxin is an endocrine disrupter because it causes gender
mutations in fish and land animals that eat fish, like sea bass, seals, and even polar bears.</p>
</div>
<div class="straw-text hidden funfact">
<h3>How can you help?</h3>
<p>If you’re able to, request your cold drink is made without a single-use plastic straw. It’s
important that you state this before your drink is made; if the straw is already in there when
it’s brought to you, it’ll likely become plastic waste anyway.
You can also bring your own sustainable
alternatives. There are stainless steel, bamboo, and glass options available on the market!</p>
</div>
<div class="sixpackring-text hidden funfact">
<h3>How can you help?</h3>
<p> Don't buy soda in cans. Buy glass bottles instead. They are not only much healthier for you
(cans are believed to leach aluminium into the drink), they can also be recycled and re-used.
And, of course, they don't come with those dangerous plastic holders.
Of course, always put your trash in the bins, don't leave anything at the beach. It will almost
certainly end up in the ocean.</p>
</div>
<div class="metal-text hidden funfact">
<h3>How can you help?</h3>
<p>One of the reasons that improper metal scrap recycling can harm the ocean environment is that it
can pollute beautiful beaches, coastline and dive sites worldwide.
If we were to recycle all pieces of scrap metal that we could, rather than wasting it or loitering,
there would be less need for landfill sites.</p>
</div>
<div class="plasticwaterbottle-text hidden funfact">
<h3>How can you help?</h3>
<p> Carry a reusable bottle in your bag!
Cook more! Not only is it healthier, but making your own meals doesn’t involve takeout
containers. Buy in bulk! Yogurts, toiletries, tiny packages of
nuts—consider the product-to-packaging ratio of items you tend to buy often and select the bigger container
instead of buying several smaller ones over time.</p>
</div>
</div>
<!--- second row of waste starts -->
<div class="container-ocean">
<div class="drop-targets">
<div>
<div class="item metal" id="item" draggable="true">
<img src="assets/metal.png" alt="piece of metal" class="metal">
</div>
</div>
<div>
<div class="item plasticwaterbottle" id="item" draggable="true">
<img src="assets/plasticwaterbottle.png" alt="plasticwaterbottle" class="plasticwaterbottle">
</div>
</div>
<div>
<div>
<div class="item empty" id="item" draggable="true"></div>
</div>
</div>
</div>
</div>
<!--- second row of waste ends -->
<!--- three garbage waste bins drop containers starts -->
<div class="container">
<div class="drop-targets">
<div class="box">
<img src="assets/recycle.png" alt="green recycle bin">
</div>
<div class="box">
<img src="assets/glass.png" alt="blue glass recycle bin">
</div>
<div class="box">
<img src="assets/waste.png" alt="orange waste recycle bin">
</div>
</div>
</div>
<!--- three garbage waste bins drop containers ends -->
<div class="shell2"></div>
<div class="orangeflower"></div>
<div class="greenflower"></div>
<script src="script.js"></script>
</body>
</html>