-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfilm-festival-1.html
628 lines (613 loc) · 40.1 KB
/
film-festival-1.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
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel= "stylesheet" href="dennise909.github.io/website/CSS/film-style.css" >
<title >Brooklyn Film Festival</title>
</head>
<body>
<!--NAVBAR-->
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<div class="container-fluid">
<a href="#" class="navbar-brand">
<img src="../website/images_film/Logo_2.png" width= "80"height= "80" alt="">
<h4 class="d-none d-md-inline pl-2">Brooklyn Film Festival</h4>
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#home" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#about-head-section" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#movies-head-section" class="nav-link">Movies</a>
</li>
<li class="nav-item">
<a href="#tickets-head-section" class="nav-link">Tickets</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- CAROUSEL-->
<section id="showcase">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item carousel-image-1 active">
<div class= "container">
<div class="carousel-caption d-none d-sm-block text-left mb-1">
</div>
</div>
</div>
<div class="carousel-item carousel-image-2 ">
<div class= "container">
<div class="carousel-caption d-none d-sm-block text-center mb-5">
</div>
</div>
</div>
<div class="carousel-item carousel-image-3 ">
<div class= "container">
<div class="carousel-caption d-none d-sm-block text-left mb-1">
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</section>
<!--HOME ICOIN SECTION-->
<section id="home-ïcons" class= "py-5">
<div class="row">
<div class="col-xl-4 mb-4 col-md-4 text-center">
<i class="fas fa-hand-pointer fa-3x mb-2"></i>
<h3>Select your movie</h3>
<p>Visit our line area and select your favorite movie and date!</p>
</div>
<div class="col-md-4 mb-4 text-center">
<i class="fas fa-ticket-alt fa-3x mb-2"></i>
<h3>Register is free!</h3>
<p>To get your tickets you just need to request the entrance and no money needed, so hurry!</p>
</div>
<div class="col-md-4 mb-4 text-center">
<i class="fas fa-film fa-3x mb-2"></i>
<h3>Enjoy the movie!</h3>
<p>What about getting some popcorn and nice candies to enjoy tie with a nice movie in Brooklyn city center</p>
</div>
</div>
</section>
<!--ABOUT US SECTION-->
<section id="about-head-section" class="p-5">
<div class="dark-overlay">
<div class="row">
<div class="col">
<div class="container">
<h1>About us</h1>
<p class="d-none d-md-block">We are a non profit organization who lovs art specially in cinematography and we like to share this with people on our yearly festival. </p>
</div>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="col-xl-6 col-md-6 mt-5 mx-auto">
<h1>We love films</h1>
<p>The Brooklyin Film festival is one of the biggest events in the city hosted at the Bridge Park
you will get the best experience in the open space. We are glad to present 4 days of amazing movies
from all over the world. Come with your family to get the best experience ever and for free as our partners
sponsor all what is needed for you tu enjoy.
Dont miss the opportunity and register for the entries!!
</p>
</div>
<div class="col-md-6 mb-2">
<img src="https://source.unsplash.com/random/700x700/?movies" alt="" class="img-fluid rounded-circle d-none d-md-block about-img">
</div>
</div>
<div class="row">
<div class="col-md-6 mt-5 mb-5">
<img src="./website/images_film/master_mind.jpeg" alt="" class="img-fluid rounded d-none d-md-block about-img2 ">
</div>
<div id="master_mind" class="col-md-6 mt-5 mx-auto pt-5 mt-5">
<h1>Our master mind</h1>
<p>Jennifer Viala is the founder of Brooklyn Vibes Events Co., with a wide experience on the cinematography industry
her biggest desire was to share her passion with the world. Since 2009 she started bringing movies to people in Brooklyn
by organizing this amazing festival. Ten years latter it has become one of the biggest events in Brooklyn and one of the most important
in the world.
Her inpiration has always been to make people connect their emotions through movies as well as enjoying the nature around their love ones.
Help us mantain this project by coming and get a pleasant time.
</p>
</div>
</div>
</div>
<!--MOVIES_2EXP-->
<section id="movies-head-section" class="p-5">
<div class="dark-overlay">
<div class="row">
<div class="col">
<div class="container">
<h1>Movies</h1>
<p class="d-none d-md-block">Take a look on our line up offer per day and pick the one you feel more in touch with</p>
</div>
</div>
</div>
</div>
</section>
<!--MOVIESPIS-->
<div class="container mt-5">
<nav>
<div class="nav nav-tabs justify-content-center" id="nav-tab" role="tablist">
<a class="nav-item nav-link active text-dark " id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">August 5</a>
<a class="nav-item nav-link text-dark" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">August 6</a>
<a class="nav-item nav-link text-dark" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">August 7</a>
<a class="nav-item nav-link text-dark" id="nav-contact-tab2" data-toggle="tab" href="#nav-contact2" role="tab" aria-controls="nav-contact2" aria-selected="false">August 8</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<div class= "container pt-5" id="movies_part">
<div class="row">
<div class="card-deck">
<div class= " col-md-4">
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/en/8/85/Roma_theatrical_poster.png" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">Roma</h5>
<p class="card-text text-justify">Film written and directed by Alfonso Cuarón, who also produced, shot, and co-edited it. Set in 1970 and 1971, Roma, which is a semi-autobiographical take on Cuarón's upbringing in the Colonia Roma neighborhood of Mexico City, stars Yalitza Aparicio and Marina de Tavira and follows the life of a live-in housekeeper of a middle-class family.</p>
<button type="button justify-content-center" class="btn btn-outline-secondary" data-toggle="modal" data-target="#exampleModal"> Watch trailer
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<iframe width="560" height="315" src="https://www.youtube.com/embed/6BS27ngZtxg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<div class= " col-md-4">
<div class="card">
<img class="card-img-top" src="https://images-na.ssl-images-amazon.com/images/I/51eSJPcKp1L._SX381_BO1,204,203,200_.jpg" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">Finding Nemo</h5>
<p class="card-text text-justify">It tells the story of the overprotective ocellaris clownfish named Marlin who,
along with a regal blue tang named Dory, searches for his abducted son Nemo all the way to Sydney Harbour. Along the way, Marlin learns to take risks and comes to terms with Nemo taking care of himself.</p>
<button type="button justify-content-md-center" class="btn btn-outline-secondary" data-toggle="modal" data-target="#finding_nemo"> Watch trailer
</button>
<div class="modal fade" id="finding_nemo" tabindex="-1" role="dialog" aria-labelledby="finding_nemoLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<iframe width="560" height="315" src="https://www.youtube.com/embed/wZdpNglLbt8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<div class= "col-md-4">
<div class="card">
<img class="card-img-top" src="http://www.gstatic.com/tv/thumb/v22vodart/15663025/p15663025_v_v8_aa.jpg" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">To all the boys I've loved before</h5>
<p class="card-text text-justify">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<button type="button justify-content-md-center" class="btn btn-outline-secondary" data-toggle="modal" data-target="#all_boys"> Watch trailer
</button>
<div class="modal fade" id="all_boys" tabindex="-1" role="dialog" aria-labelledby="all_boysLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<iframe width="560" height="315" src="https://www.youtube.com/embed/555oiY9RWM4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<div class= "container pt-5"id="movies_part">
<div class="row">
<div class="card-deck">
<div class= "col-md-4">
<div class="card">
<img class="card-img-top" src="https://is4-ssl.mzstatic.com/image/thumb/Video/v4/da/f6/8f/daf68f78-f6a1-c500-a1a8-1fa934afd716/mza_5261059706323853165.jpg/268x0w.jpg" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">Frida</h5>
<p class="card-text text-justify">It depicts the professional and private life of the surrealist Mexican painter Frida Kahlo. It stars Salma Hayek in her Academy Award-nominated portrayal as Kahlo and Alfred Molina as her husband, Diego Rivera. The movie was adapted by Clancy Sigal, Diane Lake, Gregory Nava,
Anna Thomas and unofficially by Edward Norton from the book Frida: A Biography of Frida Kahlo by Hayden Herrera.</p>
<button type="button justify-content-md-center" class="btn btn-outline-secondary" data-toggle="modal" data-target="#frida_movie"> Watch trailer
</button>
<div class="modal fade" id="frida_movie" tabindex="-1" role="dialog" aria-labelledby="frida_movieLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<iframe width="560" height="315" src="https://www.youtube.com/embed/uOUzQYqba4Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<div class= "col-md-4">
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/en/8/8b/Hotel_Mumbai_poster.jpg" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">Hotel Mumbai</h5>
<p class="card-text text-justify">It is based on the 2009 documentary Surviving Mumbai about the Mumbai attacks in 2008 at the Taj Mahal Palace Hotel in India. The film stars Dev Patel, Armie Hammer, Nazanin Boniadi, Anupam Kher, Tilda Cobham-Hervey, Jason Isaacs, Suhail Nayyar, and Natasha Liu Bordizzo.</p>
<button type="button justify-content-md-center" class="btn btn-outline-secondary" data-toggle="modal" data-target="#hotel_mumbai"> Watch trailer
</button>
<div class="modal fade" id="hotel_mumbai" tabindex="-1" role="dialog" aria-labelledby="hotel_mumbaiLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<iframe width="560" height="315" src="https://www.youtube.com/embed/gVQpbp54ljA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<div class= "col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/az/9/99/Qisas%C3%A7%C4%B1lar_-_Sonsuzluq_sava%C5%9F%C4%B1_%28film%2C_2018%29.jpg" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">Avengers</h5>
<p class="card-text text-justify">Is a 2018 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 sequel to 2012's The Avengers and 2015's Avengers: Age of Ultron, and the nineteenth film in the Marvel Cinematic Universe (MCU)</p>
<button type="button justify-content-md-center" class="btn btn-outline-secondary" data-toggle="modal" data-target="#avengers_movie"> Watch trailer
</button>
<div class="modal fade" id="avengers_movie" tabindex="-1" role="dialog" aria-labelledby="avengers_movieLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<iframe width="560" height="315" src="https://www.youtube.com/embed/TcMBFSGVi1c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
<div class= "container pt-5"id="movies_part">
<div class="row">
<div class="card-deck">
<div class= "col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="https://contentserver.com.au/assets/648099_blackkklansman_v8.jpg" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">Black k Klansman</h5>
<p class="card-text text-justify">In the early 1970s, Ron Stallworth is hired as the first black officer in the Colorado Springs, Colorado police department. Stallworth is initially assigned to work in the records room, where he faces racial slurs from his coworkers. Stallworth requests a transfer to go undercover, and is assigned to infiltrate a local rally at which national civil rights leader Kwame Ture (birth name Stokely Carmichael) is to give a speech.
</p>
<button type="button justify-content-md-center" class="btn btn-outline-secondary" data-toggle="modal" data-target="#video_1"> Watch trailer
</button>
<div class="modal fade" id="video_1" tabindex="-1" role="dialog" aria-labelledby="video_1Label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<iframe width="560" height="315" src="https://www.youtube.com/embed/fQNZhs0QKq0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<div class= "col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="http://t3.gstatic.com/images?q=tbn:ANd9GcSsaMDp_xKXPXpnHwJzv_SpU79Egd15wd7KccS3OSr4l917Fwwq" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">Bohemian Rhapsody</h5>
<p class="card-text">reddie defied stereotypes and shattered convention to become one of the most beloved entertainers on the planet. The film traces the meteoric rise of the band through their iconic songs and revolutionary sound. They reach unparalleled success, but in an unexpected turn Freddie, surrounded by darker influences, shuns Queen in pursuit of his solo career</p>
<button type="button " class="btn btn-outline-secondary" data-toggle="modal" data-target="#bohemianrhapsody"> Watch trailer
</button>
<div class="modal fade" id="bohemianrhapsody" tabindex="-1" role="dialog" aria-labelledby="bohemianrhapsodyLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<iframe width="560" height="315" src="https://www.youtube.com/embed/mP0VHJYFOAU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<div class= "col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="https://contentserver.com.au/assets/638902_jurrasic_world_v8.jpg" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">Jurassic World</h5>
<p class="card-text text-justify">Twenty-two years after the original Jurassic Park failed, the new park, also known as Jurassic World, is open for business. After years of studying genetics, the scientists on the park genetically engineer a new breed of dinosaur, the Indominus Rex. When everything goes horribly wrong, will our heroes make it off the island?</p>
<button type="button justify-content-md-center" class="btn btn-outline-secondary" data-toggle="modal" data-target="#jurassic_world"> Watch trailer
</button>
<div class="modal fade" id="jurassic_world" tabindex="-1" role="dialog" aria-labelledby="jurassic_worldLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<iframe width="560" height="315" src="https://www.youtube.com/embed/RFinNxS5KN4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-contact2" role="tabpanel" aria-labelledby="nav-contact-tab2">
<div class= "container pt-5"id="movies_part">
<div class="row">
<div class="card-deck">
<div class= "col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="http://t3.gstatic.com/images?q=tbn:ANd9GcQtFlS_QUd__UoDUs-xK7q45tNdXvD2GjwJqrF_TBh4Mkl7fEUE" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">Once upon a time in Hollywood</h5>
<p class="card-text text-justify">Quentin Tarantino is setting his sights on a subject more dangerous than Charles Manson himself: Hollywood. Here's what we know about 'Once Upon a Time in Hollywood' ... So Far</p>
<button type="button justify-content-md-center" class="btn btn-outline-secondary" data-toggle="modal" data-target="#once_upon_time"> Watch trailer
</button>
<div class="modal fade" id="once_upon_time" tabindex="-1" role="dialog" aria-labelledby="once_upon_timeLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Scf8nIJCvs4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<div class= "col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="http://t1.gstatic.com/images?q=tbn:ANd9GcQ1bDkDLq-_bteASakhnC1XYwlkErFuqcof7KMhFpRwVhCTh1Vo" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">Captan Marvel</h5>
<p class="card-text text-justify">For Steve Rogers, awakening after decades of suspended animation involves more than catching up on pop culture; it also means that this old school idealist must face a world of subtler threats and difficult moral complexities. That becomes clear when Director Nick Fury is killed by the mysterious assassin, the Winter Soldier, but not before warning Rogers that SHIELD has been subverted by its enemies.</p>
<button type="button " class="btn btn-outline-secondary" data-toggle="modal" data-target="#capitanMarvel"> Watch trailer
</button>
<div class="modal fade" id="capitanMarvel" tabindex="-1" role="dialog" aria-labelledby="capitanMarvelLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<iframe width="560" height="315" src="https://www.youtube.com/embed/0LHxvxdRnYc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<div class= "col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="http://t2.gstatic.com/images?q=tbn:ANd9GcTqR5uODJzk3PqEuZvzqCV52r_ZfmYkoy_Tl-H0vbzpgceszT2h" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">Toy Story 4</h5>
<p class="card-text text-justify">When a new toy called "Forky" joins Woody and the gang, a road trip alongside old and new friends reveals how big the world can be for a toy.</p>
<button type="button justify-content-md-center" class="btn btn-outline-secondary" data-toggle="modal" data-target="#toy_story"> Watch trailer
</button>
<div class="modal fade" id="toy_story" tabindex="-1" role="dialog" aria-labelledby="toy_storyLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<iframe width="560" height="315" src="https://www.youtube.com/embed/wmiIUN-7qhE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--CONTACT FORM-->
<section>
<div class="dark-overlay"id="tickets-head-section" class="p-5">
<div class="container pt-5 d-inline-block">
<div class="row ">
<div class="col">
<h1>Tickets</h1>
<p class="d-none d-md-block">Dont miss the oportunity to come to this awesome experience in Brooklyin, full the form and get one
of our limited seats available for free!!</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 mt-5 pt-5">
<form>
<div class="form-row mt-6">
<div class="form-group col-md-6">
<label for="inputName">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="">
</div>
<div class="form-group col-md-6">
<label for="inputSurname">Surname</label>
<input type="text" class="form-control" id="inputSurname" placeholder="">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-8">
<label for="inputAddress2">Email</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="">
</div>
<div class="form-group col-md-4">
<label for="inputState">No.people</label>
<select id="inputState" class="form-control">
<option selected>1</option>
<option selected>2</option>
<option selected>3</option>
<option selected>4</option>
<option selected>5</option>
</select>
</div>
</div>
<div class="form-row mt-3">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">August 5</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">August 6</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">August 7</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">August 8</label>
</div>
</div>
<div class= "form-row">
<div class="form-group col-md-12 mt-4">
<button type="submit" class="btn btn-outline-secondary btn-block mb-4">Sign in</button>
</div>
</div>
</form>
</div>
<div class="col md-6 mt-5 mb-5">
<img src="https://images.unsplash.com/photo-1510130315046-1e47cc196aa0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="" class="img-fluid rounded d-none d-md-block about-img2 ">
</div>
</div>
</div>
</div>
</section>
<!--STAKEHOLDERS-->
<section id="partners" class= "py-5">
<div class="row">
<div class="container">
<h2 class="text-center text-white"> Our partners</h2>
</div>
</div>
<div class="row">
<div class="col-md-2 mb-4 text-center">
<img class=img-fluid src="http://cdn.shopify.com/s/files/1/0052/6761/9910/files/brooklyn_fare_large.png?v=1538113335" width= "120"height= "120" alt="">
</div>
<div class="col-md-2 mb-4 text-center">
<img class=img-fluid src="https://bkaccelerator.com/wp-content/uploads/2018/06/world-cities-culture-forum-logo.png" width= "120"height= "120" alt="">
</div>
<div class="col-md-2 mb-4 text-center">
<img class=img-fluid src="http://s3.amazonaws.com/downtown-brooklyn/imgr/downtown-brooklyn-logo-512.png" width= "120"height= "120" alt="">
</div>
<div class="col-md-2 mb-4 text-center">
<img class=img-fluid src="http://wearyourvoicemag.com/wp-content/uploads/2014/05/wyv-logo-retina.png" width= "120"height= "120" alt="">
</div>
<div class="col-md-2 mb-4 text-center">
<img class=img-fluid src="https://is1-ssl.mzstatic.com/image/thumb/Purple128/v4/be/be/59/bebe5977-56c3-de16-f692-46aa703d396c/source/512x512bb.jpg" width= "120"height= "120" alt="">
</div>
<div class="col-md-2 mb-4 text-center">
<img class=img-fluid src="http://www.ps9brooklyn.org/wp-content/uploads/2018/02/International-Childrens-Film-Festival-Logo-1.png" width= "120"height= "120" alt="">
</div>
</div>
</div>
</section>
<!--PICS OF FESTIVAL-->
<section>
<div class="container text-center mt-5">
<h3>SHARED IMAGES OF THE FESTIVAL</h3>
<h5 class="text-primary">#BROOKLYNFILMFESTIVAL</h5>
<div class="row mt-4">
<div class="col-6 col-lg-3 mb-4">
<img src="https://images.unsplash.com/photo-1535446937720-e4cad0145efe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="" class="img-fluid">
</div>
<div class="col-6 col-lg-3 mb-4">
<img src="https://images.unsplash.com/photo-1499631625988-ccd9f8ca1094?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="" class="img-fluid">
</div>
<div class="col-6 col-lg-3 mb-4">
<img src="https://images.unsplash.com/photo-1455594408994-253112b1b26e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="" class="img-fluid">
</div>
<div class="col-6 col-lg-3 mb-4">
<img src="https://images.unsplash.com/photo-1549192309-b5b9ecf012e0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80" alt="" class="img-fluid">
</div>
<div class="col-6 col-lg-3 mb-4">
<img src="https://images.unsplash.com/photo-1455849318743-b2233052fcff?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="" class="img-fluid">
</div>
<div class="col-6 col-lg-3 mb-4">
<img src="https://images.unsplash.com/photo-1511466431307-d603e868975c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="" class="img-fluid">
</div>
<div class="col-6 col-lg-3 mb-4">
<img src="https://images.unsplash.com/photo-1512149074996-e923ac45be6a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="" class="img-fluid">
</div>
<div class="col-6 col-lg-3 mb-4">
<img src="https://images.unsplash.com/photo-1550178683-4529beff6c08?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="" class="img-fluid">
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer id="main-footer" class="text-center p-4">
<div class="container">
<ul class="list-unstyled">
<li>
<a class="text-white text-left" href="http://brooklyn.news12.com/" target="_blank">Brooklyn News</a>
</li>
<a class="text-white text-right" href="https://www.brooklynbridgepark.org/park" target="_blank">Bridge Park’s website</a>
</ul>
</div>
<!-- Social buttons -->
<div class="container">
<ul class="list-unstyled list-inline text-center">
<li class="list-inline-item">
<a id="facebook"class="fab fa-facebook-square fa-2x" href="https://www.facebook.com/" target="_blank">
</a>
</li>
<li class="list-inline-item">
<a class="fab fa-twitter-square fa-2x" href="https://twitter.com/" target="_blank">
</a>
</li>
<li class="list-inline-item">
<a class="fab fa-instagram fa-2x" href="https://www.instagram.com/?hl=en" target="_blank">
</a>
</li>
<li class="list-inline-item" >
<a class="fab fa-google-plus-square fa-2x" href="https://plus.google.com/discover" target="_blank">
</a>
</li>
<li class="list-inline-item">
<a class="fab fa-youtube fa-2x" href="https://www.youtube.com/?hl=es" target="_blank">
</a>
</li>
</ul>
</div>
<!--COPYRIGHT-->
<div class="container-fluid">
<div class="row">
<div class="col">
<p>Copyright ©
<span id="year"></span> Brooklyn Film Festival</p>
</div>
</div>
</div>
</footer>
<script src="./website/jquery-3.4.0.min.js"></script>
<script src="./website/popper.min.js"></script>
<script src="./website/bootstrap.min.js"></script>
<script>
// Get the current year for the copyright
$('#year').text(new Date().getFullYear());
</script>
</body>
</html>