-
Notifications
You must be signed in to change notification settings - Fork 0
/
loki.html
136 lines (131 loc) · 5.26 KB
/
loki.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
<!DOCTYPE html>
<html lang="pt-br">
<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" />
<meta property="og:title" content="Loki">
<meta property="og:type" content="article">
<meta property="og:url" content="">
<meta property="og:image" content="./assets/loki-banner.webp">
<link rel="icon" type="image/x-icon" href="./assets/favicon.svg" />
<title>Loki - Alphaflix</title>
<link rel="stylesheet" type="text/css" href="loki.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<header class="header">
<a href="./index.html"><img src="assets/logo.svg" alt="Logo Alphaflix" /></a>
</header>
<section class="section-hero">
<div class="info-container">
<div class="logo-container">
<img
src="assets/loki-logo.png"
alt="Loki"
class="logo"
data-uia="title-logo"
/>
</div>
<div class="details-container">
<div class="title-info" data-uia="title-info">
<h1 class="title-title" data-uia="title-info-title">Loki</h1>
<div
class="title-info-metadata-wrapper"
data-uia="title-info-metadata-wrapper"
>
<span
class="title-info-metadata-item item-year"
data-uia="item-year"
>2021</span
>
<span role="presentation" class="info-spacer"> | </span>
<span
class="title-info-metadata-item item-maturity"
data-uia="item-maturity"
>
<span class="maturity-rating">
<span class="maturity-number">14</span>
</span>
</span>
<span role="presentation" class="info-spacer"> | </span>
<span
class="title-info-metadata-item item-runtime"
data-uia="item-runtime"
>
<span class="duration">
<span class="test_dur_str">1 temporada</span>
</span>
</span>
<span role="presentation" class="info-spacer"> | </span>
<span
class="title-info-metadata-item item-genre"
data-uia="item-genre"
>
<span class="item-genre-data"
>Ficção Científica, Fantasia, Super-Heróis</span
>
</span>
</div>
<div
class="title-info-synopsis-talent"
data-uia="title-info-synopsis-talent"
>
<div class="title-info-synopsis" data-uia="title-info-synopsis">
Em "Loki", da Marvel Studios, o temperamental vilão, interpretado por Tom
Hiddleston, retoma seu papel como o Deus da Mentira nesta nova
série, que ocorre após os eventos de "Vingadores: Ultimato".
Kate Herron dirige, e Michael Waldron assina o roteiro.
</div>
<div class="title-info-talent">
<div class="title-data-info-item item-starring">
<span class="title-data-info-item-label">Elenco:</span>
<span
class="title-data-info-item-list"
data-uia="info-starring"
>Tom Hiddleston, Sophia Di Martino, Owen Wilson, Gugu
Mbatha-Raw, Wunmi Mosaku.</span
>
</div>
<div class="title-data-info-item item-creators">
<span class="title-data-info-item-label">Criação:</span>
<span
class="title-data-info-item-list"
data-uia="info-creators"
>Michael Waldron.</span
>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hero-image-container">
<div class="hero-image">
<a href="#myModal" class="modal-play" data-toggle="modal">
<figure>
<img src="assets/play.svg" alt="Play" onmouseover="this.src='./assets/play-hover.svg'" onmouseout="this.src='./assets/play.svg'">
<figcaption>
Assista ao Trailer
</figcaption>
</figure>
</a>
</div>
</div>
</section>
<div id="myModal" class="modal fade hidden">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<button type="button" class="close" data-dismiss="modal">X</button>
<iframe id="trailerVideo" class="embed-responsive-item" src="https://www.youtube.com/embed/nW948Va-l10" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>