-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
305 lines (298 loc) · 16.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Diversity</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Bootstrap icons-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
<!-- Google fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,600;1,600&display=swap"
rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300;0,500;0,600;0,700;1,300;1,500;1,600;1,700&display=swap"
rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,400;1,400&display=swap"
rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top shadow-sm" id="mainNav">
<div class="container px-5">
<a class="navbar-brand fw-bold" href="#page-top">Start</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="bi-list"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto me-4 my-3 my-lg-0">
<li class="nav-item"><a class="nav-link me-lg-3" href="#synopsis">Synopsis</a></li>
<li class="nav-item"><a class="nav-link me-lg-3" href="#reviews">Reviews</a></li>
</ul>
<button class="btn btn-primary rounded-pill px-3 mb-2 mb-lg-0" data-bs-toggle="modal"
data-bs-target="#feedbackModal">
<span class="d-flex align-items-center">
<i class="bi-chat-text-fill me-2"></i>
<span class="small">Send Feedback</span>
</span>
</button>
</div>
</div>
</nav>
<!-- Mashead header-->
<header class="masthead">
<div class="container px-5">
<div class="row gx-5 align-items-center">
<div class="col-lg-6">
<!-- Mashead text and app badges-->
<div class="mb-5 mb-lg-0 text-center text-lg-start">
<h1 class="display-1 lh-1 mb-3"> Performer's Diversity in Films </h1>
<p class="lead fw-normal text-muted mb-5">
Benedict Cumberbatch says he likes to bring diversity in films through his roles
</p>
</div>
</div>
<div class="col-lg-6">
<!-- Slider -->
<div id="carousel-films" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/img/Doctor Strange.jpg" class="d-block w-100"
alt="Doctor strange image">
</div>
<div class="carousel-item">
<img src="assets/img/Sherlock.jpg" class="d-block w-100" alt="Sherlock image">
</div>
<div class="carousel-item">
<img src="assets/img/The Imitation Game.jpg" class="d-block w-100"
alt="Imitation Game image">
</div>
</div>
<!-- Slider controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#carousel-films"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carousel-films"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button </div>
</div>
<!-- End of Slider -->
</div>
</div>
</header>
<!-- Synopsis -->
<section id="synopsis" class="pt-5 pb-0 my-0">
<div class="container">
<div class="text-center">
<h2>Synopsis</h2>
</div>
<div class="row my-4 g-0 justify-content-center">
<article class="col-lg card border-0">
<div class="card-body">
<h4 class="card-title text-center">Sherlock TV Show (2010)</h4>
<p class="card-text">
<p class="mb-2">
"The Abominable Bride" is a special episode of the British television programme Sherlock.
The episode was broadcast on BBC One, PBS and Channel One on 1 January 2016.
</p>
<div class="mb-2">
<button class="btn btn-primary btn-sm py-0" type="button" data-bs-toggle="collapse"
data-bs-target="#collapse-synopsis-1" aria-expanded="false"
aria-controls="collapse-synopsis-1">
Read more
</button>
</div>
<p class="collapse" id="collapse-synopsis-1">
It depicts the characters of the show in an alternative timeline: the Victorian London
setting of the original stories by Arthur Conan Doyle. The title is based on the quote
"Ricoletti of the club foot and his abominable wife" from "The Adventure of the Musgrave
Ritual" (1893), which refers to a case mentioned by Holmes.[1] The story also draws on
elements of original Conan Doyle stories of Holmes such as "The Five Orange Pips" (1891) and
"The Final Problem" (1893).
</p>
</p>
</div>
</article>
<article class="col-lg card border-0">
<div class="card-body">
<h4 class="card-title text-center">The Imitation Game (2014)</h4>
<p class="card-text">
<p class="mb-2">
The Imitation Game is a 2014 American historical drama film directed by Morten Tyldum and
written by Graham Moore, based on the 1983 biography Alan Turing: The Enigma by Andrew
Hodges.
</p>
<div class="mb-2">
<button class="btn btn-primary btn-sm py-0" type="button" data-bs-toggle="collapse"
data-bs-target="#collapse-synopsis-2" aria-expanded="false"
aria-controls="collapse-synopsis-2">
Read more
</button>
</div>
<p class="collapse" id="collapse-synopsis-2">
The film's title quotes the name of the game cryptanalyst Alan Turing proposed for answering
the question "Can machines think?", in his 1950 seminal paper "Computing Machinery and
Intelligence". The film stars Benedict Cumberbatch as Turing, who decrypted German
intelligence messages for the British government during World War II. Keira Knightley,
Matthew Goode, Rory Kinnear, Charles Dance, and Mark Strong appear in supporting roles.
</p>
</p>
</div>
</article>
<article class="col-lg card border-0">
<div class="card-body">
<h4 class="card-title text-center">Doctor Strange (2016)</h4>
<p class="card-text">
<p class="mb-2">
Doctor Strange is a 2016 American superhero film based on the Marvel Comics character of the
same name.
</p>
<div class="mb-2">
<button class="btn btn-primary btn-sm py-0" type="button" data-bs-toggle="collapse"
data-bs-target="#collapse-synopsis-3" aria-expanded="false"
aria-controls="collapse-synopsis-3">
Read more
</button>
</div>
<p class="collapse" id="collapse-synopsis-3">
Produced by Marvel Studios and distributed by Walt Disney Studios Motion Pictures, it is the
14th film in the Marvel Cinematic Universe (MCU). The film was directed by Scott Derrickson
from a screenplay he wrote with Jon Spaihts and C. Robert Cargill, and stars Benedict
Cumberbatch as neurosurgeon Stephen Strange along with Chiwetel Ejiofor, Rachel McAdams,
Benedict Wong, Michael Stuhlbarg, Benjamin Bratt, Scott Adkins, Mads Mikkelsen, and Tilda
Swinton. In the film, Strange learns the mystic arts after a career-ending car crash.
</p>
</p>
</div>
</article>
</div>
</div>
</section>
<!-- Reviews -->
<section id="reviews" class="bg-light pt-5 my-0">
<div class="container">
<div class="text-center">
<h2>Reviews</h2>
</div>
<div class="row my-2 g-5 justify-content-around align-items-center">
<div class="col-lg-6">
<img src="assets/img/B.png" class="img-fluid" alt="...">
</div>
<div class="col-lg-6">
<!-- accordion -->
<div class="accordion" id="reviews-content">
<article class="accordion-item">
<h2 class="accordion-header" id="heading-1">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#review-1" aria-expanded="true" aria-controls="review-1">
Sherlock
</button>
</h2>
<div id="review-1" class="accordion-collapse collapse show" aria-labelledby="heading-1"
data-bs-parent="#reviews-content">
<div class="accordion-body">
<p>
This was the TV show series that got Benedict Cumberbatch famous. It was him the
first time played as a detective in his career.
</p>
</div>
</div>
</article>
<article class="accordion-item">
<h2 class="accordion-header" id="heading-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#review-2" aria-expanded="false" aria-controls="review-2">
The Imitation Game
</button>
</h2>
<div id="review-2" class="accordion-collapse collapse" aria-labelledby="heading-2"
data-bs-parent="#reviews-content">
<div class="accordion-body">
<p>
From this movie we can see Benedict Cumberbatch keeps challenging himself,
trying out different roles.
</p>
</div>
</div>
</article>
<article class="accordion-item">
<h2 class="accordion-header" id="heading-3">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#review-3" aria-expanded="true" aria-controls="review-3">
Doctor Strange
</button>
</h2>
<div id="review-3" class="accordion-collapse collapse show" aria-labelledby="heading-3"
data-bs-parent="#reviews-content">
<div class="accordion-body">
<p>
This is Benedict's first attempt at an action movie. The movie is a huge hit at
the box office. huge hit.
</p>
</div>
</div>
</article>
</div>
<!-- End of accordion -->
</div>
</div>
</div>
</section>
<!-- Footer-->
<footer class="bg-black text-center py-5">
<div class="container px-5">
<div class="text-white-50 small">
<div class="mb-2">© Your Website 2021. All Rights Reserved.</div>
</div>
</div>
</footer>
<!-- Feedback Modal-->
<div class="modal fade" id="feedbackModal" tabindex="-1" aria-labelledby="feedbackModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header bg-gradient-primary-to-secondary p-4">
<h5 class="modal-title font-alt text-white" id="feedbackModalLabel">Send feedback</h5>
<button class="btn-close btn-close-white" type="button" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body border-0 p-4">
<form>
<div class="form-group mb-4">
<label for="email" class="form-label">Email address:</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email">
</div>
<div class="form-group mb-4">
<label for="name" class="form-label">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter your name">
</div>
<div class="form-group mb-4">
<label for="comment" class="form-label">Comment:</label>
<textarea class="form-control" id="comment" rows="3"></textarea>
</div>
<div class="text-center">
<button class="btn btn-secondary rounded-pill btn-lg disabled w-100" id="submitButton"
type="submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- End of Feedback Modal-->
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>