-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
138 lines (134 loc) · 5.07 KB
/
index.html
File metadata and controls
138 lines (134 loc) · 5.07 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>History Lessons</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="logo">
<h1>History Lessons</h1>
</div>
<nav>
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="ancient.html">Ancient History</a></li>
<li><a href="medieval.html">Medieval History</a></li>
<li><a href="modern.html">Modern History</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<section class="hero">
<div class="hero-content">
<h2>Discover the Past, Understand the Present</h2>
<p>Explore fascinating stories and events that shaped our world</p>
<a href="#featured" class="btn">Start Learning</a>
</div>
</section>
<section id="featured" class="featured-lessons">
<h2>Featured Lessons</h2>
<div class="lesson-cards">
<div class="card">
<div class="card-image ancient"></div>
<div class="card-content">
<h3>Ancient Civilizations</h3>
<p>Explore the rise and fall of great ancient civilizations like Egypt, Greece, and Rome.</p>
<a href="ancient.html" class="btn">Learn More</a>
</div>
</div>
<div class="card">
<div class="card-image medieval"></div>
<div class="card-content">
<h3>Medieval Times</h3>
<p>Discover the fascinating world of knights, castles, and the feudal system.</p>
<a href="medieval.html" class="btn">Learn More</a>
</div>
</div>
<div class="card">
<div class="card-image modern"></div>
<div class="card-content">
<h3>Modern History</h3>
<p>Understand the events and innovations that shaped our modern world.</p>
<a href="modern.html" class="btn">Learn More</a>
</div>
</div>
</div>
</section>
<section class="timeline">
<h2>Historical Timeline</h2>
<div class="timeline-container">
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h3>3000 BCE</h3>
<p>Ancient Egyptian civilization begins to flourish</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h3>500 BCE</h3>
<p>Classical Greek period</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h3>27 BCE</h3>
<p>Roman Empire established</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h3>476 CE</h3>
<p>Fall of the Western Roman Empire</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h3>1492 CE</h3>
<p>Columbus reaches the Americas</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h3>1914-1918</h3>
<p>World War I</p>
</div>
</div>
</div>
</section>
<footer>
<div class="footer-content">
<div class="footer-section">
<h3>History Lessons</h3>
<p>Exploring the past to understand our present and future.</p>
</div>
<div class="footer-section">
<h3>Quick Links</h3>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="ancient.html">Ancient History</a></li>
<li><a href="medieval.html">Medieval History</a></li>
<li><a href="modern.html">Modern History</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Contact</h3>
<p>Email: info@historylessons.example</p>
<p>Phone: (123) 456-7890</p>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 History Lessons. All rights reserved.</p>
</div>
</footer>
</body>
</html>