-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
257 lines (252 loc) · 12.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
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
<!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-Cinema</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="styles/glide.core.min.css">
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/fonts.css">
<link rel="stylesheet" href="styles/media.css">
<link rel="icon" href="img/111.png">
</head>
<body>
<div class="ads">
<span><i class="fas fa-film"></i></span>
<span class="ads__text">See no special offer restrictions</span>
</div>
<nav class="nav">
<div class="scrollup__btn"><i class="fas fa-angle-up"></i></div>
<div class="container">
<div class="nav_blog">
<a class="logo" href="/"><img src="img/111.png" alt="logo">CINEMAS</a>
<ul class="nav__list">
<li><a class="nav__link" href="#films">Films</a></li>
<li><a class="nav__link" href="#series">Serials</a></li>
<li><a class="nav__link" href="#trailer">Trailers</a></li>
<li><a class="nav__link" href="#collections">Collections</a></li>
</ul>
<div class="menu__icon">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</nav>
<header class="header">
<div class="container">
<h2 class="header__title">Kong: Skull Island</h2>
<p class="header__text">
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__btns">
<a class="btn header__btn" href="#">Watch Now</a>
<a class="btn header__btn" href="#">Download</a>
</div>
</div>
</header>
<main class="main">
<div class="films" id="films">
<div class="container">
<h2 class="films__title">Films</h2>
<div class="films_content">
<div class="row">
<section class="films_cards">
<div class="films_relative">
<img class="films__img" src="img/panther.jpg" alt="" />
<div class="films_cards-relative">
<span class="icon-play"><i class="fas fa-play"></i></span
><span class="films__time">2:14:33</span>
<h3 class="films_title">Black Panther</h3>
<p class="films__text">
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>
</section>
<section class="films_cards">
<div class="films_relative">
<img class="films__img" src="img/batmen.jpg" alt="" />
<div class="films_cards-relative">
<span class="icon-play"><i class="fas fa-play"></i></span
><span class="films__time">1:54:43</span>
<h3 class="films_title">The Dark Knight</h3>
<p class="films__text">
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>
</section>
<section class="films_cards">
<div class="films_relative">
<img class="films__img" src="img/gentlemen.jpg" alt="" />
<div class="films_cards-relative">
<span class="icon-play"><i class="fas fa-play"></i></span
><span class="films__time">1:44:23</span>
<h3 class="films_title">The Gentlemen</h3>
<p class="films__text">
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>
</section>
<section class="films_cards">
<div class="films_relative">
<img class="films__img" src="img/rings.jpg" alt="" />
<div class="films_cards-relative">
<span class="icon-play"><i class="fas fa-play"></i></span
><span class="films__time">2:10:33</span>
<h3 class="films_title">King of the Ring</h3>
<p class="films__text">
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>
</section>
</div>
</div>
</div>
</div>
<div class="trailer" id="trailer">
<div class="trailer__video__blog">
<video class="trailer__video"src="video/tr.mkv" autoplay muted loop></video>
<span class="close__icon"><i class="fas fa-times"></i></span>
<a href="https://uzcoin404.github.io/videoPlayer/" class="videoplayer__link">Click here For see My Videoplayer</a>
</div>
<div class="trailer__info">
<div class="trailer__content">
<img class="trailer__img" src="img/bl.png" alt="">
<p class="trailer__info-text">
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 class="btn trailer__btn">Watch now</a>
</div>
</div>
</div>
<div class="collections" id="collections">
<div class="container">
<h2 class="films__title col_title">Collections</h2>
<div class="collections__inner">
<div class="row">
<div class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">
<div class="collections__col">
<div class="collections__item">
<img class="collections__img" src="img/marvel.jpg" alt="" />
<div class="collections__item-inn">
<span class="icon-play"><i class="fas fa-play"></i></span>
<h2 class="collections__title">All Marvel Films</h2>
</div>
</div>
</div>
</li>
<li class="glide__slide">
<div class="collections__col">
<div class="collections__item">
<img class="collections__img" src="img/forsaj.jpg" alt="" />
<div class="collections__item-inn">
<span class="icon-play"><i class="fas fa-play"></i></span>
<h2 class="collections__title">Fast and the Furios</h2>
</div>
</div>
</div>
</li>
<li class="glide__slide">
<div class="collections__col">
<div class="collections__item">
<img class="collections__img" src="img/starwars.jpg" alt="">
<div class="collections__item-inn">
<span class="icon-play"><i class="fas fa-play"></i></span>
<h2 class="collections__title">Star Wars</h2>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="glide__bullets" data-glide-el="controls[nav]">
<button class="glide__bullet" data-glide-dir="=0"></button>
<button class="glide__bullet" data-glide-dir="=1"></button>
<button class="glide__bullet" data-glide-dir="=2"></button>
</div>
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left" style="border-radius: 50%;" data-glide-dir="<"><i class="fas fa-chevron-left"></i></button>
<button class="glide__arrow glide__arrow--right" style="border-radius: 50%;" data-glide-dir=">"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="series" id="series">
<div class="container">
<h2 class="films__title col_title">Series</h2>
<div class="series__inner">
<div class="series__item-inner">
<span class="icon-play"><i class="fas fa-play"></i></span>
<h2 class="series__title">Game oh Thrones</h2>
<p class="series__text">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 class="btn header__btn series__btn" href="#">Watch Now</a>
</div>
<div class="series__item-inner">
<span class="icon-play"><i class="fas fa-play"></i></span>
<h2 class="series__title">Wanda Vision</h2>
</div>
<div class="series__item-inner">
<span class="icon-play"><i class="fas fa-play"></i></span>
<h2 class="series__title">The Flash</h2>
</div>
<div class="series__item-inner">
<span class="icon-play"><i class="fas fa-play"></i></span>
<h2 class="series__title">The Great</h2>
</div>
<div class="series__item-inner">
<span class="icon-play"><i class="fas fa-play"></i></span>
<h2 class="series__title">Gotham</h2>
</div>
<div class="series__item-inner">
<span class="icon-play"><i class="fas fa-play"></i></span>
<h2 class="series__title">The Witcher</h2>
</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="container">
<div class="footer__links">
<a href="#" class="footer__link"><img src="img/googleplay_link_footer.png" alt=""></a>
<a href="#" class="footer__link"><img src="img/appstore_link_footer.png" alt=""></a>
</div>
<p class="footer__text">© PROWEB. В целях обучения 2020</p>
</div>
</footer>
</body>
<script src="script/glide.min.js"></script>
<script src="script/script.js"></script>
</html>