<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Volcanoes</title>
<style>
body{font-family:Poppins,Arial,sans-serif;margin:0;background:linear-gradient(135deg,#ffebee,#ffcdd2);color:#b71c1c;}
header{background:#d32f2f;color:white;text-align:center;padding:60px 20px;}
nav{text-align:center;background:#b71c1c;padding:15px;}
nav a{color:#ffcdd2;margin:0 20px;text-decoration:none;font-weight:600;}
nav a:hover{color:white;}
section{padding:50px 20px;text-align:center;}
h2{color:#c62828;font-size:2rem;margin-bottom:20px;}
.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:25px;}
.card{background:white;padding:25px;width:260px;border-radius:12px;box-shadow:0 5px 20px rgba(0,0,0,.15);}
.card h3{color:#c62828;}
footer{background:#b71c1c;color:white;text-align:center;padding:25px;font-size:22px;}
footer a{color:#ffcdd2;text-decoration:none;font-weight:bold;}
</style>
</head>
<body>
<header>
<h1>🌋 Volcanoes</h1>
<p>🔥 The Earth’s Fiery Mountains</p>
</header>
<nav>
<a href="#intro">🌎 About</a>
<a href="#types">🌋 Types</a>
<a href="#effects">⚠️ Effects</a>
</nav>
<section id="intro">
<h2>🌎 What Are Volcanoes?</h2>
<p>Volcanoes are openings in the Earth’s crust that allow molten rock, ash, and gases to escape. They play a vital role in shaping the planet’s landscape and atmosphere.</p>
</section>
<section id="types">
<h2>🌋 Types of Volcanoes</h2>
<div class="cards">
<div class="card"><h3>🗻 Shield Volcano</h3><p>Broad, gently sloping volcanoes formed by low-viscosity lava.</p></div>
<div class="card"><h3>⛰️ Composite Volcano</h3><p>Steep, cone-shaped and formed by layers of ash and lava.</p></div>
<div class="card"><h3>🪨 Cinder Cone</h3><p>Small and steep, made of pyroclastic fragments and ashes.</p></div>
</div>
</section>
<section id="effects">
<h2>⚠️ Effects of Eruptions</h2>
<p>Volcanic eruptions can destroy habitats, but also create fertile lands and new islands — showing both the destructive and creative power of nature.</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