<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ancient Civilizations</title>
<style>
body {
margin: 0;
font-family: "Poppins", sans-serif;
background: linear-gradient(135deg, #fff3e0, #ffe0b2);
color: #4e342e;
line-height: 1.7;
}
header {
background: #6d4c41;
color: white;
text-align: center;
padding: 70px 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
header h1 {
font-size: 3rem;
}
header p {
font-size: 1.2rem;
color: #d7ccc8;
}
nav {
background: #4e342e;
text-align: center;
padding: 15px 0;
}
nav a {
color: #ffe0b2;
text-decoration: none;
margin: 0 25px;
font-weight: 600;
}
nav a:hover {
color: white;
}
section {
padding: 60px 20px;
text-align: center;
}
section h2 {
color: #5d4037;
font-size: 2.3rem;
margin-bottom: 15px;
}
section p {
max-width: 900px;
margin: 0 auto 25px;
font-size: 1.1rem;
}
.cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px;
margin-top: 40px;
}
.card {
background: white;
width: 280px;
padding: 25px;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
transition: transform 0.3s, background 0.3s;
}
.card:hover {
transform: translateY(-10px);
background: #fbe9e7;
}
.card h3 {
color: #6d4c41;
}
ul {
text-align: left;
display: inline-block;
font-size: 1.1rem;
margin-top: 10px;
}
table {
border-collapse: collapse;
width: 85%;
margin: 0 auto;
background: #ffecb3;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
th, td {
border: 1px solid #ffe082;
padding: 12px 15px;
}
th {
background: #8d6e63;
color: white;
}
footer {
background: #4e342e;
color: white;
text-align: center;
padding: 30px;
font-size: 22px;
}
footer a {
color: #ffcc80;
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%;}
table {width: 95%;}
}
</style>
</head>
<body>
<header>
<h1>🏛️ Ancient Civilizations</h1>
<p>🌍 The Foundations of Humanity</p>
</header>
<nav>
<a href="#intro">📜 Introduction</a>
<a href="#great">🏺 Great Civilizations</a>
<a href="#achieve">⚒ Achievements</a>
<a href="#influence">🌟 Influence Today</a>
<a href="#facts">📚 Fun Facts</a>
</nav>
<section id="intro">
<h2>📜 What Are Ancient Civilizations?</h2>
<p>Thousands of years ago, humanity transitioned from nomadic tribes to organized societies. These early civilizations laid the groundwork for modern government, architecture, science, and art. From mighty empires to peaceful kingdoms, they shaped the course of history forever. ⏳</p>
</section>
<section id="great">
<h2>🏺 Great Civilizations of the Past</h2>
<div class="cards">
<div class="card">
<h3>🇪🇬 Egypt</h3>
<p>Known for its pyramids, hieroglyphs, and pharaohs. The Nile River sustained this golden civilization for over 3,000 years.</p>
</div>
<div class="card">
<h3>🏛 Greece</h3>
<p>The birthplace of democracy, philosophy, and the Olympic Games. Greek thinkers like Plato and Aristotle still inspire the world.</p>
</div>
<div class="card">
<h3>🏰 Mesopotamia</h3>
<p>Often called “The Cradle of Civilization,” it was home to the first cities, writing systems, and legal codes.</p>
</div>
<div class="card">
<h3>🐉 China</h3>
<p>Invented paper, gunpowder, and the compass. Its dynasties ruled with great cultural and scientific progress.</p>
</div>
</div>
</section>
<section id="achieve">
<h2>⚒ Amazing Achievements</h2>
<p>Ancient civilizations accomplished wonders that still amaze modern engineers and historians. Below are some groundbreaking innovations:</p>
<table>
<tr><th>Innovation</th><th>Civilization</th><th>Purpose</th></tr>
<tr><td>📜 Writing System</td><td>Mesopotamia</td><td>To record laws, trade, and history.</td></tr>
<tr><td>🏗 Pyramids</td><td>Egypt</td><td>Built as tombs for pharaohs and symbols of divine power.</td></tr>
<tr><td>⚖ Democracy</td><td>Greece</td><td>Gave citizens a voice in government.</td></tr>
<tr><td>🧭 Compass</td><td>China</td><td>Enabled long-distance navigation and exploration.</td></tr>
</table>
</section>
<section id="influence">
<h2>🌟 Their Influence Today</h2>
<p>Modern laws, languages, and architecture all carry traces of ancient civilizations. Temples inspired churches, Greek columns shape modern buildings, and the concept of justice stems from early Mesopotamian codes.</p>
<p>🕊 These ancient societies remind us that progress is built on the wisdom of the past.</p>
</section>
<section id="facts">
<h2>📚 Fun Facts</h2>
<ul>
<li>💎 The Great Pyramid of Giza was the tallest structure in the world for 3,800 years!</li>
<li>🧮 The Babylonians used a base-60 number system — that’s why we have 60 seconds in a minute.</li>
<li>🎭 Ancient Greeks built theaters with perfect acoustics — no microphones needed!</li>
<li>🐉 The Great Wall of China stretches over 21,000 km — visible even from space (sort of!).</li>
</ul>
</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