Code to make a website about climate change and its awareness

 



<!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