-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
301 lines (278 loc) · 13.2 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
<!DOCTYPE html>
<html lang="ru">
<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">
<link rel="stylesheet" href="./assets/styles/style.css">
<link rel="stylesheet" href="./assets/styles/media.css">
<title>VUE-CINEMA</title>
</head>
<body>
<header class="header">
<div class="header__poster">
<img src="./assets/images/filmIcon.svg" alt="FILM ICON">
<p class="header__see-descr">
See no special offer restrictions
</p>
</div>
<nav class="nav">
<div class="container nav__content">
<a href="#!" class="nav__content-logo">
<img src="./assets/images/logo.svg" alt="LOGO">
<span>CINEMAS</span>
</a>
<div class="nav__menu">
<ul class="nav__content-list">
<li>
<a href="#!" class="nav__content-list-link">
Films
</a>
</li>
<li>
<a href="#!" class="nav__content-list-link">
Serials
</a>
</li>
<li>
<a href="#!" class="nav__content-list-link">
Cartoons
</a>
</li>
<li>
<a href="#!" class="nav__content-list-link">
Collections
</a>
</li>
</ul>
<div class="nav__menu-btn">
<div class="nav__menu-btn-line">
</div>
</div>
</div>
</div>
</nav>
<div class="header__content container">
<h1 class="header__content-title">
Kong: Skull Island
</h1>
<p class="header__content-descr">
The film takes the viewer to the 70s of the last century. The protagonist organizes an expedition to the Skull island, always covered in fog, on which King Kong was once caught to find the missing brother and some mysterious substance. During...
</p>
<div class="header__content-btns-group">
<a href="#" class="header__content-btn">
Watch now
</a>
<a href="#" class="header__content-btn">
Download
</a>
</div>
</div>
</header>
<main class="main">
<section class="films">
<div class="container films__content">
<h2 class="films__content-title section__title">
Films
</h2>
<div class="films__content-cards-group">
<div class="films__content-card one">
<a href="#" class="card__brn-play">
<img src="./assets/images/play.svg" alt="">
</a>
<h3 class="card__timer">
2:14:33
</h3>
<h3 class="card__title">
Black Panther
</h3>
<p class="card__descr">
At first glance, you can decide that Wakanda is an ordinary territory of wild Africa, but this is not so. Here, in the bowels of the desert lands, there are hidden deposits of a unique metal capable of absorbing...
</p>
</div>
<div class="films__content-card two">
<a href="#" class="card__brn-play">
<img src="./assets/images/play.svg" alt="">
</a>
<h3 class="card__timer">
2:32:13
</h3>
<h3 class="card__title">
The Dark Knight
</h3>
<p class="card__descr">
Batman raises stakes in the war on crime. With the help of Lieutenant Jim Gordon and Attorney Harvey Dent, he intends to clear the streets of crime that is poisoning the city. The cooperation is effective, but soon they...
</p>
</div>
<div class="films__content-card tree">
<a href="#" class="card__brn-play">
<img src="./assets/images/play.svg" alt="">
</a>
<h3 class="card__timer">
1:53:45
</h3>
<h3 class="card__title">
The Gentlemen
</h3>
<p class="card__descr">
One cunning American, from his student years, had been selling drugs, and now he came up with a scheme of illegal enrichment using the estates of an impoverished English aristocracy and made a very good fortune on ...
</p>
</div>
<div class="films__content-card four">
<a href="#" class="card__brn-play">
<img src="./assets/images/play.svg" alt="">
</a>
<h3 class="card__timer">
2:58:20
</h3>
<h3 class="card__title">
The Lord of the...
</h3>
<p class="card__descr">
Tales of Middle-earth is a chronicle of the Great War for the Ring, a war that lasted more than one thousand years. The one who owned the Ring received power over all living creatures, but was obliged to serve evil...
</p>
</div>
</div>
</div>
</section>
<section class="video__section">
<div class="container video__section-content">
<video class="video__secton-bg" autoplay muted loop src="./assets/video/Marvel Studios' Black Widow _ Final Trailer .mp4"></video>
<img src="./assets/images/video-poster.svg" alt="">
<p class="video__section-descr">
After the events at the Leipzig-Halle airport, Natasha was overtaken by the mistakes of the past. The Red Room again made itself felt - a program to create Widows - professional killers and spies - just like her. Natasha decides once and for all to deal with people whose efforts she herself became a Widow.
</p>
<a href="#" class="video__section-btn">Watch now</a>
</div>
</section>
<section class="collections">
<div class="container collections__content">
<h2 class="collections__content-title section__title">
Collections
</h2>
<div class="collections__content-cards">
<div class="collections__content-card col_1">
<img src="./assets/images/play.svg" alt="PLAY">
<p class="collections__content-card-category">
All Marvel Films
</p>
<div class="card_elements left">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="card_elements right">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="collections__content-card col_2">
<img src="./assets/images/play.svg" alt="PLAY">
<p class="collections__content-card-category">
Fast and the Furious
</p>
<div class="card_elements left">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="card_elements right">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="collections__content-card col_3">
<img src="./assets/images/play.svg" alt="PLAY">
<p class="collections__content-card-category">
Star Wars
</p>
<div class="card_elements left">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="card_elements right">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
</section>
<section class="series">
<div class="container series__content">
<h2 class="series__content-title section__title">
Series
</h2>
<div class="series__content-card bg">
<h3 class="series__content-card-title">
Game of Thrones
</h3>
<p class="series__content-card-descr">
The time of prosperity is drawing to a close, and the summer, which lasted almost a decade, is dying away. Around the center of power of the Seven Kingdoms, the Iron Throne, a conspiracy is ripening, and during this difficult time, the king decides to seek support from his youth friend Eddard Stark. In a world where everyone - from the king to the mercenary - is eager for power, intrigues and is ready to stick a knife in the back, there is ...
</p>
<a href="#" class="video__section-btn series__content-card-btn">Watch now</a>
</div>
<div class="series__content-iterable">
<div class="series__content-item">
<img src="./assets/images/play.svg" alt="">
<h4 class="series__content-item-title">
Wanda Vision
</h4>
</div>
<div class="series__content-item">
<img src="./assets/images/play.svg" alt="">
<h4 class="series__content-item-title">
The Flash
</h4>
</div>
<div class="series__content-item">
<img src="./assets/images/play.svg" alt="">
<h4 class="series__content-item-title">
The Great
</h4>
</div>
<div class="series__content-item">
<img src="./assets/images/play.svg" alt="">
<h4 class="series__content-item-title">
GOTHAM
</h4>
</div>
<div class="series__content-item">
<img src="./assets/images/play.svg" alt="">
<h4 class="series__content-item-title">
The witcher
</h4>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__content container">
<div class="footer__content-links">
<img src="./assets/images/play_store.svg" alt="">
<img src="./assets/images/app.svg" alt="">
</div>
<p class="footer__content-descr">
© PROWEB. В целях обучения 2021
</p>
</div>
</footer>
</body>
</html>