<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Space Exploration</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: radial-gradient(circle at top, #0d1b2a, #000);
color: #f1f1f1;
line-height: 1.6;
}
header {
text-align: center;
padding: 60px 20px;
background: linear-gradient(135deg, #001f3f, #003366);
box-shadow: 0 0 20px rgba(0,0,0,0.7);
}
header h1 {
font-size: 3.2rem;
color: #00bfff;
letter-spacing: 2px;
}
header p {
color: #b3e5fc;
font-size: 1.2rem;
margin-top: 10px;
}
nav {
background: #001a33;
text-align: center;
padding: 15px 0;
}
nav a {
color: #00bcd4;
text-decoration: none;
font-weight: 600;
margin: 0 20px;
transition: color 0.3s;
}
nav a:hover {
color: #80deea;
}
section {
padding: 60px 20px;
text-align: center;
}
section h2 {
color: #00bfff;
font-size: 2.2rem;
margin-bottom: 20px;
}
section p {
max-width: 900px;
margin: 0 auto;
font-size: 1.1rem;
color: #e0f7fa;
}
.facts {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px;
margin-top: 40px;
}
.fact {
background: #012a4a;
border-radius: 12px;
width: 260px;
padding: 25px;
box-shadow: 0 4px 15px rgba(0,0,0,0.4);
transition: transform 0.3s, background 0.3s;
}
.fact:hover {
transform: translateY(-8px);
background: #01497c;
}
.fact h3 {
color: #4dd0e1;
margin-bottom: 10px;
}
.planets {
margin-top: 40px;
}
.planets table {
border-collapse: collapse;
width: 80%;
margin: 0 auto;
background: #011627;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 20px rgba(0,0,0,0.6);
}
.planets th, .planets td {
border: 1px solid #0d47a1;
padding: 15px;
font-size: 1rem;
}
.planets th {
background: #003c8f;
color: #fff;
}
.planets td {
color: #b3e5fc;
}
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; }
.fact { width: 90%; }
.planets table { width: 95%; }
}
</style>
</head>
<body>
<header>
<h1>🌌 Space Exploration</h1>
<p>Discover the wonders of the universe beyond our world</p>
</header>
<nav>
<a href="#intro">Introduction</a>
<a href="#facts">Interesting Facts</a>
<a href="#planets">Planets</a>
</nav>
<section id="intro">
<h2>About Space</h2>
<p>Space is a vast, mysterious expanse that surrounds our planet and extends infinitely in all directions.
It’s where stars, planets, galaxies, and countless cosmic bodies exist. Humans have always been fascinated by the night sky,
and through exploration, we continue to uncover secrets about how the universe works, its origins, and what lies beyond our solar system.</p>
</section>
<section id="facts">
<h2>Interesting Space Facts</h2>
<div class="facts">
<div class="fact">
<h3>1. Space Is Completely Silent</h3>
<p>There’s no atmosphere in space, so sound cannot travel. Communication is only possible via radio waves.</p>
</div>
<div class="fact">
<h3>2. One Day on Venus</h3>
<p>Venus rotates so slowly that one day on Venus equals 243 Earth days.</p>
</div>
<div class="fact">
<h3>3. Stars Don’t Twinkle in Space</h3>
<p>Twinkling happens due to Earth’s atmosphere — in space, stars shine steadily.</p>
</div>
<div class="fact">
<h3>4. The Sun Is 4.6 Billion Years Old</h3>
<p>Our star is roughly halfway through its life, burning hydrogen into helium to provide light and warmth.</p>
</div>
</div>
</section>
<section id="planets" class="planets">
<h2>Planets of Our Solar System</h2>
<table>
<tr>
<th>Planet</th>
<th>Distance from Sun</th>
<th>Length of a Day</th>
<th>Moons</th>
</tr>
<tr>
<td>Mercury</td>
<td>57.9 million km</td>
<td>59 Earth days</td>
<td>0</td>
</tr>
<tr>
<td>Venus</td>
<td>108.2 million km</td>
<td>243 Earth days</td>
<td>0</td>
</tr>
<tr>
<td>Earth</td>
<td>149.6 million km</td>
<td>24 hours</td>
<td>1</td>
</tr>
<tr>
<td>Mars</td>
<td>227.9 million km</td>
<td>24.6 hours</td>
<td>2</td>
</tr>
<tr>
<td>Jupiter</td>
<td>778.3 million km</td>
<td>9.9 hours</td>
<td>95</td>
</tr>
<tr>
<td>Saturn</td>
<td>1.43 billion km</td>
<td>10.7 hours</td>
<td>146</td>
</tr>
<tr>
<td>Uranus</td>
<td>2.87 billion km</td>
<td>17.2 hours</td>
<td>27</td>
</tr>
<tr>
<td>Neptune</td>
<td>4.5 billion km</td>
<td>16 hours</td>
<td>14</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