-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
265 lines (238 loc) · 14.3 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi, width=device-width" />
<title>Marvel's Spider-Man: Miles Morales</title>
<link rel="shortcut icon" href="svg/logo-spider.svg" type="image/x-icon">
<link rel="stylesheet" href="css/style.css">
<!-- Lightbox CSS -->
<link rel="stylesheet" href="/js/lightbox/dist/css/lightbox.css">
<!-- SV Inject Library JS-->
<script src="js/svg-inject.min.js"></script>
<!-- Web Font - Mukta -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Mukta:wght@300;400&display=swap" rel="stylesheet">
<!-- AOS Animate CSS -->
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
</head>
<body>
<!--===== BG LOADNG =====-->
<section class="bg-loader">
<svg style="max-width: 144px;" width="96" height="96" viewBox="0 0 96 96" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g id="logo-spiderman">
<path class="logo-spiderman" id="Vector 33" fill-rule="evenodd" clip-rule="evenodd"
d="M50.4431 44.6386L50.703 44.1559C53.3391 45.6906 59.4431 49.3762 62.7698 51.8416C62.745 53.9208 62.5247 59.401 61.8416 64.6881C61.5322 67.3243 60.2599 73.8589 57.646 78.9084C59.1435 76.9158 62.4876 71.3713 63.8836 65.1337C64.3663 63.3639 65.4653 58.0495 66 50.9505C63.1534 49.3045 56.1683 45.5223 51 43.5619L51.3713 42.7822C55.1955 43.8342 64.1287 46.5025 69.2673 48.7599C69.1559 51.4332 68.495 58.4505 66.7426 65.1337C65.8371 68.5866 63.3416 77.4753 56.2723 86C56.3697 85.8994 56.4882 85.78 56.6273 85.6398C58.1308 84.1248 62.0302 80.1956 67.5223 71.6312C70.2698 66.5446 72.0891 60.6782 74.3911 46.7178C68.9703 44.9728 61.5817 43.0421 51.594 42.0025L51.8911 41.4084C55.6039 41.2104 64.2772 41.0743 69.2673 42.1139C69.8366 38.3144 69.6312 29.4975 65.146 24.6262C66.1361 27.3366 67.9827 34.0569 66.5569 39.255C62.9307 39.2302 54.9431 39.3812 52.0025 40.1832L51.5198 39.552C53.698 38.2525 58.6708 35.5421 61.1361 35.0965C61.1442 35.0372 61.1523 34.9774 61.1605 34.9172C61.8684 29.7099 62.9799 21.5342 55.4554 11C57.2747 14.75 60.2153 23.802 58.3143 33.2772L50.9257 38.6609L50.3688 37.8812L52.6336 35.5421C52.2252 34.8738 51.0074 33.3812 49.4035 32.7574C50.1708 33.6733 51.2079 35.698 49.2178 36.4703H46.2846C45.4307 36.2475 44.198 35.1931 46.099 32.7574C45.3193 33.1163 43.604 34.1757 42.9802 35.5421L44.6881 37.5842L44.3168 38.3267L37.1881 33.3144C36.3465 29.6881 35.6584 20.1559 39.6386 11.0371C39.3184 11.6268 39.0101 12.189 38.7142 12.7287C34.6868 20.0738 32.9356 23.2677 34.1807 35.0965C35.5792 35.3936 39.3639 36.6856 43.3144 39.4777L43.0916 39.9604C39.7005 39.6386 32.0941 39.0619 28.797 39.3292C28.2277 36.6807 27.7054 30.0322 30.1708 24.6262C26.2723 30.1213 25.4926 34.1312 26.1609 42.2252C28.9703 41.6807 36.2896 40.755 43.0916 41.4084L43.3144 42.0025C38.3144 42.6337 26.8515 44.4604 21 46.7178C21.1638 47.5953 21.3229 48.4557 21.4788 49.2991C22.9129 57.0566 24.0818 63.3797 26.2723 68.3639C29.9854 75.5044 33.156 79.1728 37.0129 83.6354C37.6683 84.3937 38.3435 85.1749 39.0446 86C33.0668 77.7203 26.8738 67.3243 26.1609 48.7599C30.0965 47.1881 39.1931 43.7921 44.0941 42.7822L44.4282 43.5619C40.4183 45.2574 31.7673 49.0941 29.5396 50.8762C29.5642 51.2066 29.5884 51.5383 29.6127 51.8715C30.1759 59.5913 30.7984 68.1239 37.5965 78.9084C35.4802 74.2673 33.0891 68.9802 32.5842 51.8416C35.5173 49.8738 42.0446 45.5817 44.6881 44.1559L44.9851 44.6386C43.6485 45.4926 40.5446 47.6386 38.8218 49.3911C38.7104 50.1089 38.5545 52.7847 38.8218 57.745C40.0965 60.0594 43.6559 65.0668 47.6955 66.5817C49.7624 65.7401 54.4084 62.7946 56.4579 57.745C56.6188 56.5569 56.9035 53.2376 56.7549 49.4653C55.5173 48.3391 52.5223 45.797 50.4431 44.6386ZM40.5 49.5L43.5 47L41.5 50C41.5 55.5 43.3216 59.0567 47.8 60.8C53.0938 57.745 54 55 54 50L52 47L55.2 49.8C55.2951 52.3648 55.4229 53.7895 54.7 56.5C53.5 59.5 51.5 61.5 47.7 63.8C44 61.5 43 60 40.7 56.5C40.3164 53.5132 40.1274 51.9879 40.5 49.5Z"
fill="#EDF1F7" stroke="#EDF1F7" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" />
</g>
</svg>
</section>
<!--===== END BG LOADNG =====-->
<!--===== HEADER =====-->
<header>
<nav class="navbar">
<div class="nav-menu">
<div class="logo">
<img src="svg/logo-spider.svg" alt="Logo Spider Man" onload="SVGInject(this)">
</div>
<ul id="nav-list" class="nav-list">
<li><a href="#hero" class="nav-link">Início</a></li>
<li><a href="#history" class="nav-link">História</a></li>
<li><a href="#wallpapers" class="nav-link">Wallpapers</a></li>
<li><a href="#be-yourself" class="nav-link be-yourself">#BeYourself</a></li>
<div class="nav-social-mobile">
<img src="svg/icon-facebook.svg" alt="Facebook icon" onload="SVGInject(this)">
<img src="svg/icon-instagram.svg" alt="Instagram icon" onload="SVGInject(this)">
<img src="svg/icon-youtube.svg" alt="YouTube icon" onload="SVGInject(this)">
<img src="svg/icon-twitter.svg" alt="Twitter icon" onload="SVGInject(this)">
</div>
</ul>
</div>
<div class="nav-social">
<img src="svg/icon-facebook.svg" alt="Facebook icon" onload="SVGInject(this)">
<img src="svg/icon-instagram.svg" alt="Instagram icon" onload="SVGInject(this)">
<img src="svg/icon-youtube.svg" alt="YouTube icon" onload="SVGInject(this)">
<img src="svg/icon-twitter.svg" alt="Twitter icon" onload="SVGInject(this)">
</div>
<div class="menu-mobile">
<input id="hamburger-menu" type="checkbox" style="display: none;">
<label for="hamburger-menu">
<div class="hamburger-menu" onclick="mobileToggle();"></div>
</label>
</div>
</nav>
</header>
<!--===== END HEADER =====-->
<!--===== BG VIDEO =====-->
<section class="bg-video">
<video class="video" autoplay muted loop>
<source src="/video/spiderman2-compress.mp4" type="video/mp4">
</video>
</section>
<!--===== END BG VIDEO =====-->
<!--===== HERO =====-->
<section id="hero" class="container">
<div class="container-content">
<div class="px-1 animation-hero-1">
<img src="images/spiderman-text.png" alt="Spider Man - Miles Morales">
</div>
<div class="my-2 animation-hero-2">
<p>Na aventura mais recente do universo de Marvel's Spider-Man, o adolescente Miles Morales está se
adaptando à sua nova casa enquanto segue os passos de seu mentor, Peter Parker, para se tornar um
novo
Spider-Man.</p>
</div>
<div class="mb-2 cta-group animation-hero-3">
<a href="#" class="cta-buy mr-2">Comprar agora</a>
<a href="#" class="cta-trailer" onclick="lightbox_open();">Assista ao
trailer</a>
</div>
<div class="flex align-itens-center mt-1 animation-hero-4">
<img src="svg/marvel.svg" alt="Marvel" onload="SVGInject(this)" class="w-auto mr-2">
<img src="svg/ps.svg" alt="PlayStation" onload="SVGInject(this)" class="w-auto">
</div>
</div>
<div class="container-image animation-hero-5">
<img src="images/miles-morales.png" class="spiderman" alt="Miles Morales">
</div>
</section>
<!--===== END HERO =====-->
<div id="light">
<a class="boxclose" id="boxclose" onclick="lightbox_close();"></a>
<video id="VisaChipCardVideo" width="590" controls>
<source src="/video/spiderman2-compress.mp4" type="video/mp4">
<!--Browser does not support <video> tag -->
</video>
</div>
<div id="fade" onClick="lightbox_close();"></div>
<!--===== HISTORY =====-->
<section id="history">
<div class="container">
<div class="container-image">
<div class="js-tilt">
<img src="images/spider-man-min.png" class="miles-morales" alt="Miles Morales" data-aos="zoom-in"
data-aos-delay="200">
</div>
</div>
<div class="container-content">
<div class="mt-2">
<h2 class="mb-2" data-aos="fade-left" data-aos-delay="200">História</h2>
<p class="mb-1" data-aos="fade-up" data-aos-delay="200">A história de Spider-Man: Miles Morales se
passa
um ano após
os eventos do jogo original Spider-Man
para PS4. Miles progrediu bastante, vestindo-se com sua própria versão em vermelho e preto da
fantasia do Spider-Man para patrulhar as ruas de Nova York.</p>
<p data-aos="fade-up" data-aos-delay="200">Começando pouco antes do Natal, a história começa na casa
de
Miles no Harlem e apresenta o herói
incipiente lidando com uma guerra de rua entre a Roxxon Energy Corporation e o exército
criminoso de
alta tecnologia conhecido como Underground, liderado por um vilão conhecido como o Tinkerer, no
português conhecido como Consertador. Enquanto a mãe de Miles, Rio Morales, realiza um comício
eleitoral para a Câmara Municipal, o Underground destrói a festa, levando as duas gangues a se
confrontarem na ponte Braithwaite e deixando para Miles intervir e salvar aqueles em perigo.</p>
</div>
</div>
</div>
</section>
<!--===== END HISTORY =====-->
<!--===== WALLPAPERS =====-->
<section id="wallpapers">
<div class="container">
<h2 class="mb-2" data-aos="zoom-in" data-aos-delay="200">Wallpapers</h2>
<p class="mb-3">Screenshots do game em alta definição, clique nas imagens para habilitar o zoom.</p>
<div class="grid-wallpapers">
<div class="js-tilt">
<div class="image">
<a href="/images/spider-fly-min.png" data-lightbox="spider-fly-min"><img
src="/images/spider-fly-min.png" alt="" data-aos="zoom-in" data-aos-delay="200"></a>
</div>
</div>
<div class="js-tilt">
<div class="image">
<a href="/images/spiderman-min.png" data-lightbox="spider-min"><img
src="/images/spiderman-min.png" alt="" data-aos="zoom-in" data-aos-delay="200"></a>
</div>
</div>
<div class="js-tilt">
<div class="image">
<a href="/images/spider-miles-min.png" data-lightbox="spider-miles-min"><img
src="/images/spider-miles-min.png" alt="" data-aos="zoom-in" data-aos-delay="200"></a>
</div>
</div>
</div>
</div>
</section>
<!--===== END WALLPAPERS =====-->
<!--===== BEYOURSELF =====-->
<section id="be-yourself">
<div class="container">
<div class="container-content">
<div class="mt-2">
<h2 class="mb-2" data-aos="fade-left" data-aos-delay="200">#BeYourself</h2>
<p class="mb-1" data-aos="fade-up" data-aos-delay="200">Seja você mesmo na nova aventura Marvel's
Spider-Man, disponível apenas para PS5.</p>
<div class="mb-2 cta-group" data-aos="fade-up" data-aos-delay="200">
<a href="#" class="cta-buy mt-2">Adquira já o seu</a>
</div>
</div>
</div>
<div class="container-image">
<div class="js-tilt">
<img src="images/be-yourself.jpg" class="be-yourself" alt="BeYourself" data-aos="zoom-in"
data-aos-delay="200">
</div>
</div>
</div>
</section>
<!--===== END BEYOURSELF =====-->
<!--===== FOOTER =====-->
<footer id="footer">
<div class="container">
<div class="footer-wrap">
<div class="logo-footer">
<img src="svg/ps.svg" alt="PlayStation" onload="SVGInject(this)" class="w-auto">
</div>
<div class="copyright">
<p>© 2021 Sony Interactive Entertainment Inc. Todos os direitos reservados.</p>
</div>
</div>
</div>
</footer>
<!--===== END FOOTER =====-->
<!-- App JS -->
<script src="/js/app.js"></script>
<!-- GSAP Library CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"
integrity="sha512-DkPsH9LzNzZaZjCszwKrooKwgjArJDiEjA5tTgr3YX4E6TYv93ICS8T41yFHJnnSmGpnf0Mvb5NhScYbwvhn2w=="
crossorigin="anonymous"></script>
<!-- JQuery CDN-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Custom scripts -->
<script src="/js/menu.js"></script>
<!-- Lightbox JS-->
<script src="/js/lightbox/dist/js/lightbox.js"></script>
<!-- Video lightbox JS-->
<script src="/js/video.js"></script>
<!-- AOS Animate JS -->
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<!-- AOS Init-->
<script>
AOS.init();
</script>
<!-- Tilt JS -->
<script src="/js/tilt.jquery.js"></script>
<!-- Custom tilt script settings -->
<script>
$('.js-tilt').tilt({
pespective: 2000,
scale: 1.02
});
</script>
</body>
</html>