generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
445 lines (399 loc) · 27.5 KB
/
index.html
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A history website dedicated to an important battle in 480bce">
<meta name="keywords" content="sparta. ancient greece, thermopylae, the battle of thermopylae">
<link rel="stylesheet" href="assets/style.css">
<title>The Battle of Thermopylae</title>
</head>
<body>
<header id="header">
<a href="index.html">
<h1 id="logo">The Battle of Thermopylae</h1>
</a>
<!---Navigation-->
<nav id="menu">
<ul>
<li class="navi">
<a href="#battle"> Battle</a>
</li>
<li class="navi">
<a href="#legacy"> Legacy</a>
</li>
<li class="navi">
<a href="#follow"> Socials</a>
</li>
</ul>
</nav>
</header>
<!-- End of Navigation -->
<section>
<div id="hotgates"></div>
<!-- About Section-->
<div>
<hr>
<h2>About</h2>
<p> Many historians have often wondered throughout the ages, how the course of history may have altered had
certain events had a different outcome. <br>
If we want to delve back in time to a key event that has pathed the way to the rise of European
civilizations as we know them, few events in history could have had a bigger impact on that than the
battle of Thermopylae. <br>
This website will aim to show you the context and events leading up to the battle, and how it allowed
the Greek world to continue to survive and pass on the cultural influences that still survive to this
day. </p>
<hr>
</div>
</section>
<section>
<!--Background to Conflict-->
<div>
<h2>Context</h2>
<p> Already by the start of the 5th century, the neighboring Persian Achaemenid Empire was experiencing an
expansion into Europe. <br>
King Darius I, the ruler of this vast Empire, had already subjugated Thrace and Macedonia. He had his
sights set on the rest of the Greek world. <br>
It is important to remember that at this point in time, Greece was not a unified nation. In fact, it was
a vassal of indeopendant city states that shared a similar culture. <br>
Darius I was keen to incorporate these states under his rule. In 491 BC, he sent an envoy to the Greek
city states demanding that they submit to his rule. <br>
The Greeks refused, and Darius prepared an invasion force to take the Greek states the following year.
</p>
<br>
<p> In 490 BC, King Darius I sent a fleet of 600 ships and 25,000 men to attack Cyclades and Euboea, before
meeting a combined Greek force led by Athens at the battle of Marathon. <br>
This resulted in a decisive victory for the combined Greek fleet, halting Persian expansion into Greece.
However, this would not be the end of the conflict. <br>
In 486 BC, King Darius I died, replaced by King Xerxes I. He planned to take revenge on the Greek states
by ammassing the largest invasive force ever seen at the time. <br>
This was to be the biggest threat to Greek independence yet, and would again required a collaborative
effort between all states to fend off this bigger invasion. </p>
<p> A greek spy notified officials within the key city of Sparta of the approaching Persian army, and whilst
a plan was drawn up with other city states to send a force of 10,000 hoplites to fend off <br>
the force at the Tempe Valley near Mt. Olympos, the festival of the Carneia made officials reluctant to
go to war, as this was a celebration where military action was prohibited by Spartan Law. <br>
The Olympic Games, held around the same time, meant other city states were reluctant to fight for a
similar reason. </p>
<br>
<p> King Leonidas I of Sparta, could see the imminent threat to his city, and consulted with the ephors to
negotiate sending a small task force to hold off the invasion. <br>
They agreed on sending a 300-strong unit of the Spartan Royal Guard (Known as the Hippeis) with
Leonidas. The goal, then, was to gather as many other greek soldiers along the way to defend a small
pass on the east coast of Greece.
This pass was known as The Hot Gates, or Thermopylae.
In addition to the land defence, a naval blockade by the Athenian Navy was set up to prevent the Persian
navy from out-flanking the Allied Greeks at Thermopylae. It was decided that the blockade would strong
hold at Artemisium.
</p>
<hr>
</div>
<div>
<!-- Belligerents section -->
<h2>Belligerents</h2>
<h3>The Allied Greeks</h3>
<p> The combined Greek force is estimated to have numbered at around 7000 troops.<br> This mix of troops
consited of Thebans, Thespians, Phocians, Arcadians, Mantineans, Tegeans, Corinthians, Mycenaeans and
Phlians. <br>
This combined force was entirely led under the command of King Leonidas I. </p>
<br>
<p> A typical hoplite soldier was laiden in bronze armour. This, across most Greek contingents, consisted of
a bronze helmet, breastplate, greaves and a bronze covered wooden shield known as a Hoplon, from which
the term Hoplite is derived.
In the case of the Spartans, it is thought that they would wear a crimson red tunic, as well as a
crested Corinthian helmet. A long, ash spear was the weapon of choice, followed by the Spartan Xiphos (a
type of short sword).
In a tight, phalanx formation, the hoplite soldier was a formidable fighter. Arguably the best type of
soldier of its day. Each soldier's shield was protecting the solider next to him. The spears in
formation provided a lethal wall aheasd of the front line.
It was crucial to be diciplined in this formation, as each soldier was depending on the other to keep
tightly packed next to one another to prevent gaps appearing in the line.
</p>
<div class="image-line">
<img id="hoplite" src="assets/images/greek-hoplite.webp"
alt="A Greek Hoplite Solider holding a spear and shield">
<img id="phalanx" src="assets/images/phalanx.jpeg"
alt="A Spartan Phalanx on a hilltop defending against a Persian army.">
<img id="army" src="assets/images/spartan-army.jpeg"
alt="A Spartan Army defends against cavalry in a tight formation">
</div>
<br>
<h3>The Persian Army</h3>
<p> The Persian army has had many varying estimates depending on different sources. However, modern day
scholars estimate that the Persian army numbered anywhere between 12,000-300,000 strong.
Xerxes' army had an even wider variety of warriors from across his empire, including: Persians,
Parthians, Bactrians, Zarangians, Scythians, Assyrians, Babylonians, Egyptions, Lydians and Ethiopians.
</p>
<br>
<p> The general term for the Persian army was 'Spada'. This consisted of infantry, cavalry (both horse and
camel ridden), charioteers and archers.
The Spada was organised in a decimal fashion. 10 men made up a company (dathapati), 10 companies made up
a battalion (thatapati), 10 battalions made up a division (hazarapati) and 10 divisions made up a corps
(baivarapati).
A typical infantry man carried a wooden spear and a short sword, as well as a wooden shield. An archer
would carry a bow and a quiver full of arrows made of reed and bronze/iron heads. Overall, however, in
terms of armour, the average Persian soldier was under-equipped to deal with a an opposing phalanx army.
Usually, only cloth clothing was used. Some may have worn a leather cuirass over this. Depending on
whether some soldiers originated from, some infantrymen preferred to use a battle axe as opposed to a
spear.
</p>
<br>
<p> The Immortals, the Persian Elite Soldiers, were an army consisting of, at any one time, 10,000 men.
They were better equipped as well. They used sturdier wicker shields lined in leather, wore a metal
plated corset as well as his standard tunic. A soldier would have carried a short spear, a short sword
or dagger, and a bow and quiver full of arrows.
A soft cap was worn that could cover their faces quickly when marching through a desert.
</p>
<div class="image-line">
<img id="persians" src="assets/images/persiansoldiers.jpeg"
alt="2 Persian Warriors. One holding a spear and shield, the other is an archer aiming a bow and arrow">
<img id="spara" src="assets/images/spara.jpeg" alt="Persian Army attacking an enemy">
<img id="cavalry" src="assets/images/persian-cavalry.jpeg"
alt="2 soldiers on horseback. One swings a battle-axe and the other carries spears">
</div>
</div>
</section>
<!-- Battle Section -->
<section id="battle">
<div id="dayone">
<h2> Day 1</h2>
<p>The Pass at Thermopylae was an great strategic positionf for the allied Greek army to hold their defense.
To their left, steep mountains that ran down to the pass, and to the right was the Agean Sea.
The hoplite phalanx, a tight formation used by the Greeks, meant that in the narrow confines of
Thermopylae, their inferior numbers mattered less as they could comfortably block the pass.
A wall was built to block a route around the defensive line to the Greek camp, and a band of Phocians
were dispatched to defend an old goat path that lead form the Greek camp all the way to the Persian
camp.
</p>
<br>
<p>The Persian emcampment had waiting for days prior before making their advance, expecting the Greeks to
flee at the sight of the vast combined Persian force.
On the first day of the battle, after Xerxes grew impatient at waiting for the Greeks to retreat, he
ordered his archers to fire a barrage of arrows at the Greek line. This was ineffective.
Then, he ordered an assault on the Greek position with around 10,000 men to attempt to break their
lines. The phalanx proved itself here, and in the tight-shield formation, it successfully held off their
advance. Greek units were rotated in and out of battle to prevent fatigue, showing they had plenty of
men to hold the pass.
</p>
<br>
<p>King Xerxes then ordered in his elite infanty, known as the Immortals. This was a unit consisting of
10,000 men at any one time, and got their name due to the fact that if any soldier fell, he was swiftly
replaced.
The Immortals attacked, but had no more success than the previous wave. The Greeks successfully held off
the Immortals with feigning retreats before quickly reorganising back into phalanx formation.
</p>
</div>
<div id="daytwo">
<h2>Day 2</h2>
<p> On day two, Xerxes sent in another vast assault again, hoping that by now the Greeks would be exhausted
from the full day of fighting from the previous day.
They had made no progress on the previous day. The Greeks successfully held off wave after wave of
Persian charge utilising the same tactics. It looked as though the Greeks would be able to keep this up
for weeks if necessary.
However, a local shepherd from Thrachis was set to tip to balance in the Persians' favour. This man was
Ephialtes, son of Eurydemos, and motivated by desire of wealth through Persian bribes, he went to the
Persian camp to inform Xerxes and his commanders of the goat path that led to the Greek camp. </p>
<br>
<p> On the evening of day 2, Xerxes ordered one of his commanders, Hydarnes, to take a force of 20,000 with
him and follow Ephialtes through the goat path. The path led from the east of the Persian camp along the
edge of Mt. Anopaea, all the way behind the cliffs that flanked the pass at Thermopylae. The Persians,
with the help of Ephialtes, saw that the path branches at on point, where one path lead to Phocis and
the other to the Malian Gulf. They were sure that they could encircle the Greek army by the following
day. They advanced through the night.
</p>
</div>
<div id="daythree">
<h2>Day 3</h2>
<p>At dawn, the Phocians guarding the goat path became aware of the approaching Persian army and hastily
armed themselves. Both sides did not expect to come across each other. At first, Hydarnes hesitated to
advance much further, fearing that the defending Greeks were Spartan. Ephialtes reassured him that they
were not, and they pressed on.
The Phocians, assuming themselves to be the target of the advancing army, withdrew to a higher position
on a nearby hill to make a defensive stand. The Persians, seeing the gap in the pass, merely fired a
volley of arrows at the defenders and carried on towards the allied Greek camp.
A runner alerted the Spartans command that the Phocians had not held the path, and King Leonidas
summoned a war council immediately to discuss their next move.
Many of the Greeks argued for an immediate withdrawal, as their position was now compromised and
indefensible. Leonidas however, insisted the he and his fellow Spartans would stay and cover any Greeks
that wished to retreat. They would hold the line no matter the cost.
Most took Leonidas up on this offer, fearing for their own lives and for the cities from which they
came. However, a contingent of 700 Thespians, led by their general Demophilus, and a smaller group of
400 Thebans, chose to stand with the Spartans and fight to the end. </p>
<br>
<p>At dawn, Xerxes made libations before ordering an assault on the Greek front lines. This wave consisted
of 10,000 men, both light infantry and cavalry units. The Greeks broke rank and charged forward. When
their spears broke, the went to their Xiphos (Greek short sword) and fought on even when their secondary
weapons broke. In the struggle, two of Xerxes' own brothers were killed.
Leonidas, too, fell in the battle to Persian archers. Both sides fought viciously to reclaim his body.
When Xerxes ordered in his 'Immortals', the Greeks withdrew to a hill behind the wall they had built to
hold a last-stand.
<br>
The Persian army began tearing down the wall, and Xerxes ordered the hill defenders to be completely
surrounded. He ordered his archers to fire until all Greeks were killed.
The Persian army then advanced on, as the pass at Thermopylae was now cleared of defenders.
</p>
<div class="image-line">
<img id="warmap" src="assets/images/war-map.png"
alt="A map showing the territories of Greece and the Persian Empire ands the movements of either side's armies">
</div>
</div>
</section>
<!-- End of Battle Section -->
<!-- Legacy Section -->
<section id="legacy">
<div>
<h2>Aftermath</h2>
<p>In the direct aftermath of the battle, the Persian army could now carry on its advance into the rest of
Greece and rendered the Athenian naval blockade of Artemisium irrelevant. Furthermore, the resulting
battle of Artemisium resulted in a tactical stalemate, and forced the Greek navy to withdraw to the
island of Salamis.
Following Thermopylae, the Persians proceeded to sack Plataea, Thespiae and any Boeotian cities that
would not submit to Persian rule.
Athens was evacuated and the Persian Army proceeded to sack Athens as well, which was an event that was
known as the Achaemenid destruction of Athens.
A Greek allied army began a defense of the Isthmus of Corinth, and demolished a single track to it and
constructed a large wall, similar to what was done at Thermopylae.
As with Thermopylae, a naval blockade was planned to hold off any flanking from the Persian Navy. The
Athenian general Themistocles, persuaded the Allied Greeks that a decisive naval victory was needed at
the site of the blockade.
Luring the Persian Navy into the Straits of Salamis, the Greek Fleet was able to destroy much of the
enemy fleet in what became known as the Battle of Salamis. </p>
<br>
<p> Xerxes ordered a general retreat back into Asia, fearing further destruction from the Greeks, but
ordered that an invasive force return the following year to attemptto complete the Hellenic conquest.
After a series of failed political negotiations, the two opposing forces met at Plataea, and initiated
the battle of Plataea, in which the Allied Greeks boasted the biggest hoplite army ever assembled.
This battle resulted in a decisive Greek victory and ending the Persian threat to the Greeks.
</p>
</div>
<div>
<h2>Cultural Influence</h2>
<p>In the Ancient Greek world, the battle of Thermopylae served as a morale lesson to its people. One where
duty to one's strongly held beliefs and values, even in the face of death, are worth fighting and paying
the ultimate price for.
Today in the contemporary world, the same message echoes through time. A smaller, free people standing
up to a much greater foe in uncertain odds and uncertain outcomes inspires many to this day.
</p>
<br>
<p>
Several monuments have been built to celebrate the heroic deeds of the Soldiers at Thermopylae. The most
famous is the statue of Leonidas, the Leonidas Monument by Vassos Felireas.
Depicted under the statue of the Spartan King, is the phrase "Molon Labe" - meaning "Come and take
them". This phrase will be explained further below.
There is also the Thespian Monument, commissioned and constructed in 1997 by the Greek Government, to
recognise the valour of the 700 Thespians who stayed behind with the Spartans. It is a beautiful marble
structure featuring a bronze statue of the Greek God Eros, who was widely worshiped in amongst the
Ancient Thespians.
Underneath the statue, the there is a sign that reads "In memory of the seven hundred Thespians".
</p>
<br>
<p>Finally, there is the Epitaph of Simonides. The original epigram, that was carved in stone on a burial
ground for the Spartan 300, has not survived. This mound also happens to be the same hill on which the
last Greeks put up their last stand again the Persians.
However, in 1955 a new stone was placed on the hill, and reads a text written by Herodotus:
</p>
<p id="herodotus"> "O stranger, tell the Lacedaemonians<br>that
we lie here, obedient to their words."</p>
<p> There have been many interpretations of this saying through the centuries. Miss-translations and
different interpretations have led to words being swapped out for others, such as "words" for "laws", or
"Lacedaemonians" for "Spartans".
This is particularly true when the phrase has been translated in to English.
</p>
<div class="image-line">
<img src="assets/images/thermopylae-leonidas-monument.jpeg" alt="Statue of King Leonidas">
<img src="assets/images/thespianmonument02.jpeg" alt="The Thespian Monument">
<img src="assets/images/thermopylae_plaque.jpeg" alt="The Epitaph of Simonides">
</div>
<br>
<p>There are many legends surrounding the Greek side of the battle of Thermopylae, mainly due to the very
few accounts we have from the time of battle.
The best sources we have, include the likes of Herodotus, who wrote his history on the battle some 50+
years after it took place.
Included in Herodotus' Histories, are some very famous phrases that have influenced other soldiers,
athletes and media alike.
Most famous of all, is how King Leonidas is said to have responded to a Persian envoy, who requested
that the Spartans and there allies lay down their arms, lest they wished to be attacked by the Persians.
Leonidas is said to have responded plainly with "Molon Labe", or "Come and take them" translated in
English.
Another recitement by Herodotus, suggests that when Persian scouts approached the Greek camp, the
Spartans could be seen exercising, laughing and combing their long hair.
The scouts were invited right up to the camp and informed that this was how Spartans prepared for war.
This was confirmed to Xerxes by exiled Spartan King Demaratus, who informed Xerxes that this was common
behaviour of Spartans who knew that they were about to put their lives at risk.
Finally, another famous phrase from the histories. Herodotus writes that when the Spartan soldier
Dienekes, was informed that the arrows from Persian archers would be so numerous that they would "block
out the sun", he calmly replied<br> "So much the better...then we shall fight our battle in the shade."
</p>
<br>
<p> In the modern day, there have been many books, documentaries, websites and films made about the battle
at Thermopylae.
Such films as 'The 300 Spartans' in 1962, the 1998 Comic book "300" by Frank Miller, which was also
later adapted in to a popular film in 2006 starring Gerald Butler as King Leonidas.
Translated literature of Herodotus' Histories can be found widely available as books or online
literature.
The battle has more recently made an appearance in the video game world as well. Assassin's Creed:
Odyssey, made by Ubisoft, features the battle at the start of the game, mixing fiction into the story
for the narrative of the game.
The game's protagonist is even the grand-child of Leonidas.
The battle of Thermopylae is often referenced in tv shows, films, games and more as an
"Against-all-odds" message.
Again, this can be directly attributed to Herodotus and his Histories.
A deep appreciation of Spartan ideals and customs is defined today as 'Laconism' - References to this
can be traced back to the Renaissance period, and today is often as simple as referencing the word
"Spartan" as a sports team name or taking inspiration from the heroism of the battle.
Symbolism of the Spartan 'Lambda' shield and Corinthian helmet is often used in conjunction with the
term Spartan.
</p>
<div class="image-line">
<img src="assets/images/300.jpeg"
alt="A poster showing the film '300'. King Leonidas stands roaring in his armour">
<img src="assets/images/comic_book.jpeg"
alt="Comic Book front cover showing a Spartan soldier's bronze helmet. 300 is written in red over the top">
<img src="assets/images/ac_odyssey.jpeg" alt="Video Game Poster showing an armoured warrior">
</div>
<br>
<p> Today, the battlefield of Thermopylae is unassuming. You would never know what happened here. The
coastline has receded back, and a modern highwat runs along where the coastline may have been.
Tree covered mountains still stand tall over Thermopylae, and my hope is, that with the help of this
website, the modern generation may know a little bit more than they did before about what happened here.
</p>
</div>
</section>
<!-- End of Legacy Section -->
<!-- Floating Icon that returns user to top of page -->
<div class="to-top">
<a href="#header"><i class="fa-solid fa-arrow-up"></i></a>
</div>
<!-- Footer Image -->
<div id="thermopyles"></div>
<!--Footer and Social Media icons-->
<footer id="follow">
<ul class="social-networks">
<li>
<a href="http:https://facebook.com" target="_blank" rel="noopener"
aria-label="Follow us on our Facebook page (opens in a new tab)"><i
class="fa-brands fa-facebook"></i></a>
</li>
<li>
<a href="http:https://instagram.com" target="_blank" rel="noopener"
aria-label="Follow us on our Instagram page (opens in a new tab)"><i
class="fa-brands fa-instagram"></i></a>
</li>
<li>
<a href="http:https://twitter.com" target="_blank" rel="noopener"
aria-label="Follow us on our Twitter page (opens in a new tab)"><i
class="fa-brands fa-twitter"></i></a>
</li>
<li>
<a href="http:https://youtube.com" target="_blank" rel="noopener"
aria-label="Follow us on our Youtube page (opens in a new tab)"><i
class="fa-brands fa-youtube"></i></a>
</li>
</ul>
</footer>
<!-- End of Footer/Socials Section -->
<!-- Font Awesome Script Kit Used-->
<script src="https://kit.fontawesome.com/975999bef1.js" crossorigin="anonymous"></script>
</body>
</html>