-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
203 lines (203 loc) · 14.7 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
<!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">
<title>VUE Cinemas</title>
<link rel="stylesheet" href="style/all.min.css">
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="style/media.css">
</head>
<body>
<div class="header_prenav">
<a href="" class="header__nav_link"><i class="far fa-film header__prenav_icon"></i>
<span class="header__prenav_text">See no special offer restrictions</span></a>
</div>
<header class="header">
<nav class="header__nav">
<div class="container">
<div class="header__nav-content">
<a href="" class="header__nav_logo"><img src="images/logo.png" alt="Logo">CINEMAS</a>
<ul class="header__nav_list">
<li><a href="#films" class="header__nav-link">Films</a></li>
<li><a href="#series" class="header__nav-link">Serials</a></li>
<li><a href="" class="header__nav-link">Cartoons</a></li>
<li><a href="#collections" class="header__nav-link">Collections</a></li>
</ul>
</div>
</div>
</nav>
<div class="header__content">
<img src="images/kong_skull_island 1.png" alt="Header image" class="header__content_img">
<div class="header__content_info">
<div class="container">
<h1 class="header__content_title">Kong: Skull Island</h1>
<p class="header__content_description">
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_buttons">
<a href="" class="header__content_btn">Watch now</a>
<a href="" class="header__content_btn">Download</a>
</div>
</div>
</div>
</div>
</header>
<main class="main">
<div class="container">
<h2 class="main__title films_title" id="films">Films</h2>
<div class="main__films_items">
<div class="main__film_item">
<img src="images/films_img1.png" alt="" class="main__film_img">
<div class="main__film_content">
<i class="fad fa-play main__film_icon"></i>
<p class="main__film_time">2:14:33</p>
<h3 class="main__film_title">Black Panther</h3>
<p class="main__film_description">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>
<div class="main__film_item">
<img src="images/films_img2.png" alt="" class="main__film_img">
<div class="main__film_content">
<i class="fad fa-play main__film_icon"></i>
<p class="main__film_time">2:32:13</p>
<h3 class="main__film_title">The Dark Knight</h3>
<p class="main__film_description">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>
<div class="main__film_item">
<img src="images/films_img3.png" alt="" class="main__film_img">
<div class="main__film_content">
<i class="fad fa-play main__film_icon"></i>
<p class="main__film_time">1:53:45</p>
<h3 class="main__film_title">The Gentlemen</h3>
<p class="main__film_description">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>
<div class="main__film_item">
<img src="images/films_img_4.png" alt="" class="main__film_img">
<div class="main__film_content">
<i class="fad fa-play main__film_icon"></i>
<p class="main__film_time">2:58:20</p>
<h3 class="main__film_title">The Lord of the...</h3>
<p class="main__film_description">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>
</div>
<div class="main__videoblock">
<video src="video/IRON MAN 4_ RISE OF MORGAN STARK _Teaser Trailer_ (2021) _ Robert Downey Jr, Marvel Studios'.mp4" class="main__videoblock_video" muted autoplay loop></video>
<div class="main__videoblock_content">
<div class="container">
<img src="images/black_widow.png" alt="Black Widow" class="main__videoblock_img">
<p class="main__videoblock_description">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="main__videoblock_btn">Watch now</a>
</div>
</div>
</div>
<div class="main__collections">
<div class="container">
<h2 class="main__title" id="collections">Collections</h2>
<div class="main__collections_cards">
<div class="main__collection_card">
<img src="images/collection_img1.png" alt="All Marvel Films" class="main__collection_img">
<div class="main__collections_content">
<i class="fad fa-play main__film_icon a"></i>
<h3 class="main__collections_title">All Marvel Films</h3>
</div>
</div>
<div class="main__collection_card">
<img src="images/collection_img2.png" alt="All Marvel Films" class="main__collection_img">
<div class="main__collections_content">
<i class="fad fa-play main__film_icon a"></i>
<h3 class="main__collections_title">Fast and the Furious</h3>
</div>
</div>
<div class="main__collection_card">
<img src="images/collection_img3.png" alt="All Marvel Films" class="main__collection_img">
<div class="main__collections_content">
<i class="fad fa-play main__film_icon a"></i>
<h3 class="main__collections_title">Star Wars</h3>
</div>
</div>
</div>
</div>
</div>
<div class="main__series">
<div class="container">
<h2 class="main__title" id="series">Series</h2>
<div class="main__series_items">
<div class="main__series_item">
<img src="images/series_img1.png" alt="Game Of Throne" class="main__series_img">
<div class="main__series_content">
<i class="fad fa-play main__film_icon main__series_icon b"></i>
<h3 class="main__series_title">Game of Thrones</h3>
<p class="main__series_description">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="main__series_btn">Watch Now</a>
</div>
</div>
<div class="main__series_item">
<img src="images/series_img2.png" alt="Game Of Throne" class="main__series_img">
<div class="main__series_content">
<i class="fad fa-play main__film_icon main__series_icon b"></i>
<h3 class="main__series_title">Wanda Vision</h3>
<p class="main__series_description">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="main__series_btn">Watch Now</a>
</div>
</div>
<div class="main__series_item">
<img src="images/series_img3.png" alt="Game Of Throne" class="main__series_img">
<div class="main__series_content">
<i class="fad fa-play main__film_icon main__series_icon b"></i>
<h3 class="main__series_title">The Flash</h3>
<p class="main__series_description">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="main__series_btn">Watch Now</a>
</div>
</div>
<div class="main__series_item">
<img src="images/series_img4.png" alt="Game Of Throne" class="main__series_img">
<div class="main__series_content">
<i class="fad fa-play main__film_icon main__series_icon b"></i>
<h3 class="main__series_title">GOTHAM</h3>
<p class="main__series_description">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="main__series_btn">Watch Now</a>
</div>
</div>
<div class="main__series_item">
<img src="images/series_img5.png" alt="Game Of Throne" class="main__series_img">
<div class="main__series_content">
<i class="fad fa-play main__film_icon main__series_icon b"></i>
<h3 class="main__series_title">The Great</h3>
<p class="main__series_description">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="main__series_btn">Watch Now</a>
</div>
</div>
<div class="main__series_item">
<img src="images/series_img6.png" alt="Game Of Throne" class="main__series_img">
<div class="main__series_content">
<i class="fad fa-play main__film_icon main__series_icon b"></i>
<h3 class="main__series_title">The Witcher</h3>
<p class="main__series_description">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="main__series_btn">Watch Now</a>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="container">
<div class="footer__info">
<div class="footer__info_links">
<a href="" class="footer__info_link"><img src="images/google_play.png" alt="Google Play"></a>
<a href="" class="footer__info_link"><img src="images/Frame.png" alt="Apple_Store"></a>
</div>
<div class="footer__info_content">
<p class="footer__info_text">© All rights reserved</p>
</div>
</div>
</div>
</footer>
</body>
</html>