Web-Page/content_ST1.html at main · AvaneeshKesavan/Web-Page · GitHub

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
<!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 - Conservation and Sustainability</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 with fixed parallax effect */
      .hero-section {
        background: url("images/content/c1background.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>
      <!-- Profile icon linking to user profile -->
      <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 with page title -->
    <div class="hero-section">
      <div class="hero-section-text">
        <div class="heading-section">
          <h1 id="heading">Conservation and Sustainability</h1>
        </div>
      </div>
    </div>

    <!-- Side Navigation Bar for quick access to sections -->
    <button class="toggle-btn">☰</button>
    <div class="side-navbar">
      <h3>Quick Links</h3>
      <ul>
        <li><a href="#introduction">Introduction</a></li>
        <li><a href="#sustainable-fishing">Sustainable Fishing</a></li>
        <li><a href="#mpa">MPA and Habitat Conservation</a></li>
        <li><a href="#conclusion">Conclusion</a></li>
        <li><a href="#">Back to Top</a></li>
      </ul>
    </div>

    <!-- Main Content Section -->
    <div id="content">
      <div class="container">
        <h2 id="introduction" class="section">Introduction</h2>
        <p>
          Healthy oceans are critical to sustaining life on Earth. They cover
          70% of our planet and we rely on them for food, energy and water. Yet,
          we have managed to do tremendous damage to these precious resources.
          Today, our oceans face growing threats from pollution, overfishing,
          habitat destruction, and climate change. Plastic waste contaminates
          marine environments, endangering wildlife, while rising ocean
          temperatures and acidification threaten coral reefs and coastal
          communities. Unregulated fishing practices have depleted fish
          populations, disrupting the delicate balance of marine ecosystems.
          <br />
          The good news is that we are still not too late to make a change.
          Through conservation efforts, sustainable policies, and
          community-driven initiatives, we can reverse some of the damage and
          ensure the long-term health of our marine ecosystems.
          <br />
          <br />
          organizations such as the United Nations have launched numerous global
          programs to safeguard the oceans. These initiatives involve
          governments, scientists, and volunteers, working together to combat
          pollution, promote sustainable fishing, expand marine protected areas,
          and raise awareness about ocean conservation.
          <a href="pageEditor_ST1.html#ref-martin-2023">(Martin, 2023)</a>
          <br />
          <br />
          <img src="images/content/conservation_1.jpg" alt="Introduction" />
        </p>

        <h2 id="sustainable-fishing" class="section">Sustainable Fishing</h2>
        <p>
          Overfishing is one of the most pressing threats to marine biodiversity
          and the overall health of our oceans. Unsustainable fishing practices,
          such as bottom trawling, illegal fishing, and excessive bycatch, have
          led to the rapid depletion of fish populations and the widespread
          destruction of critical marine habitats. These harmful methods not
          only disrupt ocean ecosystems but also threaten the livelihoods of
          coastal communities that rely on fishing for sustenance and economic
          stability.
          <a href="pageEditor_ST1.html#ref-igini-2024"> (Igini, 2024) </a>
          <br /><br />
          To address this issue, sustainable fishing practices have been
          implemented to ensure the long-term health of our oceans and marine
          ecosystems. Sustainable fishing involves using methods that minimize
          environmental impact, reduce bycatch, and protect vulnerable species.
          By adopting sustainable fishing practices, we can help restore fish
          populations, protect marine habitats, and promote the health of our
          oceans.
          <br /><br />
          Education and awareness play a crucial role in advancing sustainable
          fishing among fishermen, consumers, and policymakers. Only by raising
          awareness about the importance of sustainable fishing and the threats
          facing our oceans can we create considerable change.
          <br /><br />
          <img
            src="images/content/conservation_2.jpg"
            alt="Sustainable Fishing"
          />
        </p>

        <h2 id="mpa" class="section">
          Marine Protected Areas and Habitat Conservation
        </h2>
        <p>
          While sustainable fishing practices are essential for protecting fish
          populations and marine habitats in the long term, marine protected
          areas (MPAs) are also crucial for safeguarding marine biodiversity and
          preserving critical habitats facing destruction. MPAs are designated
          areas of ocean where human activities are restricted to protect marine
          life and habitats. These areas serve as sanctuaries for marine
          species, allowing them to thrive and reproduce without the threat of
          overfishing, pollution, or habitat destruction.
          <br /><br />
          Several such areas have been established in locations such as the
          Great Barrier Reef, the Galapagos Islands, and the Florida Keys to
          protect coral reefs, seagrass beds, and other critical marine
          ecosystems. <a href="ref-encounter-edu-2019">(Encounter edu, 2019)</a>
          <br /><br />
          <img
            src="images/volunteer/barrier_reef.jpg"
            alt="Behavioral Adaptations"
          />
        </p>

        <h2 id="conclusion" class="section">Conclusion</h2>
        <p>
          Conservation and sustainability are essential for protecting our
          oceans and marine ecosystems. By implementing sustainable fishing
          practices, reducing ocean pollution, and establishing marine protected
          areas, we can safeguard aquatic biodiversity and ensure the health of
          our oceans for future generations. It is crucial that individuals,
          communities, and governments work together to address the threats
          facing our oceans and take action to preserve these vital resources.
          Through education, advocacy, and conservation efforts, we can create a
          more sustainable future where life below water thrives.
          <br /><br />
          If you are looking for volunteer opportunities for conservation and research, please visit our
          <a href="/volunteer.html">Volunteer</a> page. <br /><br />
          <img
            src="images/content/conservation_4.webp"
            alt="Conservation of our planets water sources"
          />
        </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>&copy; 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>