-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
159 lines (140 loc) · 7.74 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="./styles/index.css" />
<script defer src="script.js"></script>
<title>main__goal 14</title>
</head>
<body>
<main class="main__goal">
<div id="flip-phone-message">
Please flip your phone to landscape mode for a better experience.
</div>
<section>
<div class="section__image-container">
<h1>The Ocean's Journey: From Beauty to Devastation and Back Again</h1>
<img src="images/waves.png" class="image-container__waves" alt="waves">
</div>
</section>
<section>
<div class="section__image-container">
<div class="image-container__fish--scene1"><img src="images/scene1-fish-big.png"></div>
<div class="image-container__splash--scene1"><img src="images/scene1-splash.png"></div>
<div class="image-container__dolphin--scene1"><img src="images/scene1-dolphin.png"></div>
<div class="image-container__brownfish--scene1"><img src="images/scene1-brownfish.png"></div>
<div class="image-container__bluefish--scene1"><img src="images/blue-fish.png"></div>
<div><img src="images/scene3-fish-swimming.png" class="image-container__fish--image-container__scene34 image-container__fish--scene1-swimmer" alt="fish swimming"></div>
<img class="image-container__crab" src="images/crab.png" alt="cute crab">
<img src="images/waves.png" class="image-container__waves" alt="waves">
<p>
The ocean is vast and bountiful, full of life, critters and creatures.
</p>
</div>
</section>
<section>
<div class="section__image-container">
<div class="image-container__ship--scene2"><img src="images/scene2-ship.png"></div>
<div class="image-container__chemspill--scene2"><img src="images/pollution.png"></div>
<div class="image-container__bigfishdead--scene2"><img src="images/scene2-bigfishdead.png"></div>
<div class="image-container__bluefishdead--scene2"><img src="images/scene2-bluefishdead.png"></div>
<div class="image-container__fish1--scene2"><img src="images/scene2-fish1.png"></div>
<div class="image-container__fish2--scene2"><img src="images/blue-fish.png"></div>
<img src="images/crab.png" class="image-container__crab" alt="cute crab">
<img src="images/waves.png" class="image-container__waves" alt="ocean waves">
<p>
However, with the advancement of industry and technology, large corporations have used the once beautiful
ocean as a quick and easy way to dump waste.
</p>
</div>
</section>
<section>
<div class="section__image-container">
<div class="image-container__scene3">
<div class="boats">
<img src="images/scene3-boat-big.png" class="image-container__image-container__boat--scene3" alt="big boat">
<img src="images/scene3-boat-small.png" class="image-container__image-container__boat--scene3" alt="small boat">
</div>
<div class="pollution">
<img src="images/pollution.png" class="image-container__image-container__pollution--scene34" alt="nasty green pollution">
<img src="images/pollution.png" class="image-container__image-container__pollution--scene34" alt="nasty green pollution">
</div>
<div class="trash">
<img src="images/trash-bag.png" class="image-container__image-container__trash--scene34" alt="trash bag">
<img src="images/trash-cup.png" class="image-container__image-container__trash--scene34" alt="trash thing">
</div>
<div class="fish">
<img src="images/scene3-fish-swimming.png" class="image-container__fish--image-container__scene34" alt="fish swimming">
<img src="images/scene2-bigfishdead.png" class="image-container__fish--image-container__scene34" alt="dead fish">
<img src="images/scene3-fish-stranded.png" class="image-container__fish--image-container__scene34" alt="stranded fish">
</div>
<img src="images/waves.png" class="image-container__waves" alt="ocean image-container__waves">
<p>
As the pollution continues, the ocean becomes uninhabitable for the sea creatures. Some die while others
leave.
</p>
</div>
</div>
</section>
<section>
<div class="section__image-container">
<div class="scene4">
<img src="images/scene3-boat-small.png" class="image-container__boat--scene4" alt="small boat">
<div class="pollution">
<img src="images/pollution.png" class="image-container__image-container__pollution--scene34" alt="nasty green pollution">
<img src="images/pollution.png" class="image-container__image-container__pollution--scene34" alt="nasty green pollution">
</div>
<div class="trash">
<img src="images/trash-bag.png" class="image-container__image-container__trash--scene34" alt="trash bag">
<img src="images/trash-cup.png" class="image-container__image-container__trash--scene34" alt="trash cup">
</div>
<div class="fish">
<img src="images/scene3-fish-swimming.png" class="image-container__fish--image-container__scene34" alt="fish swimming">
<img src="images/scene2-bigfishdead.png" class="image-container__fish--image-container__scene34" alt="dead fish">
<img src="images/scene3-fish-stranded.png" class="image-container__fish--image-container__scene34" alt="stranded fish">
</div>
<img src="images/man-cleaning.png" class="scene4-guy" alt="guy cleaning the beach">
<img src="images/waves.png" class="image-container__waves" alt="ocean waves">
<p>
Noticing the poor state of the ocean, some people start working to combat the pollution.
</p>
</section>
<section>
<div class="section__image-container">
<div class="scene5">
<div class="scene5-fish"><img src="images/scene5-fish.png"></div>
<div><img src="images/scene3-fish-swimming.png" class="image-container__fish--image-container__scene34" alt="fish swimming"></div>
<div class="scene5-boat"><img src="images/boat.png"></div>
<div class="scene5-woman"><img src="images/woman-cleaning.png"></div>
<div class="scene5-man"><img src="images/man-cleaning.png"></div>
<div class="scene5-green-puddle"><img src="images/pollution.png"></div>
<div class="scene5-bag"><img src="images/trash-bag.png"></div>
<div class="scene5-cup"><img src="images/trash-cup.png"></div>
<img src="images/crab.png" class="image-container__crab" alt="cute crab">
<img src="images/waves.png" class="image-container__waves" alt="ocean waves">
</div>
<p>
This, in turn inspires others to help.
</p>
</div>
</section>
<section>
<div class="section__image-container">
<div class="scene6">
<div class="scene6-orange-fish"><img src="images/scene5-fish.png"></div>
<div class="scene6-blue-fish"><img src="images/blue-fish.png"></div>
<div class="scene6-image-container__crab"><img src="images/crab.png"></div>
<img src="images/waves.png" class="image-container__waves" alt="ocean waves">
</div>
<p>
The damage to the ocean has been severe and we can't fully restore it to how it was, but
through hard work and determination we can get it to a much better state than it currently
is in.
</p>
</div>
</section>
</main>
</body>
</html>