forked from TechSis01/Silver-Screen-Cinema
-
Notifications
You must be signed in to change notification settings - Fork 0
/
cast.html
449 lines (395 loc) · 26 KB
/
cast.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
446
447
448
449
<!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,maximum-scale=1.0,user-scalable=0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--FONT AWESOME KIT-->
<link href="https://fonts.googleapis.com/css2?family=Cookie&family=Noto+Sans:wght@300&family=Open+Sans:wght@400;500&family=Russo+One&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/597098b101.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="cast.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<title>Cast</title>
</head>
<body class="body">
<!-- =========================================================NAVBAR-CONTAINER===============================================================-->
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid navigation">
<a class=" navbar-brand brand-name" href="#footer"><span>Silver</span>Screen</a>
</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" aria-current="page" href="index.html">Home</a>
<a class="nav-link active" href="cast.html ">Cast</a>
<a class="nav-link" href="schedule.html ">Schedule</a>
<a class="nav-link" href="about.html">About</a>
</div>
</div>
</div>
</nav>
<!-- =========================================================BLACKWIDOW-CONTAINER===============================================================-->
<section class="cast" id="cast" data-aos="zoom-in" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="true" data-aos-once="false" data-aos-anchor-placement="top-center">
<section id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" id="carousel-container">
<div class="carousel-item active">
<img src="./Cast Images/Blackwidow_cast_1.png" alt=" ... ">
</div>
<div class="carousel-item ">
<img src="./Cast Images/Blackwidow_cast_3.png" alt="... ">
</div>
<div class="carousel-item ">
<img src="./Cast Images/Blackwidow_cast_4.png" alt="... ">
</div>
<div class="carousel-item ">
<img src="./Cast Images/Blackwidow_cast_2.png" alt="... ">
</div>
</div>
</section>
<article class="cast-text">
<h1>BLACK WIDOW</h1>
<progress value="80" max="100"></progress>
<p> An American superhero film based on Marvel Comics featuring the character of the same name. Produced by Marvel Studios and distributed by Walt Disney Studios Motion Pictures, it is the 24th film in the Marvel Cinematic Universe (MCU). The
film was directed by Cate Shortland from a screenplay by Eric Pearson, and stars Scarlett Johansson as Natasha Romanoff / Black Widow alongside Florence Pugh, David Harbour, O-T Fagbenle, Olga Kurylenko, William Hurt, Ray Winstone, and
Rachel Weisz.
</p>
<p>Set after the events of Captain America: Civil War (2016), the film sees Romanoff on the run and she is forced to confront her past.
</p>
<a href="./booking.html" class="book-ticket-link">Book A Ticket</a>
</article>
<section>
<div class="blackwidow-cast-img">
<img src="./Cast Images/Blackwidow_cast_1.png" alt="... ">
</div>
</section>
</section>
<!-- =========================================================AVENGERS-CONTAINER===============================================================-->
<section class="cast" id="cast" data-aos="zoom-in" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="true" data-aos-once="false" data-aos-anchor-placement="top-center">
<section id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" id="carousel-container">
<div class="carousel-item active">
<img src="./Cast Images/Avengers_cast 1.JPG" alt=" ... ">
</div>
<div class="carousel-item">
<img src="./Cast Images/Avengers_cast 7.JPG" alt="... ">
</div>
<div class="carousel-item ">
<img src="./Cast Images/Avengers_cast 2.JPG" alt="... ">
</div>
<div class="carousel-item ">
<img src="./Cast Images/Avengers_cast 3.JPG" alt="... ">
</div>
<div class="carousel-item ">
<img src="./Cast Images/Avengers_cast 4.JPG" alt="... ">
</div>
<div class="carousel-item ">
<img src="./Cast Images/Avengers_cast 5.JPG" alt="... ">
</div>
<div class="carousel-item ">
<img src="./Cast Images/Avengers_cast 6.JPG" alt="... ">
</div>
</div>
</section>
<article class="cast-text">
<h1>Avengers: Endgame</h1>
<progress value="90" max="100"></progress>
<p> An American superhero film based on the Marvel Comics superhero team the Avengers. Produced by Marvel Studios and distributed by Walt Disney Studios Motion Pictures, it is the direct sequel to Avengers: Infinity War (2018) and the 22nd film
in the Marvel Cinematic Universe (MCU). Directed by Anthony and Joe Russo and written by Christopher Markus and Stephen McFeely, the film features an ensemble cast including Robert Downey Jr., Chris Evans, Mark Ruffalo, Chris Hemsworth,
Scarlett Johansson, Jeremy Renner, Don Cheadle, Paul Rudd, Brie Larson, Karen Gillan, Danai Gurira, Benedict Wong, Jon Favreau, Bradley Cooper, Gwyneth Paltrow, and Josh Brolin.
</p>
<p>In the film, the surviving members of the Avengers and their allies attempt to reverse the destruction caused by Thanos in Infinity War.</p>
<a href="./booking.html" class="book-ticket-link">Book A Ticket</a>
</article>
<section>
<div class="avengers-cast-img">
<img src="./Cast Images/Avengers_cast 5.JPG " alt="... ">
</div>
</section>
</section>
<!-- =========================================================ALADDIN-CONTAINER===============================================================-->
<div class="cast" id="cast" data-aos="zoom-in" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="true" data-aos-once="false" data-aos-anchor-placement="top-center">
<section id=" carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" id="carousel-container">
<div class="carousel-item active">
<img src="./Cast Images/Aladdin_cast 1.png" alt=" ... ">
</div>
<div class="carousel-item">
<img src="./Cast Images/Aladdin_cast 3.png" alt="... ">
</div>
<div class="carousel-item">
<img src="./Cast Images/Aladdin_cast 2.png" alt="... ">
</div>
<div class="carousel-item">
<img src="./Cast Images/Aladdin_cast 4.png" alt="... ">
</div>
</div>
</section>
<article class="cast-text">
<h1> ALADDIN</h1>
<progress value="70" max="100"></progress>
<p>An american musical fantasy film produced by Walt Disney Pictures. Directed by Guy Ritchie, from a script he co-wrote with John August.</p>
<p>It is a live-action adaption of Disney's 1992 animated film of the same name, which itself is based on the eponymous tale from 'One Thousand and One Nights. The film stars Will Smith with Mena Massoud, Naomi Scott, Marwan Kenzari, Navid Negahban,
Nasim Pedrad, Billy Magnussen and Numan Acar in supporting roles, as well as the voices of Alan Tudyk and Frank Welker.</p>
<p>The plot follows Aladdin a street urchin, as he falls in love with a princess Jasmine, befriends a wish granting Genie and battles the wicked socerer Jafar.</p>
<a href="./booking.html" class="book-ticket-link">Book A Ticket</a>
</article>
<section>
<div class="aladdin-cast-img">
<img src="./Cast Images/Aladdin_cast 1.png" alt="... ">
</div>
</section>
</div>
<!-- =========================================================SPIDERMAN-CONTAINER===============================================================-->
<section class="cast" id="cast" data-aos="zoom-in" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="true" data-aos-once="false" data-aos-anchor-placement="top-center">
<section id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" id="carousel-container">
<div class="carousel-item active">
<img src="./Cast Images/spiderman_cast 2.png" alt=" ... ">
</div>
<div class="carousel-item">
<img src="./Cast Images/spiderman_cast 4.png" alt="... ">
</div>
<div class="carousel-item">
<img src="./Cast Images/spiderman_cast 6.png" alt="... ">
</div>
<div class="carousel-item">
<img src="./Cast Images/spiderman_cast 5.png" alt="... ">
</div>
</div>
</section>
<article class="cast-text">
<h1> SPIDER-MAN: N0 WAY HOME</h1>
<progress value="85" max="100"></progress>
<p>An American superhero film based on the Marvel Comics character Spider-Man, co-produced by Columbia Pictures and Marvel Studios and distributed by Sony Pictures Releasing. It is the sequel to Spider-Man: Homecoming (2017) and Spider-Man: Far
From Home (2019), and the 27th film in the Marvel Cinematic Universe (MCU). The film was directed by Jon Watts and written by Chris McKenna and Erik Sommers.
</p>
<p>It stars Tom Holland as Peter Parker / Spider-Man alongside Zendaya, Benedict Cumberbatch, Jacob Batalon, Jon Favreau, Jamie Foxx, Willem Dafoe, Alfred Molina, Benedict Wong, Tony Revolori, Marisa Tomei, Andrew Garfield, and Tobey Maguire.
</p>
<p>In the film, Parker asks Dr. Stephen Strange (Cumberbatch) to use magic to make his identity as Spider-Man a secret again following its public revelation at the end of Far From Home. When the spell goes wrong, the multiverse is broken open
which allows visitors from alternate realities to enter Parker's universe.</p>
<a href="./booking.html" class="book-ticket-link">Book A Ticket</a>
</article>
<section>
<div class="spiderman-cast-img">
<img src="./Cast Images/spiderman_cast 2.png" alt="... ">
</div>
</section>
</section>
<!-- =========================================================HARRYPORTER-CONTAINER===============================================================-->
<section class="cast" id="cast" data-aos="zoom-in" data-aos-offset=" 200" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="true" data-aos-once="false" data-aos-anchor-placement="top-center">
<section id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" id="carousel-container">
<div class="carousel-item active">
<img src="./Cast Images/Harry-cast 3.png" alt=" ... ">
</div>
<div class="carousel-item">
<img src="./Cast Images/Harry-cast 1.png" alt="... ">
</div>
<div class="carousel-item">
<img src="./Cast Images/Harry-cast 2.png" alt="... ">
</div>
<div class="carousel-item">
<img src="./Cast Images/Harry-cast 4.png" alt="... ">
</div>
</section>
<article class="cast-text">
<h1> HARRY POTTER AND THE PHILOSOPHER'S STONE
</h1>
<progress value="85" max="100"></progress>
<p>A fantasy film directed by Chris Columbus and distributed by Warner Bros. Pictures, based on J. K. Rowling's 1997 novel of the same name. Produced by David Heyman and screenplay by Steve Kloves, it is the first instalment of the Harry Potter
film series.
</p>
<p>The film was directed by Sam Raimi, written by Michael Waldron, Benedict Cumberbatch as Stephen Strange, alongside with Elizabeth Olsen, Chiwetel Ejoifor, Benedict Wong, Xochiti Gomez, Michael Stuhlbarg and Rachael McAdams.The film stars Daniel
Radcliffe as Harry Potter, with Rupert Grint as Ron Weasley, and Emma Watson as Hermione Granger. Its story follows Harry's first year at Hogwarts School of Witchcraft and Wizardry as he discovers that he is a famous wizard and begins
his formal wizarding education. </p>
<a href="./booking.html" class="book-ticket-link">Book A Ticket</a>
</article>
<section>
<div class="harry-cast-img">
<img src="./Cast Images/Harry-cast 1 (2).png" alt="... ">
</div>
</section>
</section>
<!-- =========================================================DUNE-CONTAINER===============================================================-->
<section class="cast" id="cast" data-aos="zoom-in" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="true" data-aos-once="false" data-aos-anchor-placement="top-center">
<section id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" id="carousel-container">
<div class="carousel-item active">
<img src="./Cast Images/Dune_cast 7.png" alt=" ... ">
</div>
<div class="carousel-item">
<img src="./Cast Images/Dune_cast 8.png" alt="... ">
</div>
<div class="carousel-item">
<img src="./Cast Images/Dune_cast 3.png" alt="... ">
</div>
<div class="carousel-item">
<img src="./Cast Images/Dune_cast 4.png" alt="... ">
</div>
<div class="carousel-item">
<img src="./Cast Images/Dune_cast 2.png" alt="... ">
</div>
<div class="carousel-item">
<img src="./Cast Images/Dune_cast 5.png" alt="... ">
</div>
<div class="carousel-item">
<img src="./Cast Images/Dune_cast 6.png" alt="... ">
</div>
</div>
</section>
<article class="cast-text">
<h1> DUNE</h1>
<progress value="85" max="100"></progress>
<p> An American epic science fiction film directed by Denis Villeneuve from a screenplay by Villeneuve, Jon Spaihts, and Eric Roth. It is the first of a two-part adaptation of the 1965 novel by Frank Herbert, primarily covering the first half
of the book.
</p>
<p>The ensemble cast includes Timothée Chalamet, Rebecca Ferguson, Oscar Isaac, Josh Brolin, Stellan Skarsgård, Dave Bautista, Stephen McKinley Henderson, Zendaya, David Dastmalchian, Chang Chen, Sharon Duncan-Brewster, Charlotte Rampling, Jason
Momoa, and Javier Bardem.</p>
<p>Set in the far future, the film follows Paul Atreides as his family, the noble House Atreides, is thrust into a war for the deadly and inhospitable desert planet Arrakis. </p>
<a href="./booking.html" class="book-ticket-link">Book A Ticket</a>
</article>
<section>
<div class="dune-cast-img">
<img src="./Cast Images/Dune_cast 7.png" alt="... ">
</div>
</section>
</section>
<!-- =========================================================REDNOTICE-CONTAINER===============================================================-->
<section class="cast " id="cast " data-aos="zoom-in" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="true" data-aos-once="false" data-aos-anchor-placement="top-center">
<section id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" id="carousel-container">
<div class="carousel-item active">
<img src="./Cast Images/Rednotice-cast1 (2).png" alt=" ... ">
</div>
<div class="carousel-item ">
<img src="./Cast Images/Rednotice-cast1 (1).png" alt="... ">
</div>
</div>
</section>
<article class="cast-text">
<h1>RED NOTICE</h1>
<progress value="90" max="100"></progress>
<p> An American epic science fiction film directed by Denis Villeneuve from a screenplay by Villeneuve, Jon Spaihts, and Eric Roth.
</p>
<p>It is the first of a two-part adaptation of the 1965 novel by Frank Herbert, primarily covering the first half of the book.American action comedy film written, directed, and produced by Rawson Marshall Thurber. Dwayne Johnson, who also served
as a producer, stars as an FBI agent who reluctantly teams up with a renowned art thief (Ryan Reynolds) in order to catch an even more notorious criminal (Gal Gadot). The film marks the third collaboration between Thurber and Johnson,
following Central Intelligence (2016) and Skyscraper (2018).</p>
<p>It became the most-watched film in its debut weekend, as well as the most-watched film within 28 days of release on the platform in Netflix.</p>
<a href="./booking.html" class="book-ticket-link">Book A Ticket</a>
</article>
<section>
<div class="rednotice-cast-img">
<img src="./Cast Images/Rednotice-cast1 (1).png" alt="... ">
</div>
</section>
</section>
<!-- =========================================================BEAUTY&THEBEAST-CONTAINER===============================================================-->
<section class="cast" id="cast" data-aos="zoom-in" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="true" data-aos-once="false" data-aos-anchor-placement="top-center ">
<section id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" id="carousel-container">
<div class="carousel-item active">
<img src="./Cast Images/B_B_cast_4.png" alt=" ... ">
</div>
<div class="carousel-item">
<img src="./Cast Images/B_B_cast_1.png" alt="... ">
</div>
<div class="carousel-item">
<img src="./Cast Images/B_B_cast_3.png" alt="... ">
</div>
<div class="carousel-item">
<img src="./Cast Images/B_B_cast_2.png" alt="... ">
</div>
</div>
</section>
<article class="cast-text">
<h1>BEAUTY AND THE BEAST</h1>
<progress value="90" max="100"></progress>
<p> American musical romantic fantasy film directed by Bill Condon from a screenplay by Stephen Chbosky and Evan Spiliotopoulos. Co-produced by Walt Disney Pictures and Mandeville Films.
</p>
<p>the film is a live-action adaptation of Disney's 1991 animated film of the same name, itself an adaptation of Jeanne-Marie Leprince de Beaumont's 1756 version of the fairy tale.[8] It features an ensemble and choir cast including Emma Watson
and Dan Stevens as the eponymous Belle and the Beast, with Luke Evans, Kevin Kline, Josh Gad, Ewan McGregor, Stanley Tucci, Audra McDonald, Gugu Mbatha-Raw, Ian McKellen, and Emma Thompson in supporting roles.
</p>
<a href="./booking.html" class="book-ticket-link">Book A Ticket</a>
</article>
<section>
<div class="BB-cast-img">
<img src="./Cast Images/B_B_cast_4.png" alt="... ">
</div>
</section>
</section>
<!-- =========================================================MULTIVERSE-CONTAINER===============================================================-->
<section class="cast " id="cast" data-aos="zoom-in" data-aos-offset="170" data-aos-delay="40" data-aos-duration="900" data-aos-easing="ease-in-out" data-aos-mirror="true" data-aos-once="false" data-aos-anchor-placement="top-center">
<section id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" id="carousel-container">
<div class="carousel-item active">
<img src="./Cast Images/Multiverse_cast_3.png" alt=" ... ">
</div>
<div class="carousel-item">
<img src="./Cast Images/Multiverse_cast_6.png" alt="... ">
</div>
<div class="carousel-item">
<img src="./Cast Images/Multiverse_cast_5.png" alt="... ">
</div>
<div class="carousel-item">
<img src="./Cast Images/Multiverse_cast_4.png" alt="... ">
</div>
<div class="carousel-item">
<img src="./Cast Images/Multiverse_cast_1.png" alt="... ">
</div>
<div class="carousel-item">
<img src="./Cast Images/Multiverse_cast_2.png" alt="... ">
</div>
</div>
</section>
<article class="cast-text">
<h1> DOCTOR STRANGE IN THE MULTIVERSE OF MADNESS</h1>
<progress value="85" max="100"></progress>
<p>An American superhero film based on Marvel Comics featuring the character Doctor Strange. Produced by Marvel Studios and distributed by Walt Disney Studios Motion Pictures, it is the sequel to Doctor Strange 2016 and the 28th film in the Marvel
Cinematic Universe (MCU).
</p>
<p>The film was directed by Sam Raimi, written by Michael Waldron, Benedict Cumberbatch as Stephen Strange, alongside with Elizabeth Olsen, Chiwetel Ejoifor, Benedict Wong, Xochiti Gomez, Michael Stuhlbarg and Rachael McAdams. </p>
<p>In the film, Strange protects America Chavez(Gomez) a tenager capable of travelling the multiverse from Wanda Maximoof (Olsen)</p>
<a href="./booking.html" class="book-ticket-link">Book A Ticket</a>
</article>
<section>
<div class="multiverse-cast-img">
<img src="Cast Images/Multiverse_cast_3.png" alt="... ">
</div>
</section>
</section>
<!----------------------------FOOTER----------------------------------------->
<section class="footer" id="footer">
<section class="footer-one">
<a class=" navbar-brand" href="index.html"><span>Silver</span>Screen</a>
<div class=" footer-links">
<div><a href=" # ">Home</a></div>
<div><a href=" # ">Schedule</a></div>
<div><a href=" # ">Cast</a></div>
<div><a href=" # ">Booking</a></div>
</div>
<div class="footer-social">
<a href=" https://www.linkedin.com/in/queendoline-akpan/ "><i class="fa-brands fa-linkedin "></i> <a
href=" https://www.twitter.com/forJessica_sake "><i class=" fa-brands fa-twitter "></i></a>
<a href="# "><i class="fa-brands fa-instagram "></i></a>
<div>
</section>
<div class="copy-wright">
<p>Silverscreen@gmail.com</p>
<p><span></span>Siverscreen all rights reserved.</p>
</div>
</section>
<!----------------------------------------------------JAVASCRIPT AOS IMPORT---------------------------------------------------------->
<script src=" https://unpkg.com/aos@next/dist/aos.js "></script>
<script>
AOS.init();
</script>
<script src="./index.js"></script>
<!----------------------------------------------------JAVASCRIPT BOOTSTRAP IMPORT---------------------------------------------------------->
<script src=" https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin=" anonymous"></script>
<script src=" https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>