-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathcontent_ST4.html
More file actions
256 lines (240 loc) · 14.2 KB
/
content_ST4.html
File metadata and controls
256 lines (240 loc) · 14.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Life Below Water - Marine Ecosystems</title>
<link rel="icon" type="image/x-icon" href="images/global/favicon.ico">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/content.css">
<style>
.hero-section {
background: url("images/content/marine_ecosystem_1.jpeg") no-repeat center center/cover;
position: relative;
background-attachment: fixed;
color: rgb(255, 255, 255);
text-align: center;
padding: 10% 0;
}
</style>
</head>
<body>
<!-- Main Navigation Bar -->
<header class="main-nav">
<div class="nav-top">
<div class="logo">
<a href="home.html">
<img src="images/global/logo.png" alt="TECHASTRIS">
</a>
</div>
<div class="hamburger-menu" id="hamburger-menu">☰</div>
<nav id="nav-links">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="home.html#gallery">Overview</a></li>
<li><a href="volunteer.html">Volunteer</a></li>
<li><a href="teampage.html">Team</a></li>
<li><button id="search-expand">🔍</button></li>
</ul>
</nav>
</div>
<a href="profile.html"><img src="images/global/profile_icon.ico" alt="profile" class="profile-icon"></a>
<button id="themeToggle" class="theme-button"></button>
<!-- Search Bar (Hidden Initially) -->
<div class="search-container" id="search-bar">
<input type="text" placeholder="Search">
<button id="search-btn">Search</button>
<button id="close-search">✖</button>
</div>
</header>
<!-- Hero Section -->
<div class="hero-section">
<div class="hero-section-text">
<div class="heading-section">
<h1 id="heading">Marine Ecosystems</h1>
</div>
</div>
</div>
<button class="toggle-btn">☰</button>
<div class="side-navbar">
<h3>Quick Links</h3>
<ul>
<li><a href="#Topic_1">What are Marine Ecosystems?</a></li>
<li><a href="#Topic_2">Types of Marine Ecosystems</a></li>
<li><a href="#Topic_3">Importance of Marine Ecosystems</a></li>
<li><a href="#Topic_4">Marine Food Chains and Webs</a></li>
<li><a href="#">Back to Top</a></li>
</ul>
</div>
<div id="content">
<div class="container">
<h2 id="Topic_1" class="section">What are Marine Ecosystems ?</h2>
<p>Marine ecosystems are vast ever-changing worlds full of life, mystery, and breathtaking beauty. They
include the deep shadowy trenches in the ocean where monsters stray, brilliant color-laden coral reefs,
and the sunlit coastal waters that embrace life at the interface of land and sea. Unlike freshwater
ecosystems, mortal marine inky climate is influenced by powerful tides, changing currents, and the
sea's salt-laden embrace, forming an environment for an extraordinary array of organisms.
<br><br>
These ecosystems act as life-support systems for the planet—not only because they are important
habitats for marine life, but also because they regulate the climate of Earth, provide oxygen, and
absorb carbon dioxide. From the barely seen microscopic plankton building in the currents to the
majestic whales gliding through the depths, marine ecosystems form the basis for a delicate woven
web of life that sustains not only other life beneath the waves but also those that live well away
from the shores.
<br><br>
<img src="images/content/marine_ecosystem_2.jpeg" alt="Introduction">
</p>
<h2 id="Topic_2" class="section">Types of Marine Ecosystems</h2>
<p>The marine world is incredibly diverse, home to a variety of ecosystems, each filled with unique life
forms and playing a crucial role in the ocean’s delicate balance.
<br><br>
<b>🐳Oceans – The Endless Blue</b><br>
The vast, open ocean stretches across the globe, like an unbroken sapphire sheet, covering more than
70% of the surface of Earth,This ocean is divided into a number of layers, each standing for entirely
separate worlds.While sailing on the surface of the ocean are a shoal of fish, the playful dolphins,
and birds, down in the mysterious and dark waters hide such oddities as luminescent anglerfish and
giant squid.
<br><br>
<b>🪸Coral Reefs – The Underwater Cities</b><br>
Coral reefs, often called the "rainforests of the sea," are remarkable and complex constructions
created by minute coral polyps and something that was gleaming for centuries. In this bright ecosystem,
sea turtles swim in beauty among the amazing structures of coral, clownfish dash among the anemones,
and reef sharks patrol the water, keeping the delicate balance of life.
<br><br>
<b>🌊Estuaries – The Cradle of the Sea</b><br>
Wherever in this world, the places where freshwater rivers meet the salty embrace of the ocean are the
estuaries,nurturing habitats .Here brackish waters are bustling nurseries where young fish, shrimp,
and crabs find shelter before venturing into the ocean .The mix of salt- and freshwater creates a
nutrient-rich environment, thus making estuaries one of the most productive ecosystems on Earth.
<br><br>
<b>🌱Mangrove Forests – Guardians of the Shore</b><br>
With their twisted roots emerging from the water like old guardians, mangrove forests grow along
tropical coastlines, protecting the land from erosion and storms. These trees tolerate salt, forming
dense, tangled forests that hide young marine life, from small fishes to wading birds, and endangered
species such as sea turtles and manatees.
<br><br>
<b>🪼Deep-Sea Ecosystems – The Twilight Abyss</b><br>
Out of reach of sunlight, where pressure alone could crush a human in an instant, the deep-sea world is
mixed up in so many mysteries. Ghostly gulper eels and bioluminescent jellyfish float through the black,
while great tube worms cluster around hydrothermal vents, drawing energy not from the sun, but from the
fiery core of the Earth.
<br><br>
Each of these ecosystems is a world within a world, filled with life, struggle, and survival, all
connected in a delicate balance that keeps the ocean alive.
<br><br>
<img src="images/content/marine_ecosystem_3.jpeg" alt="Physical Adaptations">
</p>
<h2 id="Topic_3" class="section">Importance of Marine Ecosystems</h2>
<p>Marine ecosystems are more than just breathtaking landscapes beneath the waves, they are the very
heartbeat of our planet. Their importance is woven into every aspect of life on Earth:
<br><br>
<b>🌏The Planet's Breath</b><br>
Marine ecosystems produce over 50% of the oxygen we breathe. These microscopic life forms, tiny and
invisible, float on the ocean's surface, and they use sunlight and carbon dioxide to produce oxygen
that fills the air. Without phytoplankton, life as we know it would not exist, given the tiny size of
these life forms.
<br><br>
<b>❄️A Climate Regulator</b><br>
The ocean works like the air conditioner for the Earth—it absorbs immense amounts of heat and CO2 to
help keep the Earth's temperature in check. Yet as climate change speeds up, the complexities of the
system are now at risk. This is leading to sea-level rise, stronger storms, and dislocations of marine
life.
<br><br>
<b>🍽️A Source of Life and Livelihood</b><br>
For billions, the sea creates a link to food, a sustenance of jobs, and economic viability. From the
fish markets of coastal towns to deep-sea fisheries supplying the world, marine ecosystems form the
backbone of global food security. These marine-derived compounds are being researched as possible
life-saving medicines, including cancer treatments and antibiotics.
<br><br>
<b>🏝️Nature’s Shield</b><br>
Coastal ecosystems that serve as natural barriers, such as seagrass meadows, mangroves, and coral reefs,
shield shorelines from erosion, tsunamis, and storm surges. Coastal settlements would be far more
susceptible to the forces without them of the natural world.
<br><br>
Despite their immense importance, marine ecosystems face growing threats from overfishing, pollution,
and clmate change. Their health is our health, making conservation efforts more urgent than ever.
<br><br>
<img src="images/content/marine_ecosystem_4.jpeg" alt="Behavioral Adaptations">
</p>
<h2 id="Topic_4" class="section">Marine Food Chains and Webs</h2>
<p>Beneath the rolling waves, an intricate dance of life and survival plays out in the form of marine food
chains and webs.
<br><br>
<b>🔆The Sunlit Foundation – Producers</b><br>
At the base of the marine food chain are the producers, microscopic phytoplankton that float freely in
the water, absorbing sunlight and using photosynthesis to create energy. These tiny plants are the
primary source of food for countless marine creatures and serve as the backbone of the ocean’s
ecosystem.
<br><br>
<b>🦐The Grazers – Primary Consumers</b><br>
Zooplankton are tiny, floating organisms that consume phytoplankton and transform its energy into a
form that larger species can use. This level also includes tiny fish, shrimp, and krill, which serve
as an essential conduit between the larger predators and the microscopic world.
<br><br>
<b>🦑The Predators – Secondary Consumers</b><br>
Fish that swim quickly, such as mackerel, squid, and jellyfish, maintain the balance of populations
by feeding on smaller animals. They serve as a link between the top hunters in the ocean and the
small grazers.
<br><br>
<b>🦈The Ocean’s Apex Predators</b><br>
Top of the food webs are sharks, orcas, and gigantic squids, and these animals are said to be the most
excellent in the kingdom. These top predators control the marine population so that one single species
does not dominate it and cause an imbalance in the ecosystem.
<br><br>
<b>🌐The Web of Life</b>
Marine ecosystems differ from simple food chains; they consist of complex food webs, where different
species interact with one another in a complicated manner. In a life cycle, a fish is often abused by
different predators. A single species can eventually trigger the decline of the whole ecosystem after
being over-fished or destroyed habitat-wise.
<br><br>
This fragile balance is what keeps the ocean alive, making every creature — from the tiniest plankton to
the largest whale — an essential part of this vast, interconnected world.
<br><br>
<img src="images/content/marine_ecosystem_5.jpeg" alt="Physiological Adaptations">
</p>
</div>
</div>
<!-- Footer Section -->
<footer class="footer">
<a href="https://sdgs.un.org/" target="_blank">
<div class="image-container">
<img src="images/global/image.png" alt="Image 1">
<img src="images/global/logo2.png" alt="Image 2">
</div>
</a>
<!-- Accessibility Links in the center -->
<div class="links">
<a href="home.html">HOME</a>
<a href="about.html">ABOUT US</a>
<a href="home.html#gallery">OVERVIEW</a>
<a href="volunteer.html">VOLUNTEER</a>
<a href="teampage.html">TEAM</a>
<a href="sitemap.html">SITEMAP</a>
<a href="feedback.html">FEEDBACK</a>
<a href="https://sdgs.un.org/goals/goal14" target="_blank">SDG</a>
</div>
<!-- Line below the links -->
<hr>
<!-- Bottom sections -->
<div class="bottom-text">
<div class="membership">
<a href="table.html">Membership</a>
</div>
<div class="extra-links">
<a href="#" onclick="redirect('Kevin')" class="btn">Kevin</a>
<a href="#" onclick="redirect('Avaneesh')" class="btn">Avaneesh</a>
<a href="#" onclick="redirect('Pangajan')" class="btn">Pangajan</a>
<a href="#" onclick="redirect('Imayuru')" class="btn">Imayuru</a>
</div>
<div class="copyright">
<p>© 2025 TECHASTRIS.</p>
</div>
</div>
</footer>
<!-- JavaScript Files -->
<script src="js/nav-search.js"></script>
<script src="js/side-bar.js"></script>
<script src="js/redirect.js" defer></script>
</body>
</html>