-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
405 lines (305 loc) · 27.3 KB
/
index.html
File metadata and controls
405 lines (305 loc) · 27.3 KB
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
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
<!DOCTYPE html>
<html lang="es">
<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="css/normalize.css" type="text/css">
<link rel="stylesheet" href="css/login.css" type="text/css">
<link rel="stylesheet" href="css/netflix.css" type="text/css">
<link rel="stylesheet" href="css/carrusel.css" type="text/css">
<link rel="stylesheet" href="css/player.css" type="text/css">
<link rel="icon" href="images/icons/favicon.png" type="image/x-icon">
<title>Title</title> <!--TODO-->
<meta name="author" content="Daniel Garcia"> <!--TODO-->
<meta name="description" content="Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic accusamus officia cumque! Ut adipisci nihil obcaecati? Fuga culpa officia, facere ad quos modi molestias? Adipisci iusto autem enim explicabo dolor!"> <!--TODO-->
</head>
<body>
<div id="login">
<image src="images/icons/candado_cerrado.png" class="background login" id="bcLogin">
<div class="login_pass">
<label for="pass" class="login" id="labelPass">Password:</label>
<input type="date" name="pass" id="pass" class="login" disabled>
</div>
<div class="alert-not-yet" style="display: none;">
<div class="error-container">
<span class="time-remaining"></span>
</div>
</div>
</div>
<div id="netflix_container" style="display: none;">
<div id="netflix">
<div class="logo_netflix">
<img src="images/icons/portalNetflix.png" class="portal" id="image_portal_netflix">
</div>
</div>
<div id="users" class="container-logo">
<a href="#users" class="logo">Netflix</a>
<div>
<h1>¿Quién eres? Elige tu perfil</h1>
<div class="user_selector">
<div class="user" onclick="selectProfile(this);">
<a href="#view" class="image_profile"><img src="images/profiles/perfil.jpg"></a>
<a href="#view" class="username">User1</a> <!--TODO-->
</div>
<div class="user" onclick="selectProfile(this);">
<a href="#view" class="image_profile"><img src="images/profiles/perfil2.jpg"></a>
<a href="#view" class="username">User2</a> <!--TODO-->
</div>
</div>
</div>
</div>
<div id="view" class="container-logo">
<nav class="nav_view">
<div class="primary_nav_view">
<a href="#users" class="logo">Netflix</a>
<ul class="nav_view_list">
<li><a href="#view">Inicio</a></li>
<li><a href="#view">Series TV</a></li>
<li><a href="#view">Peliculas</a></li>
<li><a href="#view">Novedades más vistas</a></li>
<li><a href="#miLista">Mi lista</a></li>
</ul>
</div>
<div class="secondary_nav_view">
<ul class="nav_view_list">
<li class="icon"><a href="#view" class="search_icon button_icon"></a></li>
<li><a href="#view">Infantil</a></li>
<li class="icon"><a href="#view" class="notification_icon button_icon"></a></li>
<li><a href="#users"><img src="images/profiles/perfil.jpg" id="imageProfile"></a></li>
</ul>
</div>
</nav>
<div class="alert-tempo" style="display: none;">
<div class="tempo-container">
<span class="close-button"><span class="icon-close"></span></span>
<span class="tempo-counter"></span>
</div>
</div>
<div class="principal">
<div class="titulo">
<header>
<img src="images/icons/logo.png" class="logo">
<p>Serie</p>
</header>
<section>
<div class="title">
<p>Título</p>
</div>
<div class="description">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloremque nesciunt facere architecto obcaecati ipsa quaerat autem ad tenetur, unde accusamus officiis nobis? Suscipit repellendus laudantium, voluptas ipsa quisquam minima facere?</p> <!--TODO-->
</div>
</section>
<footer>
<button class="play">
<span class="icon"></span>
<span class="value">Reproducir</span>
</button>
<button class="info">
<span class="icon"></span>
<span class="value">Más información</span>
</button>
</button>
</footer>
</div>
</div>
<div class="portal-info" style="display: none;">
<div class="container-info">
<span class="close-button"><span class="icon-close"></span></span>
<div class="trailer">
<video autoplay muted class="video-trailer">
<source src="images/view/player/trailer.mp4">
</video>
<!--<img class="video-trailer" src="images/view/principal.png">-->
<div class="buttons">
<button class="play">
<span class="icon"></span>
<span class="value">Reproducir</span>
</button>
<div class="play-button">
<div class="player-continer">
<span class="anadir"></span>
<span class="like"></span>
<span class="dislike"></span>
</div>
<div class="muted-container">
<span class="mut-button muted"></span>
</div>
</div>
</div>
</div>
<div>
<div class="info-container">
<p class="coincidencia">98 % de coincidencia</p>
<div class="descripcion">
<ul>
<li class=>2022</li>
<li class="pegi">16+</li>
<li class="durada">2 temporadas</li>
<li class="calidad">4k</li>
</ul>
</div>
<div class="topEspana">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg-icon svg-icon-top-10-badge" style="color: rgb(229, 9, 20);"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 2C2.44772 2 2 2.44772 2 3V21C2 21.5523 2.44772 22 3 22H21C21.5523 22 22 21.5523 22 21V3C22 2.44772 21.5523 2 21 2H3ZM17.2299 10.8934C16.6125 10.4971 15.8913 10.2996 15.0673 10.2996C14.2444 10.2996 13.5231 10.4971 12.9056 10.8934C12.2881 11.2905 11.8114 11.8536 11.4762 12.5839C11.1411 13.3149 10.9735 14.1695 10.9735 15.1493C10.9735 16.1383 11.1411 16.9957 11.4762 17.7221C11.8114 18.4478 12.2881 19.0091 12.9056 19.4052C13.5231 19.8014 14.2444 20 15.0673 20C15.8913 20 16.6125 19.8014 17.2299 19.4052C17.8475 19.0091 18.3242 18.4478 18.6594 17.7221C18.9945 16.9957 19.1612 16.1383 19.1612 15.1493C19.1612 14.1695 18.9945 13.3149 18.6594 12.5839C18.3242 11.8536 17.8475 11.2905 17.2299 10.8934ZM9.47922 19.7994V10.3263L4.92658 11.4351V13.2656L7.20991 12.6774V19.7994H9.47922ZM13.7606 12.9513C14.0767 12.4298 14.5117 12.1701 15.0673 12.1701C15.6239 12.1701 16.0589 12.4298 16.3751 12.9513C16.6913 13.4718 16.8489 14.2058 16.8489 15.1493C16.8489 16.0938 16.6913 16.8268 16.3751 17.3473C16.0589 17.8688 15.6239 18.1296 15.0673 18.1296C14.5117 18.1296 14.0767 17.8688 13.7606 17.3473C13.4442 16.8268 13.2868 16.0938 13.2868 15.1493C13.2868 14.2058 13.4442 13.4718 13.7606 12.9513ZM13.0737 4.19939C12.7285 4.06677 12.3485 4 11.9344 4C11.5194 4 11.1405 4.06677 10.7952 4.19939C10.4521 4.33122 10.1518 4.51771 9.89848 4.75622C9.64404 4.99367 9.44963 5.27379 9.312 5.59396C9.17437 5.91504 9.10556 6.26299 9.10556 6.63872C9.10556 7.01446 9.17437 7.36241 9.312 7.68349C9.44963 8.00352 9.64404 8.28286 9.89848 8.52136C10.1518 8.75974 10.4521 8.9453 10.7952 9.07792C11.1405 9.20976 11.5194 9.27745 11.9344 9.27745C12.3485 9.27745 12.7285 9.20976 13.0737 9.07792C13.4168 8.9453 13.7161 8.75974 13.9704 8.52136C14.2239 8.28286 14.4194 8.00352 14.557 7.68349C14.6947 7.36241 14.7635 7.01446 14.7635 6.63872C14.7635 6.26299 14.6947 5.91504 14.557 5.59396C14.4194 5.27379 14.2239 4.99367 13.9704 4.75622C13.7161 4.51771 13.4168 4.33122 13.0737 4.19939ZM8.75526 5.30869V4.12288H4V5.30869H5.63894V9.15457H7.11632V5.30869H8.75526ZM18.9904 4.3469C18.6683 4.19847 18.2893 4.12327 17.8484 4.12327H15.5101V9.15392H16.9855V7.70838H17.8484C18.2893 7.70838 18.6683 7.63318 18.9904 7.48384C19.3117 7.33541 19.5601 7.12483 19.7366 6.85484C19.9132 6.58578 20 6.26931 20 5.90845C20 5.55682 19.9132 5.24587 19.7366 4.97602C19.5601 4.70683 19.3117 4.49624 18.9904 4.3469ZM11.2392 5.39166C11.4387 5.27379 11.6701 5.21545 11.9344 5.21545C12.1988 5.21545 12.4302 5.27379 12.6297 5.39166C12.8292 5.50954 12.9849 5.67653 13.0955 5.89001C13.2072 6.10521 13.2632 6.35386 13.2632 6.63872C13.2632 6.92267 13.2072 7.17224 13.0955 7.38651C12.9849 7.60092 12.8292 7.76791 12.6297 7.88565C12.4302 8.00352 12.1988 8.062 11.9344 8.062C11.6701 8.062 11.4387 8.00352 11.2392 7.88565C11.0397 7.76791 10.8841 7.60092 10.7724 7.38651C10.6617 7.17224 10.6057 6.92267 10.6057 6.63872C10.6057 6.35386 10.6617 6.10521 10.7724 5.89001C10.8841 5.67653 11.0397 5.50954 11.2392 5.39166ZM16.9855 5.27195H17.6149C17.9252 5.27195 18.1515 5.32845 18.2913 5.43895C18.4309 5.54931 18.5017 5.70616 18.5017 5.90845C18.5017 6.11535 18.4309 6.27589 18.2913 6.38902C18.1515 6.50228 17.9252 6.55878 17.6149 6.55878H16.9855V5.27195Z" fill="currentColor"></path></svg>
<span>N.º 1 En España hoy</span>
</div>
<div class="sinopsi">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloremque nesciunt facere architecto obcaecati ipsa quaerat autem ad tenetur, unde accusamus officiis nobis? Suscipit repellendus laudantium, voluptas ipsa quisquam minima facere? <!--TODO-->
</div>
</div>
<div class="creditos">
<div>
<span class="type">Reparto:</span>
<span> </span>
<a target="_blank" href="https://www.instagram.com/daniieelgs/">User1</a> <!--TODO-->
<span>, </span>
<a target="_blank" href="https://www.instagram.com/daniieelgs/">User2</a> <!--TODO-->
</div>
<div>
<p><span class="type">Géneros:</span> Películas juveniles, Películas basadas en hechos reales, Series TV</p>
</div>
<div>
<p><span class="type">Pertenece a:</span> Sensual, Intima, Emotiva</p>
</div>
</div>
</div>
</div>
</div>
<div id="miLista">
<a href="#miLista"><h1>Mi lista</h1></a>
<!---->
<div class="carrusel">
<div class="slide">
<div class="control next"><span>❯</span></div>
<div class="control previous"><span>❮</span></div>
<div class="inner_slide center">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="inner_slide right">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="inner_slide">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="slide player">
<div class="control next"><span>❯</span></div>
<div class="control previous"><span>❮</span></div>
<div class="inner_slide center">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="inner_slide right">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="inner_slide">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="slide">
<div class="control next"><span>❯</span></div>
<div class="control previous"><span>❮</span></div>
<div class="inner_slide center">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="inner_slide right">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="inner_slide">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<!---->
<div id="openItem" style="display:none">
<div class="itemViewer"></div>
</div>
</div>
</div>
</div>
<div id="player" style="display: none">
<div class="controlers-top button-container controlers">
<span class="salir-button icon-button" onmouseenter="this.firstElementChild.style.width=50; this.firstElementChild.style.height=50; this.firstElementChild.style.transition='all .5s'" onmouseleave="this.firstElementChild.style.width=40; this.firstElementChild.style.height=40; this.firstElementChild.style.transition='all .5s'">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="Hawkins-Icon Hawkins-Icon-Standard" style="color: rgb(255, 255, 255);"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 11.0001L3.41421 11.0001L8.70711 5.70718L7.29289 4.29297L0.292892 11.293C0.105356 11.4805 0 11.7349 0 12.0001C0 12.2653 0.105356 12.5196 0.292892 12.7072L7.29289 19.7072L8.70711 18.293L3.41421 13.0001H24V11.0001Z" fill="currentColor"></path></svg>
</span>
<span class="feedback-button icon-button" onmouseenter="this.firstElementChild.style.width=50; this.firstElementChild.style.height=50; this.firstElementChild.style.transition='all .5s'" onmouseleave="this.firstElementChild.style.width=40; this.firstElementChild.style.height=40; this.firstElementChild.style.transition='all .5s'">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="Hawkins-Icon Hawkins-Icon-Standard" style="color: rgb(255, 255, 255);"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 3C0.447715 3 0 3.44772 0 4V10.5714V21H2L2 11.5783C4.05836 11.6067 6.06478 11.7223 8 11.9167V14.5714C8 15.042 8.32807 15.4489 8.78794 15.5487C13.0747 16.4789 17.9011 17 23 17C23.5523 17 24 16.5523 24 16V9.42857C24 8.87629 23.5523 8.42857 23 8.42857C20.5907 8.42857 18.2474 8.30904 16 8.08326V5.42857C16 4.95801 15.6719 4.55111 15.2121 4.45132C10.9253 3.52108 6.09885 3 1 3ZM2 9.57813C4.44972 9.61098 6.83093 9.76415 9.11345 10.0248L10 10.126V11.0183V13.7591C13.6576 14.4969 17.7153 14.9341 22 14.9931V10.4219C19.5503 10.389 17.1691 10.2359 14.8866 9.97522L14 9.87399V8.98168V6.24091C10.3424 5.50309 6.2847 5.06594 2 5.00688V9.57813Z" fill="currentColor"></path></svg>
</span>
</div>
<video muted>
<source src="images/view/player/pelicula.mp4">
</video>
<div class="controlers">
<div class="timer">
<span class="line-timer"></span>
<span class="time-duration">1:54:02</span>
<span class="cursor-timer"></span>
</div>
<div class="button-container">
<div class="container-left">
<span class="play-button icon-button play-pause-button"></span>
<span class="retroceder-button icon-button" onmouseenter="this.firstElementChild.style.width=50; this.firstElementChild.style.height=50; this.firstElementChild.style.transition='all .5s'" onmouseleave="this.firstElementChild.style.width=40; this.firstElementChild.style.height=40; this.firstElementChild.style.transition='all .5s'">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="Hawkins-Icon Hawkins-Icon-Standard" style="color: rgb(255, 255, 255);"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.0198 2.04817C13.3222 1.8214 15.6321 2.39998 17.5557 3.68532C19.4794 4.97067 20.8978 6.88324 21.5694 9.09718C22.241 11.3111 22.1242 13.6894 21.2388 15.8269C20.3534 17.9643 18.7543 19.7286 16.714 20.8192C14.6736 21.9098 12.3182 22.2592 10.0491 21.8079C7.77999 21.3565 5.73759 20.1323 4.26989 18.3439C2.80219 16.5555 2 14.3136 2 12L0 12C-2.74181e-06 14.7763 0.962627 17.4666 2.72387 19.6127C4.48511 21.7588 6.93599 23.2278 9.65891 23.7694C12.3818 24.3111 15.2083 23.8918 17.6568 22.5831C20.1052 21.2744 22.0241 19.1572 23.0866 16.5922C24.149 14.0273 24.2892 11.1733 23.4833 8.51661C22.6774 5.85989 20.9752 3.56479 18.6668 2.02238C16.3585 0.479975 13.5867 -0.214319 10.8238 0.057802C8.71195 0.2658 6.70517 1.02859 5 2.2532V1H3V5C3 5.55229 3.44772 6 4 6H8V4H5.99999C7.45608 2.90793 9.19066 2.22833 11.0198 2.04817ZM2 4V7H5V9H1C0.447715 9 0 8.55229 0 8V4H2ZM14.125 16C13.5466 16 13.0389 15.8586 12.6018 15.5758C12.1713 15.2865 11.8385 14.8815 11.6031 14.3609C11.3677 13.8338 11.25 13.2135 11.25 12.5C11.25 11.7929 11.3677 11.1759 11.6031 10.6488C11.8385 10.1217 12.1713 9.71671 12.6018 9.43389C13.0389 9.14463 13.5466 9 14.125 9C14.7034 9 15.2077 9.14463 15.6382 9.43389C16.0753 9.71671 16.4116 10.1217 16.6469 10.6488C16.8823 11.1759 17 11.7929 17 12.5C17 13.2135 16.8823 13.8338 16.6469 14.3609C16.4116 14.8815 16.0753 15.2865 15.6382 15.5758C15.2077 15.8586 14.7034 16 14.125 16ZM14.125 14.6501C14.5151 14.6501 14.8211 14.4637 15.043 14.0909C15.2649 13.7117 15.3759 13.1814 15.3759 12.5C15.3759 11.8186 15.2649 11.2916 15.043 10.9187C14.8211 10.5395 14.5151 10.3499 14.125 10.3499C13.7349 10.3499 13.4289 10.5395 13.207 10.9187C12.9851 11.2916 12.8741 11.8186 12.8741 12.5C12.8741 13.1814 12.9851 13.7117 13.207 14.0909C13.4289 14.4637 13.7349 14.6501 14.125 14.6501ZM8.60395 15.8554V10.7163L7 11.1405V9.81956L10.1978 9.01929V15.8554H8.60395Z" fill="currentColor"></path></svg>
</span>
<span class="avanzar-button icon-button" onmouseenter="this.firstElementChild.style.width=50; this.firstElementChild.style.height=50; this.firstElementChild.style.transition='all .5s'" onmouseleave="this.firstElementChild.style.width=40; this.firstElementChild.style.height=40; this.firstElementChild.style.transition='all .5s'">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="Hawkins-Icon Hawkins-Icon-Standard" style="color: rgb(255, 255, 255);"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.4443 3.68532C8.36794 2.39998 10.6778 1.8214 12.9802 2.04817C14.8093 2.22833 16.5439 2.90793 18 4H16V6H20C20.5523 6 21 5.55228 21 5V1H19V2.2532C17.2948 1.02858 15.288 0.265799 13.1762 0.0578004C10.4133 -0.214321 7.64153 0.479973 5.33315 2.02238C3.02478 3.56479 1.32262 5.85989 0.516716 8.51661C-0.28919 11.1733 -0.148983 14.0273 0.913448 16.5922C1.97588 19.1572 3.8948 21.2744 6.34325 22.5831C8.79169 23.8918 11.6182 24.3111 14.3411 23.7694C17.064 23.2278 19.5149 21.7588 21.2761 19.6127C23.0374 17.4666 24 14.7763 24 12L22 12C22 14.3136 21.1978 16.5555 19.7301 18.3439C18.2624 20.1323 16.22 21.3565 13.9509 21.8079C11.6818 22.2592 9.32641 21.9098 7.28604 20.8192C5.24567 19.7286 3.64657 17.9643 2.76121 15.8269C1.87585 13.6894 1.75901 11.3111 2.4306 9.09717C3.10218 6.88324 4.52065 4.97066 6.4443 3.68532ZM22 4V7H19V9H23C23.5523 9 24 8.55228 24 8V4H22ZM12.6018 15.5758C13.0389 15.8586 13.5466 16 14.125 16C14.7034 16 15.2077 15.8586 15.6382 15.5758C16.0753 15.2865 16.4116 14.8815 16.6469 14.3609C16.8823 13.8338 17 13.2135 17 12.5C17 11.7929 16.8823 11.1758 16.6469 10.6488C16.4116 10.1217 16.0753 9.71671 15.6382 9.43388C15.2077 9.14463 14.7034 9 14.125 9C13.5466 9 13.0389 9.14463 12.6018 9.43388C12.1713 9.71671 11.8385 10.1217 11.6031 10.6488C11.3677 11.1758 11.25 11.7929 11.25 12.5C11.25 13.2135 11.3677 13.8338 11.6031 14.3609C11.8385 14.8815 12.1713 15.2865 12.6018 15.5758ZM15.043 14.0909C14.8211 14.4637 14.5151 14.6501 14.125 14.6501C13.7349 14.6501 13.4289 14.4637 13.207 14.0909C12.9851 13.7117 12.8741 13.1814 12.8741 12.5C12.8741 11.8186 12.9851 11.2916 13.207 10.9187C13.4289 10.5395 13.7349 10.3499 14.125 10.3499C14.5151 10.3499 14.8211 10.5395 15.043 10.9187C15.2649 11.2916 15.3759 11.8186 15.3759 12.5C15.3759 13.1814 15.2649 13.7117 15.043 14.0909ZM8.60395 10.7163V15.8554H10.1978V9.01928L7 9.81956V11.1405L8.60395 10.7163Z" fill="currentColor"></path></svg>
</span>
<span class="volumen-muted-button icon-button volumen-muted-unmuted-button"></span>
</div>
<div class="container-center">
<span class="titulo-pelicula">Un poquito de nosotro</span>
</div>
<div class="container-right">
<span class="audio-button icon-button" onmouseenter="this.firstElementChild.style.width=50; this.firstElementChild.style.height=50; this.firstElementChild.style.transition='all .5s'" onmouseleave="this.firstElementChild.style.width=40; this.firstElementChild.style.height=40; this.firstElementChild.style.transition='all .5s'">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="Hawkins-Icon Hawkins-Icon-Standard" style="color: rgb(255, 255, 255);"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 4C0 3.44772 0.447715 3 1 3H23C23.5523 3 24 3.44772 24 4V16C24 16.5523 23.5523 17 23 17H19V20C19 20.3688 18.797 20.7077 18.4719 20.8817C18.1467 21.0557 17.7522 21.0366 17.4453 20.8321L11.6972 17H1C0.447715 17 0 16.5523 0 16V4ZM2 5V15H12H12.3028L12.5547 15.1679L17 18.1315V16V15H18H22V5H2ZM10 9H4V7H10V9ZM20 11H14V13H20V11ZM12 13H4V11H12V13ZM20 7H12V9H20V7Z" fill="currentColor"></path></svg>
</span>
<span class="velocidad-button icon-button" onmouseenter="this.firstElementChild.style.width=50; this.firstElementChild.style.height=50; this.firstElementChild.style.transition='all .5s'" onmouseleave="this.firstElementChild.style.width=40; this.firstElementChild.style.height=40; this.firstElementChild.style.transition='all .5s'">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="Hawkins-Icon Hawkins-Icon-Standard" style="color: rgb(255, 255, 255);"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.6427 7.43779C14.5215 4.1874 9.47851 4.1874 6.35734 7.43779C3.21422 10.711 3.21422 16.0341 6.35734 19.3074L4.91474 20.6926C1.02842 16.6454 1.02842 10.0997 4.91474 6.05254C8.823 1.98249 15.177 1.98249 19.0853 6.05254C22.9716 10.0997 22.9716 16.6454 19.0853 20.6926L17.6427 19.3074C20.7858 16.0341 20.7858 10.711 17.6427 7.43779ZM14 14C14 15.1046 13.1046 16 12 16C10.8954 16 10 15.1046 10 14C10 12.8954 10.8954 12 12 12C12.1792 12 12.3528 12.0236 12.518 12.0677L15.7929 8.79289L17.2071 10.2071L13.9323 13.482C13.9764 13.6472 14 13.8208 14 14Z" fill="currentColor"></path></svg>
</span>
<span class="fullscreen-button icon-button" onmouseenter="this.firstElementChild.style.width=50; this.firstElementChild.style.height=50; this.firstElementChild.style.transition='all .5s'" onmouseleave="this.firstElementChild.style.width=40; this.firstElementChild.style.height=40; this.firstElementChild.style.transition='all .5s'">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="Hawkins-Icon Hawkins-Icon-Standard" data-uia="control-fullscreen-enter" style="color: rgb(255, 255, 255);"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 5C0 3.89543 0.895431 3 2 3H9V5H2V9H0V5ZM22 5H15V3H22C23.1046 3 24 3.89543 24 5V9H22V5ZM2 15V19H9V21H2C0.895431 21 0 20.1046 0 19V15H2ZM22 19V15H24V19C24 20.1046 23.1046 21 22 21H15V19H22Z" fill="currentColor"></path></svg>
</span>
</div>
</div>
</div>
</div>
<script defer src="js/validate.js"></script>
<script defer src="js/carrusel.js"></script>
<script defer src="js/player.js"></script>
</body>
</html>