<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Climate Change Awareness</title>
<style>
body{font-family:Poppins,Arial,sans-serif;margin:0;background:linear-gradient(135deg,#e0f7fa,#b2ebf2);color:#004d40;}
header{background:#00695c;color:white;text-align:center;padding:60px 15px;box-shadow:0 4px 10px rgba(0,0,0,.3);}
header h1{font-size:3rem;}
nav{text-align:center;background:#004d40;padding:15px;}
nav a{color:#b2dfdb;text-decoration:none;margin:0 20px;font-weight:600;}
nav a:hover{color:white;}
section{padding:50px 20px;text-align:center;}
h2{color:#00796b;font-size:2rem;margin-bottom:15px;}
p{max-width:800px;margin:0 auto 20px;font-size:1.1rem;}
.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:25px;margin-top:40px;}
.card{background:white;width:260px;padding:25px;border-radius:12px;box-shadow:0 5px 20px rgba(0,0,0,.15);transition:.3s;}
.card:hover{transform:translateY(-8px);}
.card h3{color:#00796b;margin-bottom:10px;}
footer{background:#004d40;color:white;text-align:center;padding:25px;font-size:22px;}
footer a{color:#80cbc4;text-decoration:none;font-weight:bold;}
</style>
</head>
<body>
<header>
<h1>🌿 Climate Change Awareness</h1>
<p>Together we can build a greener future</p>
</header>
<nav>
<a href="#causes">Causes</a>
<a href="#effects">Effects</a>
<a href="#solutions">Solutions</a>
</nav>
<section id="causes">
<h2>Main Causes</h2>
<p>Climate change is primarily driven by human activities such as burning fossil fuels, deforestation, and industrial emissions that increase greenhouse gases in the atmosphere.</p>
<div class="cards">
<div class="card"><h3>Fossil Fuels</h3><p>Coal, oil, and gas release massive carbon dioxide into the air.</p></div>
<div class="card"><h3>Deforestation</h3><p>Cutting trees reduces carbon absorption and increases CO₂ levels.</p></div>
<div class="card"><h3>Industrialization</h3><p>Factories emit large amounts of heat-trapping gases.</p></div>
</div>
</section>
<section id="effects">
<h2>Global Impacts</h2>
<p>Rising temperatures lead to melting glaciers, stronger storms, and sea level rise threatening communities and ecosystems worldwide.</p>
</section>
<section id="solutions">
<h2>Solutions</h2>
<p>Switch to renewable energy, plant trees, reduce waste, and adopt eco-friendly lifestyles to combat climate change effectively.</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