-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
268 lines (211 loc) · 17 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
<!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">
<title>The 10th Day Story</title>
<meta name="description" content="This is the Story of Imam Hussain and his companions on the 10thday of Muharram. " />
<meta name="author" content="The10thday.com" />
<!-- <link rel="stylesheet" href="assets/style.css"> -->
<link href="css/impress-demo.css" rel="stylesheet" />
<link rel="shortcut icon" href="favicon.png" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body class=".body-particles impress-not-supported" >
<!-- This is the website top menu and logo -->
<header class="site-header" role="banner">
<div class="container">
<a href="http://www.the10thday.com"><img class="logo" src="assets/logo.png"></a>
<nav class="site-nav">
<div class="trigger">
<a class="page-link" href="glossory.html">Glossary</a>
</div>
</nav>
</div>
</header>
<!-- This is the fallback massage -->
<div class="fallback-message">
<p>Your browser <b>doesn't support the features required</b> by the10thday.com, so you are presented with a simplified version of this story.</p>
<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>
<!-- The story begins here -->
<div id="impress">
<div class="step" data-x="0" data-y="0" data-scale="5">
<h1>The Battle of Karbala</h1></br>
</div>
<div class="step" data-x="150" data-y="0" data-rotate="50" data-z="-40000">
<p>The collision of good versus evil epitomized in a massacre never witnessed in history on so many fronts.</p></br>
<p>On the one side, the worldly materialistic strengths of power, greed and obsession. On the other side, the universal principles of truth, freedom and social justice under the flagship of humanity.</p></br>
<p>Can one man stand against open tyranny and more importantly, become the victor?</p>
<img id="war-image" src="css/img/war.png">
</div>
<div class="step" data-x="3000" data-y="10000" data-z="6000">
<p>The <a href="glossory.html#prophet" style="text-decoration:underline;">Holy Prophet of Islam</a> passed away in 632AD.</p></br>
<p>The half-century that followed saw political unrest, dispute, anxiety and a social struggle within the Islamic community.</p>
</div>
<div class="step" data-x="4500" data-y="10000" data-z="6000">
<p> One political maneuver was the appointment of a man called <a href="glossory.html#muawiyah" style="text-decoration:underline;">Mu’awiya</a> by the then second <a href="glossory.html#caliph" style="text-decoration:underline;">Caliph</a>, <a href="glossory.html#umar" style="text-decoration:underline;">Umar</a>, to become Governor of Syria as the Muslims had captured that territory from the Byzantines.</p>
<p>Mu’awiya was a power hungry man.</p>
<p>He grew up in a family known for worldly and materialistic desire. </p></p>
<p>Once appointed, he took advantage of the rich public treasury of Syria using it personally to buy favors and influence people.</p>
</div>
<div class="step" data-x="6000" data-y="10000" data-z="6000">
<p>More importantly, Mu’awiya wanted his own dynasty. </p></br>
<p>He created a strong network to target and fight against a man called <a href="glossory.html#ali" style="text-decoration:underline;">Ali</a>, the son-in-law of the late Holy Prophet.</p></br>
<p>Ali, on the other hand, was a pious man. Highly regarded and adored within all communities for his knowledge, devotion and loyalty to the Holy Prophet.</p></br>
<p>He was a man who treated everyone equally, even forgiving his defeated enemies after battle.</p>
</div>
<div class="step" data-x="7500" data-y="10000" data-z="6000">
<p>When Ali became the fourth Caliph, he decided to remove Mu’awiya immediately, notwithstanding Mu’awiya’s strong base of support.</p></br>
<p>Mu’awiya defied the Caliphate of Imam Ali and refused to obey his orders and established a parallel government in Greater Syria including Palestine and Jordan.</p></br>
<p>With the power and authority gained as governor for seventeen years, Mu’awiya now began a constant and malicious campaign of hate, lies and deceit against Imam Ali even falsely blaming him for the killing of <a href="glossory.html#uthman" style="text-decoration:underline;">Uthman.</a></p>
</div>
<div class="step" data-x="9000" data-y="10000" data-z="6000">
<p>As the Caliph in charge, Imam Ali could not ignore the situation; he had to act to restore peace and order.</p></br>
<p>The defying Mu'awiya continued to violate the public treasury for espionage and buying peoples' loyalty. The people of Syria fully believed him and the false picture he presented.</p></br>
<p>Ultimately this resulted in battle.</p></br>
<p>Imam Ali’s generals nearing victory were instructed to stop and attempt a final term for negotiation.</p></br>
<p>However, not only did negotiations fail, but a large group, the <a href="glossory.html#kharij" style="text-decoration:underline;">Kharijites</a>, defected Imam Ali.</p></br>
<p>Mu’awiya’s army moved on, overpowering Egypt and Yemen, areas that Imam Ali’s governors could not prevent.</p></p>
</div>
<div class="step" data-x="10500" data-y="10000" data-z="6000">
<p>In 661AD, a Khariji man attacked and fatally wounded Imam Ali with a poisoned sword as the Imam bowed during prayer in the month of Ramadan at the <a href="glossory.html#kufamosque" style="text-decoration:underline;">Mosque of Kufa</a></p></br>
<p>Imam Ali died two days later, on the 21st Ramadan in the city of Kufa.</p></br>
<p>The Islamic community in mourning now chose <a href="glossory.html#hassan" style="text-decoration:underline;">Hassan</a>, the elder of Imam Ali’s two sons, to become the legitimate ruler.</p></br>
<p>As soon as the news of Imam Hassan’s selection reached Mu’awiya, who had been fighting ‘Imam Ali for the Caliphate’ he condemned the selection and declared his decision not to recognise him.</p>
</div>
<div class="step" data-x="12000" data-y="10000" data-z="6000">
<p>Imam Hassan knew how his father Imam Ali stood like a lion in all difficulties and fought battles against Mu'awiya, but these confrontations had resulted in heavy casualties on both sides.</p></br>
<p>Considering all circumstances, Imam Hassan discussed the matter with his younger brother <a href="glossory.html#hussain" style="text-decoration:underline;">Hussain</a> and other relatives.</p></br>
<p>He revealed to them that in order to end the bloodshed and to provide a reasonable safety and security to the Muslim community, he would make <a href="glossory.html#reconsilation" style="text-decoration:underline;">‘Terms of Reconciliation’</a> with Mu'awiya and abdicate until after Mu'awiya's death at which time the community can again decide who should be the rightful leader.</p>
</div>
<div class="step" data-x="13500" data-y="10000" data-z="6000" data-rotate="90">
<p>The two noteworthy terms dictated by Imam Hassan and agreed by Mu’awiya were:</p></br>
<p>1. Mu'awiya to immediately stop the use of abusive language towards the Ahlul Bayt.</p></br>
<p>2. Mu'awiya shall not appoint anyone as his successor as that would be left for the people to decide.</p></br>
<p>Upon signing the Terms of Reconciliation, Mu’awiya disregarded the terms. He planned to kill Imam Hassan and ensure his dynasty was paved through his son, Yazid.</p></br>
<p>Yazid however was the playboy of the time, with habits including gambling, heavy drinking unethical indulgence.</p>
</div>
<div class="step" data-x="15000" data-y="10000" data-z="6000" data-rotate="90">
<p>Mu'awiya sent one of his agents to contact Imam Hassan's wife Joda and convinced her to put a little poison in Imam Hassan's food in return for wealth and worldly goods.</p></br>
<p>She found the offer too attractive to ignore.</p></br>
<p>As soon as the Imam took the poisoned honey he became seriously ill, passing away in 670AD.</p>
</div>
<div class="step" data-x="16500" data-y="10000" data-z="6000" data-rotate="90">
<p>Imam Hussain, carried on with his mission of teaching Islam as before.</p></br>
<p>A large number of people kept coming to see him and to learn from him. This process continued for several years.</p></br>
<p>However, Mu’awiya in his old age now began a campaign to introduce Monarchy into the structure of Islam allowing his son Yazid to become the next leader of the Islamic community.</p></br>
<p>People began to protest. There was anger everywhere. </p>
</div>
<div class="step" data-x="18000" data-y="10000" data-z="6000" data-rotate="90">
<p>Upon Mu'awiya's death, Yazid, 30 years old, managed to impose himself on the people to become the Caliph.</p></br>
<p>At first people refused to accept him as a representative of the Holy Prophet of Islam but Yazid, like his father, used all possible means like bribery, coercion, pressure, threats and force to receive the people's acceptance of him as the legitimate ruler.</p></br>
<p>Many people were worried, threats to their lives and livelihood were too menacing to ignore, so they grudgingly and reluctantly gave in.</p></br>
<p>Islam was now under tyrannical governance.</p></br>
<p>However, Imam Hussain and his family (who practiced Islam in its true sense) did not give in.</p>
</div>
<div class="step" data-x="195000" data-y="10000" data-z="6000" data-rotate="90">
<p>By 680AD, the Holy Prophets bloodline and succession was under tremendous threat through the open tyranny and new corrupt governance of Yazid.</p></br>
<p>The Grandson of the Holy Prophet, Imam Hussain, could not follow the open tyrannical governance of Yazid.</p></br>
<p>Despite Yazid's intimidating military power the Imam stood firm in his resolve and chose to challenge the <a href="glossory.html#ummayad" style="text-decoration:underline;">Umayyad</a> dynasty.</p></br>
<p>Therefore, with his family and a few companions, he decided to leave <a href="glossory.html#macca" style="text-decoration:underline;">Mecca</a> for <a href="glossory.html#kufa" style="text-decoration:underline;">Kufa</a>.</p>
</div>
<div class="step" data-x="21000" data-y="10000" data-z="6000" data-rotate="90">
<p>Diverted through his travel towards Kufa where he had support, Hussain and members of the Holy Prophet’s family were forced by a legion of a thousand horseman led by <a href="glossory.html#hurr" style="text-decoration:underline;">Hurr</a> and ordered by Yazid, to pitch on a dry land with no access to water.</p></br>
<p>This land was called <a href="glossory.html#karbala" style="text-decoration:underline;">Karbala</a>.</p>
</div>
<div class="step" data-x="21000" data-y="15000" data-z="10000" data-rotate="90">
<p>Additional military units were soon sent to Karbala. </p></br>
<p>A legion of 30,000 armed soldiers of Yazid were facing a 72-man caravan of Hussain with women and children, deprived of water. </p></br>
<p>After a week, Yazid sends a blood driven message that no one was to leave Karbala unless they swore an oath of allegiance to him. </p></br>
<p>Hussain and his followers remained true to the principles set by the Holy Prophet of Islam. They could not make the allegiance.</p>
</div>
<div class="step" data-x="22500" data-y="15000" data-z="6000" data-rotate="90">
<p>On the 9th night, Hussain gathered his followers and told them,</p></br>
<p>"the enemy is interested in none but me, me alone. </br>
I'll be most delighted to permit each and every one of you to go back, and I urge you to do so...."</p></br>
<p>All companions responded;</p></br>
<p>"We will either live with you or die together with you."</p></br>
<p>No one left. All remained.</p></br>
<p>The air of sacrifice had now become apparent.</p></br>
<p>Family members looked at each other and then their children. </p></br>
<p>The avoidable had now become unavoidable.</p>
</div>
<div class="step" data-x="24000" data-y="15000" data-z="6000" data-rotate="90">
<p>The 10th day began.</p></br>
<p>Hurr felt his conscience violently stir within his heart. He quickly broke away from the army of Yazid and joined the few companions with Imam Hussain.</p></br>
<p>With his eyes cast down, he solemnly asked for forgiveness for the role he played as commander, to which Imam Hussain replied,</p></br>
<p>“Yes, he will accept your repentance”.</p></br>
<p>Hurr’s defection worried the army of Yazid in case others were to do the same. </p></br>
<p>Umar ibn Sa’ad threw an arrow in the air to quickly indicate the start of what would be nothing less than a bloodthirsty, egotistic driven massacre.</p></br>
</div>
<div class="step" data-x="25500" data-y="15000" data-z="6000" data-rotate="90">
<p>One by one, thirsty and tired, Hussain’s companions, family members and children entered the arena for single combat.</p></br>
<p>One by one, thirsty and tired, they sacrificed their lives in Karbala to save Islam.</p></br>
<p>Imam Hussain, with his own eyes, saw all his beloved ones cut to pieces, including children.</p></br>
<p>The Imam even held his six-month baby son, Ali Asghar, to awaken the conscience of the soldiers.</p></br>
<p>The baby was zoomed with a tri-edged arrow to the throat and died instantly.</p></br>
</div>
<div class="step" data-x="25500" data-y="15000" data-z="-40000" data-rotate="0">
<p>Imam Hussain was now alone.</p></br>
<p>The enemy troops began to surround him but there was apprehension. No one dared make the final move.</p></br>
<p>The silence was broken when Shimr screamed for the final attack. An animalistic scream, the type that makes your blood curdle.</p></br>
<p>Imam Hussain entered again and again, fighting and pushing the enemy back. But when the enemy stood between him and his caravan, he turned and said,
“If you don’t believe in any religion and don’t fear the Day of Resurrection,</p></br>
<p>at least be free and noble in this world”.</p></br>
<p>Fatigued, thirsty and through further attacks, he fell onto the ground as the women and children looked on.</p>
</div>
<div class="step" data-x="27500" data-y="15000" data-z="0" data-rotate="0">
<p>Shimr came forward and severed Imam Hussain’s noble head from the body, the noble head kissed often by the Holy Prophet of Islam.</p></br>
<p>Shimr and others had the audacity to carry it on the tip of a spear to Yazid, 600 miles away.</p></br>
<p>All that remained in Karbala was a blood soaked massacre scene.</p></br>
<p>This was the leftover of the beloved family of <a href="glossory.html#mohammad" style="text-decoration:underline;">Prophet Mohammad</a> (s.a.w). Left in such a deplorable unimaginable condition and all caused by people who called themselves Muslims!</p></br>
</div>
<div class="step" data-x="29000" data-y="15000" data-z="0" data-rotate="0">
<p>Yet at no point before his death did Imam Hussain side with the open tyrannical governance of Yazid. </p></br>
<p>Soon Imam Hussain’s actions turned into a triumph.</p></br>
<p>He was a beacon of light preserving the universal principles of truth, freedom and social justice as set by the Holy Prophet of Islam.</p></br>
<p>Imam Hussain ensured truth remain the victor over falsehood.</p></br>
<p>Moreover, the massacre at Karbala stirred the consciousness for both the ignorant and learned alike as the actions and intentions of the Umayyad dynasty was now apparent for all to see. </p></br>
<p>Yazid never achieved what his father had planned. He died within three years by falling off a horse and was buried in a back street tomb in Damascus, Syria. </p></br>
<p>As for the Umayyad dynasty, it crumbled soon after.</p></br>
</div>
<!-- <div class="hint">
<p>Use a spacebar or arrow keys to navigate</p>
</div>
-->
</div>
<div class="PageNavigation">
<a class="prev" id="prev">PREVIOUS</a>
<div class="next" id="next">NEXT</div>
<div class="home" title="The story" href="#"></div>
</div>
<!-- particles.js container -->
<div id="particles-js"></div>
<!-- scripts -->
<script>
// default impress js
if ("ontouchstart" in document.documentElement) {
document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
}
</script>
<script type="text/javascript">
// next and previous button
$('#next').on('click', function(e){
impress().next();
e.stopPropagation();
});
$('#prev').on('click', function(e){
impress().prev();
e.stopPropagation();
});
</script>
<script src="assets/scripts/particles.js"></script>
<script src="assets/scripts/app.js"></script>
<script src="js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>