forked from DesislavaNaydenova/2405-hackathon-team1-StarWars
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwiki.html
293 lines (280 loc) · 14.8 KB
/
wiki.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
<!DOCTYPE html>
<html lang="en-gb">
<head>
<!--Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="The ultimate fan page dedicated to Darth Vader, the iconic Sith Lord from Star Wars. Explore his history, quiz, and more.">
<meta name="keywords"
content="Darth Vader, Star Wars, Sith Lord, Anakin Skywalker, Vader quotes, Vader quiz, Star Wars characters">
<link rel="canonical" href="https://desislavanaydenova.github.io/2405-hackathon-team1-StarWars/">
<meta name="robots" content="index, follow">
<!-- Social Integration: Facebook, LinkedIn, Google -->
<meta property="og:type" content="website">
<meta property="og:title" content="The Darth Side - Wiki">
<meta property="og:description"
content="The ultimate fan page dedicated to Darth Vader, the iconic Sith Lord from Star Wars. Explore his history, quiz, and more.">
<meta name="image" property="og:image" content="assets/images/responsive.png">
<meta property="og:image:alt" content="The Darth Side Website shown on a variety of devices">
<meta property="og:url" content="https://desislavanaydenova.github.io/2405-hackathon-team1-StarWars/">
<meta property="og:site_name" content="The Darth Side">
<meta name="author" content="Team ChewHakkas">
<!-- Favicon -->
<link type="image/png" sizes="16x16" rel="icon" href="assets/favicon/icons8-darth-vader-ios-17-filled-16.png">
<link type="image/png" sizes="32x32" rel="icon" href="assets/favicon/icons8-darth-vader-ios-17-filled-32.png">
<link type="image/png" sizes="96x96" rel="icon" href="assets/favicon/icons8-darth-vader-ios-17-filled-96.png">
<link type="image/png" sizes="120x120" rel="icon" href="assets/favicon/icons8-darth-vader-ios-17-filled-120.png">
<link rel="icon" type="image/png" sizes="72x72" href="assets/favicon/icons8-darth-vader-ios-17-filled-72.png">
<link rel="icon" type="image/png" sizes="96x96" href="assets/favicon/icons8-darth-vader-ios-17-filled-96.png">
<link rel="icon" type="image/png" sizes="144x144" href="assets/favicon/icons8-darth-vader-ios-17-filled-144.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets/favicon/icons8-darth-vader-ios-17-filled-192.png">
<link rel="icon" type="image/png" sizes="512x512" href="assets/favicon/icons8-darth-vader-ios-17-filled-512.png">
<link rel="apple-touch-icon" type="image/png" sizes="57x57"
href="assets/favicon/icons8-darth-vader-ios-17-filled-57.png">
<link rel="apple-touch-icon" type="image/png" sizes="60x60"
href="assets/favicon/icons8-darth-vader-ios-17-filled-60.png">
<link rel="apple-touch-icon" type="image/png" sizes="72x72" href="assets/favicon/icons8-darth-vader-72.png">
<link rel="apple-touch-icon" type="image/png" sizes="76x76" href="assets/favicon/icons8-darth-vader-76.png">
<link rel="apple-touch-icon" type="image/png" sizes="114x114" href="assets/favicon/icons8-darth-vader-114.png">
<link rel="apple-touch-icon" type="image/png" sizes="120x120" href="assets/favicon/icons8-darth-vader-120.png">
<link rel="apple-touch-icon" type="image/png" sizes="144x144" href="assets/favicon/icons8-darth-vader-144.png">
<link rel="apple-touch-icon" type="image/png" sizes="152x152" href="assets/favicon/icons8-darth-vader-152.png">
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="assets/favicon/icons8-darth-vader-180.png">
<link color="#26E07F" rel="mask-icon" href="assets/favicon/icons8-darth-vader-50.svg">
<meta name="msapplication-square70x70logo" content="assets/favicon/icons8-darth-vader-70.png">
<meta name="msapplication-TileImage" content="assets/favicon/icons8-darth-vader-144.png">
<meta name="msapplication-square150x150logo" content="assets/favicon/icons8-darth-vader-150.png">
<meta name="msapplication-square310x310logo" content="assets/favicon/icons8-darth-vader-310.png">
<!-- Stylesheets -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/wiki.css">
<title>The Darth Side - Wiki</title>
</head>
<body>
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand d-none d-lg-block" href="index.html">The Darth Side</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="quiz.html">Quiz</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="wiki.html">Wiki <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<!-- site banner -->
<div class="container-fluid">
<div class="row justify-content-center mt-4">
<div class="col-sm-12 col-md-12 col-lg-12 mt-4">
<div
class="bg-color-background section-column homepage-card logo-card p-3 text-center"
onmouseover="reveal('logo-text'); PlaySound('light-saber')"
onmouseout="hideText('logo-text'); StopSound('light-saber')"
>
<a href="index.html" aria-label="click to go to home page">The Darth Side</a>
<p id="logo-text" class="mt-5">Welcome to The Darth Side, the ultimate fan site dedicated to Darth Vader!
</p>
<audio id="light-saber" src="assets/audio/voicy_lightsaber_swing.mp3"></audio>
</div>
</div>
</div>
</div>
<!-- Time Line -->
<section class="wiki-timeline">
<div id="timeline">
<h1 id="timeline-heading">TIMELINE</h1>
<p id="heading-subtext">
Your lack of knowledge disturbs me.
Click on the time-frames to learn about our Master, Lord Vader.
You have failed me for the last time.</p>
<div class="timeline-item">
<div class="history">
<div class="history-content">
<h2 aria-label="clicking here will open a window with trivia information">
<hr><span class="summary"
>Born</span>
</h2>
<p class="details">
Darth Vader was born Anakin Skywalker to Shmi Skywalker on the planet of Tattooine.
<img src="assets/images/shmi_anakins_mother.webp" alt="Photo of Anakin Skywalkers Mother, Shmi Skywalker.">
</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="history">
<div class="history-content">
<h2 aria-label="clicking here will open a window with trivia information">
<hr><span class="summary"
>Childhood</span>
</h2>
<p class="details">
Anakin and Shmi were slaves on Tatooine. Anakin was liberated by Qui-Gon Jinn and trained to be a jedi
under Obi-Wan Kenobi.
<img src="assets/images/anakin_meal.webp" alt="Image of Anakin enjoying a meal as a child with friends and family.">
</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="history">
<div class="history-content">
<h2 aria-label="clicking here will open a window with trivia information">
<hr><span class="summary"
>Love</span>
</h2>
<p class="details">
Anakin Skywalker fell in love with Padme Amidala, whom he was assigned to protect as a Jedi apprentice.
Padme and Anakin marry.
When Padme falls pregnant, Anakin has visions of her dying in childbirth and fears that these visions
are true. Palpatine (who turns out to be Darth Sidious) convinces Anakin that the power of the Dark Side
would save Padme.
<img src="assets/images/anakin_padme.webp" alt="Anakin and Padme spending time together in a meadow.">
</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="history">
<div class="history-content">
<h2 aria-label="clicking here will open a window with trivia information">
<hr><span class="summary">The Dark
Side</span>
</h2>
<p class="details">
Anakin Skywalker becomes Darth Vader and adopts a red light saber. Padme and Vader argue, he chokes her
and she falls unconcious. Padme lives but gives birth to twins, Luke and Leia, and dies in childbirth.
Obi-Wan and Vader duel. Vader is left for dead beside a lava flow.
Palpatine rescues Vader, encases Vader in mechanical black armour to keep him alive and tells him that
Padme died when she was strangled.
Palpatine convinced Darth Vader to turn to the dark side at the age of 23.
<img src="assets/images/anakin_palpatine.webp" alt="Anakin in discussion with Palpatine.">
</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="history">
<div class="history-content">
<h2 aria-label="clicking here will open a window with trivia information">
<hr><span class="summary"
>Adulthood</span>
</h2>
<p class="details">
Darth Vader is Emperor Palpatine's enforces and hunts the Rebels throughout the galaxy. He uses the
Force choke on his own officers when they don't fall in line.
Vader discovers that his son Luke Skywalker is alive and is a Rebel.
Darth Vader reveals to Luke that Luke is his son ("No, I am your father" - The Empire Strikes Back). He
cuts off Luke's right hand.
<img src="assets/images/darth_luke.webp" alt="Darth Vader speaking to Luke.">
</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="history">
<div class="history-content">
<h2 aria-label="clicking here will open a window with trivia information">
<hr><span class="summary"
>Death</span>
</h2>
<p class="details">
When Luke Skywalker is being struck with Force lightning by Emperor Palpatine, Vader saves Luke by
killing Palpatine, but is mortally wounded in the process. He asks Luke to remove his helmet and they
share a moment of reconciliation.
<img src="assets/images/darth_dying.webp" alt="A scarred Darth Vader without his helmet, wearing his breathing mask.">
</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="history">
<div class="history-content">
<h2 aria-label="clicking here will open a window with trivia information">
<hr><span class="summary">After
Death</span>
</h2>
<p class="details" id="after-death">
Darth Vader's daughter Leia had a son with Han Solo named Kylo Ren.
<img src="assets/images/kyloren.webp" alt="Profile portrait of Kylo Ren, Darth Vaders grandson.">
</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="history">
<div class="history-content">
<h2 aria-label="clicking here will open a window with trivia information">
<hr><span class="summary"
>Movies</span>
</h2>
<p class="details" id="movies">
Darth Vader was voiced by James Earl Jones.
In the prequel trilogy, Jake Lloyd plays Anakin Skywalker as a young boy and Hayden Christenson plays
Anakin as he gets older.
In the original trilogy, David Prowse plays the physical body of Darth Vader but when Vader's helmet is
removed, Sebastian Shaw's face was used.
Darth Vader's theme song is The Imperial March.
Darth Vader only had 12 minutes of screen time in the first Star Wars movie (A New Hope).
<img src="assets/images/starwars_movies.webp" alt="Movie posters for each film in the Star Wars saga.">
</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="container-fluid footer-container fixed-bottom">
<div class="row">
<div class="col">
<a href="https://github.com/DesislavaNaydenova/2405-hackathon-team1-StarWars" target="_blank" rel="noopener">
<i class="fa-brands fa-github"><span class="sr-only">View our project on GitHub</span></i>
</a>
</div>
<div class="col">
<a href="about.html" aria-label="click to go to about us page">
<i class="fa-solid fa-people-group"><span class="sr-only">Meet the Team</span></i>
</a>
</div>
<div class="col">
<p onmouseover="PlaySound('chewieSoundEffect')" onmouseout="StopSound('chewieSoundEffect')">© Team
ChewHakkas</p>
<audio id="chewieSoundEffect">
<source src="assets/audio/chewbacca.mp3">
</audio>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"></script>
<script src="assets/js/script.js"></script>
<script src="assets/js/wiki.js"></script>
</body>
</html>