-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathcontentPageStudent4.html
184 lines (154 loc) · 9.5 KB
/
contentPageStudent4.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
<!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</title>
<link rel="stylesheet" href="Home.css">
<link rel="stylesheet" href="contentPageStudent4.css">
</head>
<body>
<header class="header">
<a href="index.html" class="logo"><img src="images/Home/Sustainable_Development_Goal_14.png" alt="LOGO" class="logo"></a>
<input type="checkbox" id="check">
<label for="check" class="icons">
<i class='bx bx-menu' id="close-icon"></i>
<i class='bx bx-x' id="menu-icon"></i>
</label>
<nav class="navbar">
<a href="Home.html" style="--i:0;">HOME <span></span></a>
<a href="Gallery.html" style="--i:1;">GALLERY <span></span></a>
<a href="shop.html" style="--i:2;">SHOP <span></span></a>
<a href="Feedback.html" style="--i:3;">FEEDBACK <span></span></a>
<a href="profile.html" style="--i:4;">USER PROFILE <span></span></a>
<a href="team.html" style="--i:5;">ABOUT US <span></span></a>
<a href="Sitemap.html" class="active" style="--i:6;">SITE MAP <span></span></a>
</nav>
</header>
<div class="content">
<div class="image_container">
<div class="bottom-left"><h1>Reducing Plastic Waste in the Ocean</h1></div>
<div class="backgroundclr"></div>
<img src="images/ContentPage4/Turtlebag1-scaled11.jpg" alt="sitemap" style="width:100%;">
</div>
<p>Plastic pollution in our oceans has become one of the most pressing environmental issues of our time. Every year, millions of tons of plastic waste enter our marine ecosystems, causing devastating effects on marine life and the overall health of our oceans.</p>
<div class="section">
<h2>The Journey of Plastic to the Ocean</h2>
<p>Most ocean plastic comes from land-based sources. It starts with improper waste disposal, littering, and inadequate waste management systems. Rain and wind carry plastic debris into streams and rivers, which eventually lead to the ocean. Even in landlocked areas, plastic can find its way to the sea through waterways.</p>
</div>
<div class="section">
<h2>The Impact of Plastic Pollution</h2>
<p>Plastic waste in the ocean has far-reaching consequences:</p>
<ul>
<li>Marine animals often mistake plastic for food, leading to malnutrition and death</li>
<li>Plastic debris can entangle marine life, causing injury or death</li>
<li>Microplastics are entering the food chain, potentially affecting human health</li>
<li>Plastic pollution damages coral reefs and other crucial marine habitats</li>
</ul>
</div>
<div class="section">
<h2>The Great Pacific Garbage Patch</h2>
<p>One of the most visible examples of ocean plastic pollution is the Great Pacific Garbage Patch. This is a collection of marine debris in the North Pacific Ocean. Contrary to popular belief, it's not a solid island of trash, but rather a soup of microplastics with some larger items mixed in, spread over an enormous area.</p>
</div>
<div class="section">
<h2>Microplastics: A Hidden Danger</h2>
<p>Microplastics, which are plastic particles less than 5mm in size, pose a significant threat to marine ecosystems. They come from larger plastic items that have broken down over time, as well as from products like microbeads in personal care items. These tiny particles are easily ingested by marine life and can accumulate toxins, potentially transferring these harmful substances up the food chain.</p>
</div>
<div class="tips">
<h3>Tips to Reduce Plastic Waste</h3>
<ul>
<li>Use reusable bags, water bottles, and food containers</li>
<li>Avoid single-use plastics like straws and cutlery</li>
<li>Choose products with minimal or recyclable packaging</li>
<li>Properly recycle plastic items</li>
<li>Participate in beach clean-ups or local environmental initiatives</li>
<li>Support businesses that use sustainable packaging</li>
<li>Educate others about the importance of reducing plastic waste</li>
</ul>
</div>
<div class="section">
<h2>Global Initiatives</h2>
<p>Many countries and organizations are taking steps to combat ocean plastic pollution. Some have banned single-use plastics, while others are implementing innovative recycling programs. International agreements like the United Nations Clean Seas campaign aim to engage governments, the public, and the private sector in the fight against marine plastic litter.</p>
</div>
<div class="call-to-action">
<h3>Be Part of the Solution</h3>
<p>Reducing plastic waste in our oceans is a global challenge, but every individual action counts. By making conscious choices in our daily lives and supporting policies aimed at reducing plastic pollution, we can all contribute to healthier, cleaner oceans for future generations.</p>
</div>
<div class="fact-box">
<h3>Did You Know?</h3>
<p id="factText">By 2050, there could be more plastic than fish in the ocean by weight.</p>
<button class="factbtn" onclick="changeFact()">Show Another Fact</button>
</div>
</div>
<footer>
<div class="container">
<div class="footer-content">
<h3 class="H3">Contact Us</h3>
<p>Email: <a href="mailto:[email protected]">[email protected]</a> </p>
<p>Phone: <br>+94 76 925 7022</p>
<p>Address: Dehiwala-Mount Lavinia</p>
</div>
<div class="footer-content">
<h3 class="H3">Quick Links</h3>
<ul class="list">
<li><a href="Home.html">Home</a></li>
<li><a href="Gallery.html">Gallery</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="Feedback.html">Feedback</a></li>
<!-- <li><a href="profile.html">UserProfile</a></li> -->
<li><a href="team.html">About Us</a></li>
<!-- <li><a href="Sitemap.html">Site Map</a></li> -->
</ul>
</div>
<div class="footer-content">
<h3 class="H3">Follow Us</h3>
<ul class="social-icons">
<li><a href="https://web.facebook.com/pasishjdh?comment_id=Y29tbWVudDoxNjY3NzY0Mzc3MzAxMjMzXzgzMjA2NDM2ODg3Nzc4OQ%3D%3D" target="_blank"><i class="fab fa-facebook"></i></a></li>
<li><a href="https://x.com/alwaysPasindu" target="_blank"><i class="fab fa-twitter" ></i></a></li>
<li><a href="https://github.com/alwaysPasindu" target="_blank"><i class="fab fa-github" ></i></a></li>
<li><a href="https://www.linkedin.com/in/pasindu-dilshan-929865269/" target="_blank"><i class="fab fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="bottom-bar">
<p>Copyright © 2024 GROUP. E | Designed By <a href="PageEditorStudent4.html"><i>Nithika Wickramasinghe</i></a></p>
</div>
</footer>
<button class="go-top-btn">
<img src="images/PageEditor4/Scroll_Up_Button.png" alt="arrow up">
</button>
<script>
const goTopBtn = document.querySelector('.go-top-btn');
window.addEventListener('scroll', checkHeight)
function checkHeight(){
if(window.scrollY > 200) {
goTopBtn.style.display = "flex"
} else {
goTopBtn.style.display = "none"
}
}
goTopBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: "smooth"
})
})
const facts = [
"By 2050, there could be more plastic than fish in the ocean by weight.",
"Over 1 million seabirds die each year from plastic ingestion or entanglement.",
"Plastic bags can take up to 1,000 years to decompose in the ocean.",
"8 million metric tons of plastic enter the oceans each year.",
"Microplastics have been found in 100% of sea turtle species.",
"About 40% of all plastic produced is packaging, used just once and then discarded.",
"Every year, about 500 billion plastic bags are used worldwide.",
"Plastic pollution causes at least $13 billion in damage to marine ecosystems each year."
];
let currentFactIndex = 0;
function changeFact() {
currentFactIndex = (currentFactIndex + 1) % facts.length;
document.getElementById("factText").textContent = facts[currentFactIndex];
}
</script>
</body>
</html>