-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
212 lines (201 loc) · 16.8 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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ZooPOP || Home</title>
<!-- * font awesome 6 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- * google fonts -->
<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=Josefin+Sans:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&display=swap" rel="stylesheet">
<!-- * style -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- * header content -->
<header id="header">
<!-- * navbar -->
<nav class="navbar navbar-expand-lg bg-black bg-opacity-50 fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">ZooPOP</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-grow-0" id="navbarToggler">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="data.html">Data</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Games
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="quiz.html">Quiz</a></li>
<li><a class="dropdown-item" href="aquarium.html">Aquarium</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="resources.html">Resources</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- * main content -->
<main>
<!-- * hero -->
<div id="carouselZooplankton" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselZooplankton" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselZooplankton" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselZooplankton" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselZooplankton" data-bs-slide-to="3" aria-label="Slide 4"></button>
<button type="button" data-bs-target="#carouselZooplankton" data-bs-slide-to="4" aria-label="Slide 5"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/chaetognath.jpg" class="d-block w-100" alt="chaetognath">
<div class="carousel-caption d-none d-md-block">
<h5>Chaetognath</h5>
<p>There are about 200 species of chaetognaths. These are worm-like organisms also known as "arrow worms". They can be as small as the edge of a dime or as long as your standard pencil.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/cladoceran.jpg" class="d-block w-100" alt="cladoceran">
<div class="carousel-caption d-none d-md-block">
<h5>Cladocera</h5>
<p>There are about 700 species of cladocera, only 8 of which have adapted to living in the ocean. These creatures are also known as "water fleas". They can be as small as the edge of a business card and can be about as large as the width of a standard pencil.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/copepods.jpg" class="d-block w-100" alt="copepods">
<div class="carousel-caption d-none d-md-block">
<h5>Copepods</h5>
<p>There are nearly 15,000 species of copepods! They can be found in nearly every body of water around the world. They can be as tiny as the edge of a single sheet of paper or just short of the length of a peanut.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/larvacean.jpg" class="d-block w-100" alt="larvaceans">
<div class="carousel-caption d-none d-md-block">
<h5>Larvacean</h5>
<p>There are about 70 species of larvacea, also known as appendicularia. The bulbous end of larvacea called the "house" is secreted and lived in by the actual animal. Larvacea can be as small as the sharpened tip of a pencil or as long as the width of a peach.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/luciferidae.jpg" class="d-block w-100" alt="luciferidae">
<div class="carousel-caption d-none d-md-block">
<h5>Luciferidae</h5>
<p>There are only 7 species of luciferidae. They are know for their bioluminescence. These are commonlay less than the size of the tip of a pencil.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselZooplankton" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselZooplankton" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<h1 class="text-center">Zooplankton Populations</h1>
<!-- * general information on zooplankton -->
<div id="generalInfo" class="container">
<img src="images/Plankton-stock-art.png" alt="plankton from spongebob" class="float-start d-none d-md-block">
<h2>What in the world are zooplankton?</h2>
<p>You might have heard of plankton, the name of a character in the popular cartoon Spongebob. There are two types of plankton, phytoplankton and zooplankton. The "plankton" in zooplankton is a Greek word meaning "drifter," and "zoo" comes from the Greek word meaning animal. The "phyto" in phytoplankton comes from the Greek word "fyton," meaning "plant." Together, zooplankton means "animal drifter," and phytoplankton means "plant drifter," which are broad but accurate terms. Zooplankton are tiny animals that drift in water, wherever that may take them. While they do have some ability to move on their own in the space of water they occupy, they are largely moved and affected by their environment.</p>
<p>Zooplankton can be found in bodies of water all around the world, including freshwater and saltwater environments. If there is a body of water, there are likely zooplankton living inside.</p>
</div>
<!-- * information on zooplankton importance -->
<div id="importance" class="container">
<h2>Why are Zooplankton important?</h2>
<p>There are four things that make zooplankton super important:</p>
<ul>
<li>They consume carbon-rich organic matter like algae</li>
<li>They are a food source for lots of aquatic animals</li>
<li>They make great indicators of ecosystem health</li>
<li>They are very diverse!</li>
</ul>
<img src="images/zooplankton-carbon-cycle.png" alt="" class="float-end w-50 d-none d-md-block">
<p>Even though this site focuses on zooplankton, let us take a moment to touch on phytoplankton. Phytoplankton are tiny plants similar in size or smaller than the examples of zooplankton above. Like other plants, phytoplankton, despite their size, absorb much carbon! Zooplankton plays an essential role in the carbon cycle by <strong>consuming the phytoplankton directly or other zooplankton</strong> that consume carbon-rich phytoplankton. Like many animals, while they are digesting, they fart and poop! The excretion of waste from zooplankton releases carbon dioxide into the water, which phytoplankton and other plants can consume. The poop sinks to the sea floor, bringing essential nutrients and removing carbon from surface water.</p>
<p><strong>Many animals rely on zooplankton, including us humans.</strong> Animals like fish, birds, jellyfish, other zooplankton, and even whales survive on zooplankton as either part of their diet or as their primary food source. The importance of the food web that zooplankton provide should make their populations especially important to us humans. Humans worldwide thrive off of the fish and other aquatic creatures that exist mainly due to the presence of zooplankton. For example, many places survive off the ecotourism of blue and humpback whales, squid, herring, anchovies, and sardines serve as protein sources for human consumption. Another example is krill which are harvested and used in a variety of products like supplements as well as feed for fish farms.</p>
<p>Zooplankton also makes for <strong>significant indicators of ecosystem health because they are susceptible and responsive to environmental changes.</strong> Zooplankton is a broad term that includes many different types of organisms. Each organism labeled as "zooplankton" reacts differently to environmental factors such as temperature, salinity, and acidity. Some are more resistant to salt, while others are more resistant to heat. The species selected for analyzing a water ecosystem's health might change depending on freshwater or salt water, hot water or cold water, and surface water or deep water. An example would be planktonic sea snails which are very sensitive to the acidification of water, so their lack of presence or decrease in abundance in a body of water where they usually are successful as a species is an indicator of an increase in the acidity of that body of water.</p>
</div>
<!-- * accordian with details on carousel zooplankton -->
<div id="accordian-container" class="container">
<h2>Want to know more about the zooplankton shown at the top of this page?</h2>
<div class="accordion" id="accordionZooplankton">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h3>Chaetognath</h3>
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionZooplankton">
<div class="accordion-body">
There are about 200 species of chaetognaths. They are long and thin and are also called "arrow worms." Their common name comes from how they look, but their scientific name is because of their hooked set of jaws that stick out of their mouth. Chaetognaths are carnivorous and typically feed on copepods though can feed on crustaceans and small fish. They can be found in oceans and estuaries around the world including colder and hotter waters. They can be as small as the edge of a dime or as long as your standard pencil and tend to be transparent, though some chaetognaths that live deeper in the ocean can appear orange and some can be more opaque because of their muscles. Almost a fifth of chaetognath species live just above the ocean floor. Species of chaetognath that live in colder waters typically have a longer life expectancy of about two years where tropical chaetognaths have a life expectancy of about six weeks.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h3>Cladocera</h3>
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionZooplankton">
<div class="accordion-body">
There are over 700 species of cladocera. In freshwater ecosystems, the cladocera is king, being the most successful and one of the most common zooplankton in the environment. Only eight species of cladocera have adapted to living in saltwater environments. In freshwater and saltwater ecosystems, cladocera are mostly crawlers or burrowers, living close to the floor of the sea or lakes that they are found in. Species of cladocera that fall under the moina genus are known for suriving in environments with low oxygen, high salinity, and even eutrophicated water. While most cladocera feed on phytoplankton, there are some that specifically feed on other cladocera. Cladocera are also considered an invasive species in the great lakes of North America.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h3>Copepods</h3>
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionZooplankton">
<div class="accordion-body">
There are nearly 15,000 species of copepods. Copepods are crustaceans that can be found in almost every body of water around the world, including water with very high and very low levels of salinity. They also don't seem to care if the water is of high or low elevation, exposed to sunlight or not, or if they exist at surface level or closer to the floor. They can even live in extremely cold arctic waters or boiling hot waters in active underwater volcanic vents! They can be as tiny as the edge of a single sheet of paper or just short of the length of a peanut.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
<h3>Larvacean</h3>
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#accordionZooplankton">
<div class="accordion-body">
There are about 70 species of larvacea or appendicularia and can be found in every ocean on Earth. Larvacea have one key component to the species which is the bulbous end of their very long body and tail known as the "house." The creature itself secretes the house around it and lives within. The house is used also as a trap to catch prey by filtering water like a pump through their tail. Only five species of larvacea live close to the sea floor.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<h3>Luciferidae</h3>
</button>
</h2>
<div id="collapseFive" class="accordion-collapse collapse" data-bs-parent="#accordionZooplankton">
<div class="accordion-body">
There are only seven known species of luciferidae. Luciferidae are a type of prawn known for their bioluminescence though some can appear orange closer to the sea floor. They are commonly less than the size of the tip of a pencil. They can be found in almost every ocean in the world, but not much research can be found on this type of zooplankton. Perhaps you will be the next scientist to discover more about this unique zooplankton?
</div>
</div>
</div>
</div>
</div>
</main>
<!-- * bootstrap js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>