<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coral Reefs 🐠</title>
<style>
body{margin:0;font-family:Poppins,Arial,sans-serif;background:linear-gradient(135deg,#e0f7fa,#b2ebf2);color:#006064;line-height:1.6;}
header{background:#00acc1;color:white;text-align:center;padding:70px 20px;}
header h1{font-size:3rem;}
header p{font-size:1.2rem;color:#b2ebf2;}
nav{text-align:center;background:#006064;padding:15px;}
nav a{color:#b2ebf2;margin:0 20px;text-decoration:none;font-weight:600;}
nav a:hover{color:white;}
section{padding:60px 20px;text-align:center;}
section h2{color:#00838f;font-size:2.3rem;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:#b2ebf2;padding:25px;width:280px;border-radius:12px;box-shadow:0 5px 20px rgba(0,0,0,.2);transition:transform 0.3s;}
.card:hover{transform:translateY(-8px);background:#4dd0e1;}
.card h3{color:#006064;}
footer{background:#006064;color:white;text-align:center;padding:30px;font-size:22px;}
footer a{color:#b2ebf2;text-decoration:none;font-weight:bold;}
footer a:hover{text-decoration:underline;}
</style>
</head>
<body>
<header>
<h1>🐠 Coral Reefs</h1>
<p>The Rainforests of the Ocean 🌊</p>
</header>
<nav>
<a href="#intro">🌊 Introduction</a>
<a href="#types">🪸 Types</a>
<a href="#importance">🌱 Importance</a>
<a href="#threats">⚠️ Threats</a>
</nav>
<section id="intro">
<h2>🌊 What are Coral Reefs?</h2>
<p>Coral reefs are underwater ecosystems built by colonies of tiny animals called corals. They are some of the most diverse and vibrant ecosystems, home to thousands of marine species. 🐟</p>
</section>
<section id="types">
<h2>🪸 Types of Coral Reefs</h2>
<div class="cards">
<div class="card"><h3>🏝 Fringing Reefs</h3><p>Found along coastlines, directly attached to the shore.</p></div>
<div class="card"><h3>🌊 Barrier Reefs</h3><p>Separated from the shore by a lagoon, like the Great Barrier Reef.</p></div>
<div class="card"><h3>🌀 Atolls</h3><p>Ring-shaped reefs surrounding a lagoon, usually formed from submerged islands.</p></div>
</div>
</section>
<section id="importance">
<h2>🌱 Importance of Coral Reefs</h2>
<ul style="text-align:left;display:inline-block;font-size:1.1rem;">
<li>🐠 Provide habitat for marine life.</li>
<li>🌊 Protect coastlines from erosion.</li>
<li>💰 Support tourism and fishing industries.</li>
<li>🧬 Sources of medicine and research opportunities.</li>
</ul>
</section>
<section id="threats">
<h2>⚠️ Threats to Coral Reefs</h2>
<p>Climate change, ocean acidification, pollution, and overfishing are major threats. Protecting coral reefs is essential for preserving marine biodiversity and coastal ecosystems. 🌏</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