-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
348 lines (299 loc) · 18.3 KB
/
index.html
File metadata and controls
348 lines (299 loc) · 18.3 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
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
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aquatica | Ocean Conservation & Marine Life Protection</title>
<meta name="description" content="Discover marine conservation efforts and learn how to protect endangered ocean species, coral reefs, and marine ecosystems from pollution and overfishing">
<meta name="apple-mobile-web-app-title" content="Aquatica">
<meta property="og:locale" content="en_GB">
<meta property="og:site_name" content="Aquatica">
<meta property="og:title" content="Aquatica | Ocean Conservation & Marine Life Protection">
<meta property="og:description" content="Discover marine conservation efforts and learn how to protect endangered ocean species, coral reefs, and marine ecosystems from pollution and overfishing">
<meta property="og:image" content="https://roxaski.github.io/Aquatica/assets/open_graph/og_index.jpg">
<meta property="og:image:alt" content="Aquatica | Ocean Conservation & Marine Life Protection">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://roxaski.github.io/Aquatica/">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Aquatica | Ocean Conservation & Marine Life Protection">
<meta name="twitter:description" content="Discover marine conservation efforts and learn how to protect endangered ocean species, coral reefs, and marine ecosystems from pollution and overfishing">
<meta name="twitter:image" content="https://roxaski.github.io/Aquatica/assets/open_graph/og_index.jpg">
<meta name="twitter:image:alt" content="Aquatica | Ocean Conservation & Marine Life Protection">
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
<link rel="manifest" href="./site.webmanifest">
<link rel="stylesheet" href="style.css">
<script defer src="./script.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<p>aquatica</p>
</header>
<div class="hero">
<img width="1920" height="1080" class="bg" fetchpriority="high" draggable="false"
src="./assets/index/ocean_bg_extra_large.webp"
srcset="./assets/index/ocean_bg_small.webp 480w,
./assets/index/ocean_bg_medium.webp 800w,
./assets/index/ocean_bg_large.webp 1200w,
./assets/index/ocean_bg_extra_large.webp 1920w"
sizes="100vw"
alt="green sea turtle swimming through sunlit ocean depths">
<p class="title">aquatica</p>
</div>
<main>
<section>
<div class="grid-container">
<div class="left">
<img width="1920" height="1080" fetchpriority="high" draggable="false"
src="./assets/index/great_barrier_reef_extra_large.webp"
srcset="./assets/index/great_barrier_reef_small.webp 480w,
./assets/index/great_barrier_reef_medium.webp 800w,
./assets/index/great_barrier_reef_large.webp 1200w,
./assets/index/great_barrier_reef_extra_large.webp 1920w"
sizes="(max-width: 1235px) 100vw,
50vw"
alt="australia's great barrier reef">
</div>
<div class="right">
<h1>ocean conservation</h1>
<p>The Great Barrier Reef is located in the Coral Sea, which is situated in Australia's northeastern coast. It's truly an incredible site to behold, and it's home to the world's largest collection of coral reefs.</p>
<p>Unfortunately however the Great Barrier Reef is in danger of extinction, due to changes in the waters temperatures along with poor ocean water quality, which is partly because of pollution and the many changes in our climate over the years.</p>
<p>Everyone can make a change by reducing their carbon emissions, and by being respectful of the marine life that inhabits the coral reefs.</p>
</div>
<div class="left">
<h2>Home to marine life</h2>
<p>The Great Barrier Reef is also the home of over one thousand different species of fish, as well as being home to many different species of coral.</p>
<p>Over 400 species of coral can be found at the Great Barrier Reef, and they benefit provide a variety of benefits to the environment such as providing a habitat for marine life, helping to mitigate climate change and helping to maintain water quality, by filtrating carbon monoxide.</p>
<p>As you can see this wonderful place is important to the preservation of our ocean, and you can help to make a change.</p>
</div>
<div class="right">
<img width="1920" height="1080" loading="lazy" draggable="false"
src="./assets/index/barrier_reef_fish_extra_large.webp"
srcset="./assets/index/barrier_reef_fish_small.webp 480w,
./assets/index/barrier_reef_fish_medium.webp 800w,
./assets/index/barrier_reef_fish_large.webp 1200w,
./assets/index/barrier_reef_fish_extra_large.webp 1920w"
sizes="(max-width: 1235px) 100vw,
50vw"
alt="tropical fish swimming near the great barrier reef">
</div>
</div>
</section>
<section>
<div class="banner" id="donate">
<h2>oceana</h2>
<h3>protecting the world's oceans</h3>
<p>Campaigning to restore our oceans to the way it once was, by increasing marine bio diversity and protecting our oceans for generations to come!</p>
<div class="btn">
<a target="_blank" href="https://oceana.org/resources/ways-to-give-donate-now/" aria-label="opens link to oceana donation page in new tab">donate</a>
</div>
</div>
</section>
<section>
<div class="grid-container">
<div class="left">
<img width="1920" height="1080" loading="lazy" draggable="false"
src="./assets/index/sea_turtle_extra_large.webp"
srcset="./assets/index/sea_turtle_small.webp 480w,
./assets/index/sea_turtle_medium.webp 800w,
./assets/index/sea_turtle_large.webp 1200w,
./assets/index/sea_turtle_extra_large.webp 1920w"
sizes="(max-width: 1235px) 100vw,
50vw"
alt="green sea turtle swimming through clear blue ocean water">
</div>
<div class="right">
<h2>endangered species</h2>
<p>Unfortunately many species are currently facing extinction, this is a serious issue that can and absolutely will impact our environment. Not only that but these are at risk of ceasing to completely exist.</p>
<p>Many of our oceans marine life is vital to keeping our oceans clean and thriving. They keep our oceanic ecosystem healthy and they play a vital role in supporting the oceans biodiversity. Please be aware of this and be respectful of our oceans marine life, especially the ones who are at high risk.</p>
<p>Help to keep our oceans ecosystem safe from harm.</p>
</div>
<div class="left">
<h2>the ocean's ecosystem</h2>
<p>Our oceans ecosystem is incredibly important not only to the ocean but to our world as a whole. Coral reefs are the rainforests of the oceanic world, ocean plankton that help to keep to not only marine ecology but also play a vital role in our worlds carbon and oxygen production.</p>
<p>All of the marine life plays a role in the ocean, and it's so important to keep them all safe. Sea turtles contribute to the ecosystem by spreading seeds and grazing the seagrass beds, some sharks for example transfer nutrients from deep to shallow waters which in turn helps areas that aren't has rich in nutrients.</p>
<p>Every marine life plays an important role to the oceans ecosystem.</p>
</div>
<div class="right">
<img width="1920" height="1080" loading="lazy" draggable="false"
src="./assets/index/whale_shark_extra_large.webp"
srcset="./assets/index/whale_shark_small.webp 480w,
./assets/index/whale_shark_medium.webp 800w,
./assets/index/whale_shark_large.webp 1200w,
./assets/index/whale_shark_extra_large.webp 1920w"
sizes="(max-width: 1235px) 100vw,
50vw"
alt="whale shark swimming amongst a variety of fish">
</div>
</div>
</section>
<section>
<div class="banner">
<h2>marine life</h2>
<p>These species are either vulnerable or at risk of extinction!</p>
<div class="marquee">
<div class="content">
<p>sea turtle</p>
<p>whale shark</p>
<p>dugong</p>
<p>pacific salmon</p>
<p>sea lions</p>
<p>porpoises</p>
<p>bluefin tuna</p>
<p>great white shark</p>
<p>manatee</p>
</div>
<div class="content">
<p>sea turtle</p>
<p>whale shark</p>
<p>dugong</p>
<p>pacific salmon</p>
<p>sea lions</p>
<p>porpoises</p>
<p>bluefin tuna</p>
<p>great white shark</p>
<p>manatee</p>
</div>
</div>
</div>
</section>
<section>
<div class="grid-container">
<div class="left">
<img width="1920" height="1080" loading="lazy" draggable="false"
src="./assets/index/fishing_boats_extra_large.webp"
srcset="./assets/index/fishing_boats_small.webp 480w,
./assets/index/fishing_boats_medium.webp 800w,
./assets/index/fishing_boats_large.webp 1200w,
./assets/index/fishing_boats_extra_large.webp 1920w"
sizes="(max-width: 1235px) 100vw,
50vw"
alt="variety of fishing boats">
</div>
<div class="right">
<h2>risks of overfishing</h2>
<p>Fishing is one of the worlds largest industries, and it is indeed a very important part of our lives, as fish provide a variety of nutrients, protein and omega-3. But issues start to arise when fish start to get depleted faster than they can repopulate, which can lead to a wide range of issues, which can eventually even lead to them being a part of the endangered or extinct list.</p>
<p>This causes even further issues, where boats inadvertently catch other fish that they aren't procuring which in turn get discarded, and all this can lead to issues with other population of marine life that rely on certain fish to survive and thrive.</p>
</div>
<div class="left">
<h2>ocean pollution</h2>
<p>Ocean pollution is a serious issue that affects not only marine life but us too, as it causes not only waste to wash ashore to our beaches, but it also can cause chemical pollution in the ocean, which is detrimental to us as a whole but also to all the marine that inhabit the oceans.</p>
<p>You may not know this but millions of rubbish washes ashore every year. It's important to be aware of this, so that we can not only keep our beaches safe and clean but to ensure that sea life like turtles and seals, don't get tangled up in rubbish which can cause serious harm to them.</p>
<p>Keep the beaches clean, always pick the your rubbish and put it in the bin.</p>
</div>
<div class="right">
<img width="1920" height="1080" loading="lazy" draggable="false"
src="./assets/index/beach_pollution_extra_large.webp"
srcset="./assets/index/beach_pollution_small.webp 480w,
./assets/index/beach_pollution_medium.webp 800w,
./assets/index/beach_pollution_large.webp 1200w,
./assets/index/beach_pollution_extra_large.webp 1920w"
sizes="(max-width: 1235px) 100vw,
50vw"
alt="discarded waste polluting the beach">
</div>
</div>
</section>
<section>
<div class="banner pier-margin">
<h2>make a change</h2>
<p>Only you can <a href="./index.html#donate"><span>make a change</span></a> to help our oceans ecosystem, not only from the pollution but to help preserve the oceans wildlife, it's not too late to make a difference!</p>
</div>
</section>
<div class="animations">
<div class="waves">
<svg aria-hidden="true" class="waves-svg"
viewBox="0 25 150 15" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="wave-animation" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/>
</defs>
<g class="waves-group">
<use href="#wave-animation" x="48" y="0" fill="#385964"/>
<use href="#wave-animation" x="5" y="2" fill="#123642"/>
<use href="#wave-animation" x="52" y="5" fill="#094357"/>
<use href="#wave-animation" x="50" y="7" fill="#102f39"/>
</g>
</svg>
</div>
<div class="foreground">
<img class="pier" loading="lazy" draggable="false"
src="./assets/animations/pier.webp"
alt="">
<div class="boat-container">
<img class="fishing-boat" draggable="false"
src="./assets/animations/fishing_boat.webp"
alt="">
</div>
<div class="no-fishing-container">
<img class="no-fishing" draggable="false"
src="./assets/animations/no_fishing_sign.webp"
alt="">
</div>
</div>
</div>
</main>
<footer>
<div class="section">
<h3>overview</h3>
<ul>
<li>pricing</li>
<li>services</li>
<li>career</li>
<li>press kit</li>
</ul>
</div>
<div class="section">
<h3>contact</h3>
<ul>
<li>fax</li>
<li>email</li>
<li>phone</li>
<li>contact form</li>
</ul>
</div>
<div class="section">
<h3>about</h3>
<ul>
<li>marine life</li>
<li>science</li>
<li>products</li>
<li>equipment</li>
</ul>
</div>
<div class="section">
<h3>socials</h3>
<ul>
<li>
<img loading="lazy" width="17" height="17" draggable="false"
src="./assets/icons/facebook.svg"
alt="">
facebook
</li>
<li>
<img loading="lazy" width="17" height="17" draggable="false"
src="./assets/icons/instagram.svg"
alt="">
instagram
</li>
<li>
<img loading="lazy" width="17" height="17" draggable="false"
src="./assets/icons/reddit.svg"
alt="">
reddit
</li>
<li>
<img loading="lazy" width="17" height="17" draggable="false"
src="./assets/icons/tiktok.svg"
alt="">
tik-tok
</li>
</ul>
</div>
</footer>
</div>
</body>
</html>