<!DOCTYPE html>
<html>
<head>
<title>History Explorer</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background: #333;
color: #fff;
padding: 20px 0;
text-align: center;
}
header h1 {
margin: 0;
}
nav {
background: #444;
padding: 10px;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
section {
padding: 20px;
margin: 20px;
background: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
button {
background: #333;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background: #555;
}
.hidden {
display: none;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px 0;
width: 100%;
bottom: 0;
}
</style>
</head>
<body>
<header>
<h1>History Explorer</h1>
<p>Discover the past, shape the future.</p>
</header>
<nav>
<ul>
<li><a href="#ancient">Ancient History</a></li>
<li><a href="#medieval">Medieval History</a></li>
<li><a href="#modern">Modern History</a></li>
</ul>
</nav>
<section id="ancient">
<h2>Ancient History</h2>
<p>Explore the rise and fall of ancient civilizations like Egypt, Greece, and Rome.</p>
<button onclick="showMore('ancient')">Learn More</button>
<div id="ancient-more" class="hidden">
<p>The ancient world was full of incredible achievements in art, science, and governance. From the pyramids of Egypt to the philosophy of Greece, ancient history shaped the foundation of modern society.</p>
</div>
</section>
<section id="medieval">
<h2>Medieval History</h2>
<p>Discover the Middle Ages, a time of knights, castles, and great cultural change.</p>
<button onclick="showMore('medieval')">Learn More</button>
<div id="medieval-more" class="hidden">
<p>The medieval period saw the rise of feudalism, the spread of Christianity, and the construction of iconic cathedrals. It was also a time of conflict, such as the Crusades and the Hundred Years' War.</p>
</div>
</section>
<section id="modern">
<h2>Modern History</h2>
<p>Learn about the events that shaped the world from the Renaissance to the present day.</p>
<button onclick="showMore('modern')">Learn More</button>
<div id="modern-more" class="hidden">
<p>Modern history includes the Industrial Revolution, World Wars, and the digital age. It's a story of innovation, struggle, and progress.</p>
</div>
</section>
<footer>
<p>© 2023 History Explorer. All rights reserved.</p>
</footer>
<script>
function showMore(sectionId) {
const moreContent = document.getElementById(`${sectionId}-more`);
if (moreContent.classList.contains('hidden')) {
moreContent.classList.remove('hidden');
} else {
moreContent.classList.add('hidden');
}
}
</script>
</body>
</html>
Comments
Post a Comment