<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Renewable Energy</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
background: linear-gradient(to bottom right, #e3f2fd, #bbdefb);
color: #0d47a1;
line-height: 1.6;
}
header {
background: linear-gradient(90deg, #1565c0, #1e88e5);
color: white;
text-align: center;
padding: 60px 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
header h1 {
font-size: 3rem;
letter-spacing: 2px;
}
header p {
margin-top: 10px;
font-size: 1.2rem;
color: #e3f2fd;
}
nav {
background: #0d47a1;
text-align: center;
padding: 15px 0;
}
nav a {
color: #e3f2fd;
text-decoration: none;
font-weight: 600;
margin: 0 20px;
transition: color 0.3s;
}
nav a:hover {
color: #90caf9;
}
section {
padding: 60px 25px;
text-align: center;
}
section h2 {
font-size: 2.2rem;
color: #1565c0;
margin-bottom: 20px;
}
section p {
max-width: 900px;
margin: 0 auto;
font-size: 1.1rem;
color: #0d47a1;
}
.benefits {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px;
margin-top: 40px;
}
.card {
background: white;
border-radius: 12px;
width: 260px;
padding: 25px;
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-8px);
}
.card h3 {
color: #1976d2;
margin-bottom: 10px;
}
.types {
margin-top: 40px;
}
.types table {
border-collapse: collapse;
width: 80%;
margin: 0 auto;
background: #e3f2fd;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.types th, .types td {
border: 1px solid #90caf9;
padding: 15px;
font-size: 1rem;
color: #0d47a1;
}
.types th {
background: #1565c0;
color: white;
}
footer {
background: #0d47a1;
color: white;
text-align: center;
padding: 25px;
font-size: 22px;
letter-spacing: 0.5px;
margin-top: 60px;
}
footer a {
color: #bbdefb;
text-decoration: none;
font-weight: bold;
}
footer a:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
header h1 { font-size: 2.2rem; }
.card { width: 90%; }
.types table { width: 95%; }
}
</style>
</head>
<body>
<header>
<h1>⚡ Renewable Energy</h1>
<p>Powering the future through sustainability</p>
</header>
<nav>
<a href="#intro">Introduction</a>
<a href="#benefits">Benefits</a>
<a href="#types">Energy Types</a>
</nav>
<section id="intro">
<h2>What is Renewable Energy?</h2>
<p>Renewable energy is energy generated from natural resources that are constantly replenished — such as sunlight, wind, water, and geothermal heat. Unlike fossil fuels, these sources do not produce harmful emissions and play a vital role in combating climate change and ensuring a sustainable future for the planet.</p>
</section>
<section id="benefits">
<h2>Major Benefits</h2>
<div class="benefits">
<div class="card">
<h3>Clean and Green</h3>
<p>Renewable energy produces little to no pollution, keeping our air and water clean.</p>
</div>
<div class="card">
<h3>Limitless Supply</h3>
<p>Unlike fossil fuels, renewable energy sources never run out — the sun and wind are infinite.</p>
</div>
<div class="card">
<h3>Job Creation</h3>
<p>Millions of new jobs are being created worldwide in solar, wind, and hydro industries.</p>
</div>
<div class="card">
<h3>Energy Independence</h3>
<p>Countries can produce their own power instead of relying on imported fuels.</p>
</div>
</div>
</section>
<section id="types" class="types">
<h2>Types of Renewable Energy</h2>
<table>
<tr>
<th>Type</th>
<th>Source</th>
<th>Main Use</th>
</tr>
<tr>
<td>Solar Energy</td>
<td>Sunlight</td>
<td>Electricity & Heating</td>
</tr>
<tr>
<td>Wind Energy</td>
<td>Wind</td>
<td>Electricity Generation</td>
</tr>
<tr>
<td>Hydropower</td>
<td>Flowing Water</td>
<td>Electric Power</td>
</tr>
<tr>
<td>Geothermal Energy</td>
<td>Earth's Heat</td>
<td>Heating & Power Plants</td>
</tr>
<tr>
<td>Biomass Energy</td>
<td>Organic Materials</td>
<td>Fuel & Energy</td>
</tr>
</table>
</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