-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
227 lines (226 loc) · 11.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Batman 2021 movie</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,900&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./css/jquery.fancybox.min.css" />
<link rel="stylesheet" href="./css/animate.css" />
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div class="container">
<header class="header animated fadeInUp delay-1s">
<div class="logo">ActionMovie</div>
<form action="" class="search">
<input
type="search"
class="search-input"
placeholder="Movies, serials, actors"
/>
<button type="submit" class="search-button">
<img src="img/search-icon.svg" alt="search-icon" />
</button>
</form>
<div class="user">
<img src="img/bookmark.svg" alt="bookmark-icon" class="bookmark" />
<img src="img/avatar.png" alt="avatar-icon" class="avatar" />
</div>
</header>
<main class="main">
<h1 class="title">The Batman</h1>
<small class="sub-title animated fadeInUp delay-2s">Action, Crime, Drama</small>
<div class="info animated fadeInUp delay-2s">
<div class="movie-info">
<span class="tag">Movie</span>
<spa class="date-contry">25 June 2021 (USA)</spa>
<a
data-fancybox
href="https://www.youtube.com/watch?v=cElcLipGNIA"
class="teaser-link"
>Watch teaser</a
>
</div>
<a href="" class="details">Details</a>
</div>
<div class="content">
<div class="brief-info">
<img src="./img/poster.jpg" alt="poster-image" class="poster" />
<button class="button">Add to Watchlist</button>
<h3 class="actors-title">Cast:</h3>
<ul class="actors-list">
<li class="actors-list-item">Robert Pattinson</li>
<li class="actors-list-item">Zoë Kravitz</li>
<li class="actors-list-item">Paul Dano</li>
<li class="actors-list-item">Jeffrey Wright</li>
<li class="actors-list-item">John Turturro</li>
<li class="actors-list-item">Peter Sarsgaard</li>
<li class="actors-list-item">Con O'Neill</li>
<li class="actors-list-item">Max Carver</li>
<li class="actors-list-item">Andy Serkis</li>
<li class="actors-list-item">Colin Farrell</li>
</ul>
</div>
<div class="full-info">
<nav class="tabs">
<a href="#about" class="tabs-item tabs-item-active"
>Description</a
>
<a href="#reviews" class="tabs-item">Reviews</a>
<a href="#premieres" class="tabs-item">Premieres</a>
<a href="#actors" class="tabs-item">Actors</a>
<a href="#awards" class="tabs-item">Awards</a>
<a href="#facts" class="tabs-item">Facts</a>
<a href="#similar" class="tabs-item">Similar</a>
<a href="#bookmark" class="tabs-item">
<img
src="./img/bookmarked.png"
alt="bookmarked-icon"
class="bookmark-added"
/>
</a>
</nav>
<div class="full-content">
<div class="tabs-content visible" id="about">
<p class="text">
The Batman is an upcoming American superhero film based on the
DC Comics character of the same name. Produced by DC Films and
distributed by Warner Bros. Pictures, it was developed as the
tenth film in the DC Extended Universe (DCEU) and a reboot of
the Batman film franchise. Robert Pattinson will perform the
role of the Bruce Wayne / Batman.
</p>
<p class="text">
The film is directed by Matt Reeves, who wrote the screenplay
with Mattson Tomlin. The Dark Knight dons a new suit in this
reboot of the DC superhero comic book movie franchise. Rumored
to be called "The Batman", this project is set to follow on
the heels of the team-up film Batman v Superman and the
formation of the Justice League.
</p>
<h4 class="text-title">Movie development</h4>
<p class="text">
In August 2013, Ben Affleck was cast as Bruce Wayne / Batman
in the DC Extended Universe (DCEU), with plans to play the
role in at least three films. He made his debut in Batman v
Superman: Dawn of Justice (2016), and later appeared in
Suicide Squad (2016) and Justice League (2017). In October
2014, Warner Bros. revealed plans for a standalone Batman film
starring Affleck, and by July 2015, he was in negotiations to
direct and co-write the screenplay with Geoff Johns. According
to Deadline Hollywood, Affleck and Johns were expected to turn
in a draft by October 2015, and that production would begin
after Affleck finished work on Live by Night. The plot was to
be set after the events of Batman v Superman and Justice
League; Affleck stated that the film would feature a "mostly
original" story that used elements of comic books for
inspiration, like what director Zack Snyder did with Batman v
Superman. According to Robert Richardson, who was attached as
cinematographer early in development, Affleck's script was set
in Arkham Asylum and dealt with insanity.
</p>
<p class="text">
Affleck and Johns finished the first draft in March 2016, with
Johns implying that the film would explore the death of Robin
which was hinted at in Batman v Superman. At CinemaCon in
April, Warner Bros. CEO Kevin Tsujihara confirmed the film was
moving forward, with Affleck directing. In the following
months, Jeremy Irons and Joe Manganiello were confirmed to
appear—with Manganiello playing Deathstroke—and Jared Leto
expressed interest in reprising his role as the Joker from
Suicide Squad. Affleck revealed the title of the film was The
Batman in October, and in December he said filming was on
track to begin in mid-2017 for a release date in 2018. That
month, a planned Justice League sequel was delayed to
accommodate The Batman. However, in January 2017, Affleck said
the film had no script and that he may end up not directing
it. While Affleck reaffirmed his commitment to direct in an
appearance on Jimmy Kimmel Live!, by the end of the month he
decided to step down; nonetheless, he stated he would still
star and produce. By this point, Chris Terrio had turned in a
rewrite of the script.
</p>
<p class="text">
In August 2018, Reeves appeared on a Television Critics
Association panel and revealed many details about the film. He
confirmed that The Batman would be an original, noir-driven
story and not an origin story. He also revealed that the
script was nearing completion and that the film's connections
to the DCEU would be minimal but present. Reeves said that he
was "working on getting our draft in the next couple of weeks
and things are progressing," hoping to begin production in
early-to-mid 2019. Reeves submitted his first draft to Warner
Bros. the following month. Affleck's involvement was in doubt;
Kim Masters of The Hollywood Reporter reported in July 2017
that Warner Bros. was looking to replace him. This was
strengthened by further reports indicating that Reeves wanted
a younger actor to play Batman. In August 2018, Affleck went
to rehabilitation for alcohol abuse, casting further doubt
that he would be reprising his role. In January 2019, Warner
Bros. set a June , 2021 release date for The Batman, and
Affleck confirmed that he was departing. Affleck revealed in
2020 that he stepped down due to a combination of factors,
including his divorce from Jennifer Garner, the tumultuous
production of Justice League, his personal lack of enjoyment
in the role, and his alcohol problems. "I showed [my friend]
the Batman script," he recalled. "They said, 'I think the
script is good. I also think you'll drink yourself to death if
you go through what you just went through again."
</p>
</div>
<div class="tabs-content" id="reviews">
<p class="text">Reviews are comming soon.</p>
</div>
<div class="tabs-content" id="premieres">
<p class="text">Premieres are comming soon.</p>
</div>
<div class="tabs-content" id="actors">
<p class="text">Actors are comming soon.</p>
</div>
<div class="tabs-content" id="awards">
<p class="text">Awards are comming soon.</p>
</div>
<div class="tabs-content" id="facts">
<p class="text">Facts are comming soon.</p>
</div>
<div class="tabs-content" id="similar">
<p class="text">Similar movies are comming soon.</p>
</div>
<div class="subscribe">
<h3 class="subscribe-title">Subscribe for updates</h3>
<form action="#" class="subscribe-form">
<input
type="text"
class="subscribe-input"
placeholder="Enter email"
/>
<button type="submit" class="subscribe-button">
<img src="./img/check.svg" alt="check" />
</button>
</form>
<a href="#" class="banner">
<img
src="./img/add-bunner.png"
alt="add-bunner"
class="banner"
/>
</a>
</div>
</div>
</div>
</div>
</main>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="./js/jquery.fancybox.min.js"></script>
<script src="./js/main.js"></script>
</body>
</html>