<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Oceans of the World</title>
<style>
body {
margin: 0;
font-family: "Poppins", Arial, sans-serif;
background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
color: #01579b;
line-height: 1.6;
}
header {
background: #0288d1;
color: white;
text-align: center;
padding: 70px 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
header h1 {
font-size: 3rem;
}
header p {
font-size: 1.3rem;
color: #e1f5fe;
}
nav {
background: #01579b;
text-align: center;
padding: 15px 0;
}
nav a {
color: #b3e5fc;
text-decoration: none;
margin: 0 20px;
font-weight: 600;
}
nav a:hover {
color: white;
}
section {
padding: 60px 20px;
text-align: center;
}
section h2 {
font-size: 2.3rem;
color: #0277bd;
margin-bottom: 15px;
}
section p {
max-width: 900px;
margin: 0 auto 25px;
font-size: 1.1rem;
}
.cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px;
margin-top: 40px;
}
.card {
background: white;
width: 280px;
padding: 25px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-8px);
}
.card h3 {
color: #0277bd;
}
footer {
background: #01579b;
color: white;
text-align: center;
padding: 30px;
font-size: 22px;
}
footer a {
color: #b3e5fc;
text-decoration: none;
font-weight: bold;
}
footer a:hover {
text-decoration: underline;
}
table {
border-collapse: collapse;
width: 85%;
margin: 0 auto;
background: #e1f5fe;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
th, td {
border: 1px solid #81d4fa;
padding: 12px 15px;
font-size: 1rem;
}
th {
background: #0288d1;
color: white;
}
@media (max-width: 768px) {
header h1 {font-size: 2.2rem;}
.card {width: 90%;}
table {width: 95%;}
}
</style>
</head>
<body>
<header>
<h1>🌊 Oceans of the World</h1>
<p>💙 The Blue Heart of Our Planet</p>
</header>
<nav>
<a href="#intro">🌍 Introduction</a>
<a href="#importance">💧 Importance</a>
<a href="#types">🌊 Major Oceans</a>
<a href="#problems">⚠️ Threats</a>
<a href="#save">🌱 How to Save</a>
</nav>
<section id="intro">
<h2>🌍 What Are Oceans?</h2>
<p>The oceans are vast bodies of saltwater that cover about 71% of Earth's surface. They regulate global climate, support diverse ecosystems, and provide oxygen essential for all life forms. The ocean’s rhythm and waves have shaped our weather, cultures, and civilizations since ancient times.</p>
<p>Scientists estimate that nearly 80% of our ocean remains unexplored — a mysterious world full of unseen life, landscapes, and secrets yet to be discovered. 🌌</p>
</section>
<section id="importance">
<h2>💧 Why Are Oceans Important?</h2>
<div class="cards">
<div class="card">
<h3>🌬 Climate Regulator</h3>
<p>Oceans absorb solar energy and distribute heat around the globe, stabilizing weather patterns and controlling Earth’s temperature.</p>
</div>
<div class="card">
<h3>🐠 Biodiversity</h3>
<p>Over 230,000 known marine species — and millions yet to be discovered — live in the ocean’s depths and coral reefs.</p>
</div>
<div class="card">
<h3>🌾 Food Source</h3>
<p>Seafood provides essential nutrition and livelihoods to billions of people worldwide.</p>
</div>
<div class="card">
<h3>🌬 Oxygen Producer</h3>
<p>Marine plants like phytoplankton produce over half of the world’s oxygen — more than all forests combined!</p>
</div>
</div>
</section>
<section id="types">
<h2>🌊 The Five Major Oceans</h2>
<p>Our planet’s waters are divided into five main oceans, each unique in size, depth, and character.</p>
<table>
<tr>
<th>Ocean Name</th>
<th>Area (Million sq km)</th>
<th>Key Feature</th>
</tr>
<tr>
<td>🌊 Pacific Ocean</td>
<td>165.25</td>
<td>Largest and deepest ocean, home to the Mariana Trench.</td>
</tr>
<tr>
<td>🌊 Atlantic Ocean</td>
<td>106.46</td>
<td>Known for its S-shaped basin and strong Gulf Stream currents.</td>
</tr>
<tr>
<td>🌊 Indian Ocean</td>
<td>70.56</td>
<td>Warmest ocean and vital trade route between Asia and Africa.</td>
</tr>
<tr>
<td>🌊 Southern Ocean</td>
<td>20.33</td>
<td>Encircles Antarctica and plays a major role in global circulation.</td>
</tr>
<tr>
<td>🌊 Arctic Ocean</td>
<td>14.06</td>
<td>Smallest and shallowest, mostly covered by sea ice.</td>
</tr>
</table>
</section>
<section id="problems">
<h2>⚠️ Major Threats to Oceans</h2>
<p>Despite their power and beauty, oceans are under serious threat from human activities. Pollution, overfishing, and climate change are leading to coral bleaching, sea-level rise, and species extinction.</p>
<div class="cards">
<div class="card"><h3>🧴 Plastic Pollution</h3><p>Millions of tons of plastic enter the ocean every year, harming marine life and ecosystems.</p></div>
<div class="card"><h3>🌡 Climate Change</h3><p>Rising temperatures cause coral bleaching and alter marine habitats.</p></div>
<div class="card"><h3>🐟 Overfishing</h3><p>Unsustainable fishing practices deplete fish populations and disrupt food chains.</p></div>
</div>
</section>
<section id="save">
<h2>🌱 How Can We Protect Our Oceans?</h2>
<p>Saving the oceans begins with individual action and global cooperation. We can all make a difference by:</p>
<ul style="text-align:left;display:inline-block;font-size:1.1rem;">
<li>♻️ Reducing plastic use and choosing reusable products.</li>
<li>🚯 Participating in local beach cleanups.</li>
<li>🐠 Supporting sustainable seafood sources.</li>
<li>💧 Conserving water and reducing chemical waste.</li>
<li>📣 Educating others about ocean conservation.</li>
</ul>
<p>Each small step helps preserve the blue heart of our planet for generations to come. 🌎💙</p>
</section>
<footer>
© 2025 <a href="https://freecodesforwebsites.blogspot.com/" target="_blank">Free Codes for Websites</a> | All rights reserved.
</footer>
</body>
</html>
Comments
Post a Comment