-
Notifications
You must be signed in to change notification settings - Fork 0
/
waters.html
290 lines (283 loc) · 21.1 KB
/
waters.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
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
<!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">
<meta name="author" content="András Laczkó">
<meta name="copyright" content="For educational purposes only">
<meta name="description" content="Some information about the aquatic biome">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Biomes</title>
<link rel="icon" type="image/x-icon" href="pictures/favicon.png">
</head>
<body id="waters">
<header>
<nav class="move" id="menu">
<ul class="navigation">
<li><a href="index.html">HOME</a></li>
<li><a href="forest.html">Forest</a></li>
<li class="active"><a href="#titleAnchorOffset">Waters</a></li>
<li><a href="desert.html">Desert</a></li>
<li><a href="form.html">SUBSCRIBE</a></li>
</ul>
</nav>
<h1>BIOMES</h1>
<div id="hamburger"></div>
</header>
<a href="#contentsAnchorOffset"><div id="backToTop"></div></a>
<div id="titleAnchorOffset"></div>
<section id="title">
<h2>WATERS</h2>
</section>
<div id="contentsAnchorOffset"></div>
<section id="contents">
<p>Oceans <span id="span1"></span><br>of the world's <br><span id="span2"></span></p>
<div>
<h2>Table of contents:</h2>
<ul>
<li><a href="#typeAnchorOffset">types of waters</a></li>
<li><a href="#inhabitantAnchorOffset">inhabitants</a></li>
</ul>
</div>
</section>
<div class="border border1"></div>
<div id="typeAnchorOffset"></div>
<section id="wrapper">
<h2 id="title1">Types of waters</h2>
<div id="button1"></div>
<div class="progress progress1"></div>
<div class="progress"></div>
<div class="progress progress3"></div>
<div id="button2"></div>
<div id="types">
<article class="type1">
<h3>Sea</h3>
<div class="text">
<p>
The sea, connected as the world ocean or simply the ocean, is the body of salty water that covers approximately 71 percent of the Earth's surface. The word sea is also used to denote second-order sections of the sea, such as the Mediterranean Sea, as well as certain large, entirely landlocked, saltwater lakes, such as the Caspian Sea.
The sea moderates Earth's climate and has important roles in the water cycle, carbon cycle, and nitrogen cycle. Humans harnessing and studying the sea have been recorded since ancient times, and evidenced well into prehistory, while its modern scientific study is called oceanography. The most abundant solid dissolved in seawater is sodium chloride. The water also contains salts of magnesium, calcium, potassium, and mercury, amongst many other elements, some in minute concentrations. Salinity varies widely, being lower near the surface and the mouths of large rivers and higher in the depths of the ocean; however, the relative proportions of dissolved salts vary little across the oceans. Winds blowing over the surface of the sea produce waves, which break when they enter the shallow water. Winds also create surface currents through friction, setting up slow but stable circulations of water throughout the oceans. The directions of the circulation are governed by factors, including the shapes of the continents and Earth's rotation (the Coriolis effect). Deep-sea currents, known as the global conveyor belt, carry cold water from near the poles to every ocean. Tides, the generally twice-daily rise and fall of sea levels, are caused by Earth's rotation and the gravitational effects of the orbiting Moon and, to a lesser extent, of the Sun. Tides may have a very high range in bays or estuaries. Submarine earthquakes arising from tectonic plate movements under the oceans can lead to destructive tsunamis, as can volcanoes, huge landslides, or the impact of large meteorites.
</p>
<p>
A wide variety of organisms, including bacteria, protists, algae, plants, fungi, and animals, live in the sea, which offers a wide range of marine habitats and ecosystems, ranging vertically from the sunlit surface and shoreline to the great depths and pressures of the cold, dark abyssal zone, and in latitude from the cold waters under polar ice caps to the colourful diversity of coral reefs in tropical regions. Many of the major groups of organisms evolved in the sea and life may have started there.
<br><br>
<a target="blank" href="https://en.wikipedia.org/wiki/Sea">(source: wikipedia)</a>
</p>
</div>
<img class="alone" src="./pictures/waters/sea.jpg" alt="sea">
</article>
<div class="type2">
<article>
<h3>Ocean</h3>
<div class="text">
<p>
The ocean (also the sea or the world ocean) is the body of salt water that covers approximately 70.8% of the surface of Earth and contains 97% of Earth's water.[1] Another definition is "any of the large bodies of water into which the great ocean is divided".[2] Separate names are used to identify five different areas of the ocean: Pacific (the largest) Atlantic, Indian, Southern (Antarctic), and Arctic (the smallest).[3][4] Seawater covers approximately 361,000,000 km2 (139,000,000 sq mi) of the planet. The ocean is the principal component of Earth's hydrosphere, and therefore integral to life on Earth. Acting as a huge heat reservoir, the ocean influences climate and weather patterns, the carbon cycle, and the water cycle.
The ocean covers ~70% of the Earth, sometimes called the "blue planet"
Oceanographers divide the ocean into different vertical and horizontal zones based on physical and biological conditions. The pelagic zone consists of the water column from surface to ocean floor throughout the open ocean. The water column is further categorized in other zones depending on depth and on how much light is present. The photic zone includes water from the surface to a depth of 1% of the surface light (about 200 m in the open ocean), where photosynthesis can occur. This makes the photic zone the most biodiverse. Photosynthesis by plants and microscopic algae (free floating phytoplankton) creates organic matter using light, water, carbon dioxide, and nutrients. Ocean photosynthesis creates 50% of the oxygen in earth's atmosphere[5]. This upper sunlit zone is the origin of the food supply which sustains most of the ocean ecosystem. Light only penetrates to a depth of a few hundred meters; the remaining ocean below is cold and dark. The continental shelf where the ocean approaches dry land is more shallow, with a depth of a few hundred meters or less. Human activity has a greater impact on the continental shelf.
</p>
<p>
Ocean temperatures depend on the amount of solar radiation reaching the ocean surface. In the tropics, surface temperatures can rise to over 30 °C (86 °F). Near the poles where sea ice forms, the temperature in equilibrium is about −2 °C (28 °F). Deep seawater temperature is between −2 °C (28 °F) and 5 °C (41 °F) in all parts of the ocean.[6] Water continuously circulates in the oceans creating ocean currents. These directed movements of seawater are generated by forces acting upon the water, including temperature differences, atmospheric circulation (wind), the Coriolis effect and differences in salinity.[7] Tidal currents originate from tides, while surface currents are caused by wind and waves. Major ocean currents include the Gulf Stream, Kuroshio current, Agulhas current and Antarctic Circumpolar Current. Collectively, currents move enormous amounts of water and heat around the globe. This circulation significantly impacts global climate and the uptake and redistribution of pollutants such as carbon dioxide by moving these contaminants from the surface into the deep ocean.
<br><br>
<a target="blank" href="https://en.wikipedia.org/wiki/Ocean">(source: wikipedia)</a>
</p>
</div>
<img class="alone" src="./pictures/waters/ocean.jpg" alt="ocean">
</article>
</div>
<div class="type3">
<article>
<h3>Freshwater</h3>
<div class="text">
<p>
Rivers, creeks, lakes, ponds, and streams are all freshwater habitats. So are wetlands like swamps, which have woody plants and trees; and marshes, which have no trees but lots of grasses and reeds. Freshwater accounts for only three percent of the world’s water. (The rest is saltwater.) But despite that tiny amount, freshwater habitats are homes for more than 100,000 species of plants and animals. Fish living in freshwater habitats have plenty of company. Snails, worms, turtles, frogs, marsh birds, mollusks, alligators, beavers, otters, snakes, and many types of insects live there too. Some unusual animals, like the river dolphin and the diving bell spider, are freshwater creatures. Plants such as algae, cattails, water lilies, and aspen and willow trees help keep the water clean by using their root systems to filter pollution and excess nutrients from the water.
</p>
<p>
Lakes are formed by different acts of nature. Many appeared after glaciers moved across Earth during the last ice age, between 12,000 and 1.8 million years ago, and left giant bowl-shaped hollows in the land that filled with rainwater and runoff. Others were created when Earth’s crust shifted, leaving grooves and ridges to catch water. And sometimes when a volcano erupts, all the magma flows out. If the land collapses into the empty crater, it leaves holes that can turn into huge lakes. Crater Lake in Oregon was made this way.
Rivers are created when melting snow or ice runs down mountains, following the grooves and channels of the land on the way to the sea—rivers always flow to an ocean. Wetlands, areas where the land is covered with water most of the time, often form in the land surrounding rivers that flood, or in areas where groundwater seeps up through the bedrock underneath the soil. Bedrock is made of different types of rocks like granite, sandstone and limestone. Water can seep through the cracks between these rocks, and it can dissolve limestone. Beavers can even create wetlands by building dams on rivers and streams.
<br><br>
<a target="blank" href="https://kids.nationalgeographic.com/nature/habitats/article/freshwater">(source: nationalgeographic)</a>
</p>
</div>
<img class="alone" src="./pictures/waters/freshwater.jpg" alt="lake">
</article>
</div>
</div>
</section>
<div class="border border2"></div>
<div id="inhabitantAnchorOffset"></div>
<section id="inhabitants">
<h3>Typical inhabitants</h3>
<div id="formContainer">
<p>Forest type:</p>
<form class="filter">
<input type="checkbox" name="variant" id="allType" value="all" checked>
<label for="allType">All</label>
<input type="checkbox" name="variant" id="variant1" value="variant1">
<label for="variant1">Sea/Ocean</label>
<input type="checkbox" name="variant" id="variant2" value="variant2">
<label for="variant2"></label>
<input type="checkbox" name="variant" id="variant3" value="variant3">
<label for="variant3">Freshwater</label>
<input type="checkbox" name="variant" id="variant4" value="variant3">
<label for="variant4"></label>
</form>
<p>Inhabitant:</p>
<form class="filter">
<input type="checkbox" id="allInhabitant" value="all" checked>
<label for="allInhabitant">All</label>
<input type="checkbox" id="animalInhabitant" value="animal">
<label for="animalInhabitant">Animal</label>
<input type="checkbox" id="plantInhabitant" value="plant">
<label for="plantInhabitant">Plant</label>
</form>
</div>
<div id="cardWrapper">
<div id="cardContainer">
<div class="variant1 animal card visible">
<figure>
<figcaption>Shark</figcaption>
<p>sea/ocean</p>
<img src="./pictures/waters/shark.jpg" alt="shark">
<a target="blank" href="https://en.wikipedia.org/wiki/shark" class="more">Learn more</a>
</figure>
</div>
<div class="variant1 animal card visible">
<figure>
<figcaption>Seahorse</figcaption>
<p>sea/ocean</p>
<img src="./pictures/waters/seahorse.jpg" alt="seahorse">
<a target="blank" href="https://en.wikipedia.org/wiki/seahorse" class="more">Learn more</a>
</figure>
</div>
<div class="variant1 animal card visible">
<figure>
<figcaption>Starfish</figcaption>
<p>sea/ocean</p>
<img src="./pictures/waters/starfish.jpg" alt="starfish">
<a target="blank" href="https://en.wikipedia.org/wiki/starfish" class="more">Learn more</a>
</figure>
</div>
<div class="variant1 plant card visible">
<figure>
<figcaption>Anemone</figcaption>
<p>sea/ocean</p>
<img src="./pictures/waters/anemone.jpg" alt="anemone">
<a target="blank" href="https://en.wikipedia.org/wiki/anemone" class="more">Learn more</a>
</figure>
</div>
<div class="variant1 plant card visible">
<figure>
<figcaption>Coral</figcaption>
<p>sea/ocean</p>
<img src="./pictures/waters/coral.jpg" alt="coral">
<a target="blank" href="https://en.wikipedia.org/wiki/coral" class="more">Learn more</a>
</figure>
</div>
<div class="variant1 plant card visible">
<figure>
<figcaption>Kelp</figcaption>
<p>sea/ocean</p>
<img src="./pictures/waters/kelp.jpg" alt="kelp">
<a target="blank" href="https://en.wikipedia.org/wiki/kelp" class="more">Learn more</a>
</figure>
</div>
<div class="variant1 animal card visible">
<figure>
<figcaption>Whale</figcaption>
<p>sea/ocean</p>
<img src="./pictures/waters/whale.jpg" alt="whale">
<a target="blank" href="https://en.wikipedia.org/wiki/whale" class="more">Learn more</a>
</figure>
</div>
<div class="variant1 animal card visible">
<figure>
<figcaption>Jellyfish</figcaption>
<p>sea/ocean</p>
<img src="./pictures/waters/jellyfish.jpg" alt="jellyfish">
<a target="blank" href="https://en.wikipedia.org/wiki/jellyfish" class="more">Learn more</a>
</figure>
</div>
<div class="variant1 animal card visible">
<figure>
<figcaption>Ray</figcaption>
<p>sea/ocean</p>
<img src="./pictures/waters/ray.jpg" alt="ray">
<a target="blank" href="https://en.wikipedia.org/wiki/Batoidea" class="more">Learn more</a>
</figure>
</div>
<div class="variant1 plant card visible">
<figure>
<figcaption>Phytoplankton</figcaption>
<p>sea/ocean</p>
<img src="./pictures/waters/phytoplankton.jpg" alt="phytoplankton">
<a target="blank" href="https://en.wikipedia.org/wiki/phytoplankton" class="more">Learn more</a>
</figure>
</div>
<div class="variant3 animal card visible">
<figure>
<figcaption>Duck</figcaption>
<p>freshwater</p>
<img src="./pictures/waters/duck.jpg" alt="duck">
<a target="blank" href="https://en.wikipedia.org/wiki/duck" class="more">Learn more</a>
</figure>
</div>
<div class="variant3 animal card visible">
<figure>
<figcaption>Otter</figcaption>
<p>freshwater</p>
<img src="./pictures/waters/otter.jpg" alt="otter">
<a target="blank" href="https://en.wikipedia.org/wiki/otter" class="more">Learn more</a>
</figure>
</div>
<div class="variant3 animal card visible">
<figure>
<figcaption>Crocodile</figcaption>
<p>freshwater</p>
<img src="./pictures/waters/crocodile.jpg" alt="crocodile">
<a target="blank" href="https://en.wikipedia.org/wiki/crocodile" class="more">Learn more</a>
</figure>
</div>
<div class="variant3 plant card visible">
<figure>
<figcaption>Reed</figcaption>
<p>freshwater</p>
<img src="./pictures/waters/reed.jpg" alt="reed">
<a target="blank" href="https://en.wikipedia.org/wiki/reed_(plant)" class="more">Learn more</a>
</figure>
</div>
<div class="variant3 plant card visible">
<figure>
<figcaption>Duckweed</figcaption>
<p>freshwater</p>
<img src="./pictures/waters/duckweed.jpg" alt="duckweed">
<a target="blank" href="https://en.wikipedia.org/wiki/duckweed" class="more">Learn more</a>
</figure>
</div>
<div class="variant3 plant card visible">
<figure>
<figcaption>Bulrush</figcaption>
<p>freshwater</p>
<img src="./pictures/waters/bulrush.jpg" alt="bulrush">
<a target="blank" href="https://en.wikipedia.org/wiki/bulrush" class="more">Learn more</a>
</figure>
</div>
</div>
</div>
</section>
<footer>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="forest.html">Forest</a></li>
<li><a href="#titleAnchorOffset">Waters</a></li>
<li><a href="desert.html">Desert</a></li>
<li><a href="form.html">SUBSCRIBE</a></li>
</ul>
<p>© 2021 András Laczkó</p>
<div id="attribution">Icons made by <a href="https://www.flaticon.com/authors/freepik" target="blank" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
</footer>
<script src="app.js" defer></script>
</body>
</html>