-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
146 lines (127 loc) · 15.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS/partials/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Mukta:wght@300;400&display=swap" rel="stylesheet">
<title>Spider-man: Miles Morales | PS5</title>
</head>
<body>
<!--================== LOADING =============================-->
<section class="bg-loader">
<svg style = "max-width: 144px;" 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>
<!--==================HEADER=============================-->
<header>
<nav class="navbar">
<div class="nav-menu">
<div class="logo">
<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="logo-spiderman">
<path 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>
</div>
<ul class="nav-list">
<li><a href="" class="nav-link">Home</a></li>
<li><a href="" class="nav-link">Story</a></li>
<li><a href="" class="nav-link">Wallpapers</a></li>
<li><a href="" class="nav-link">#BeYourself</a></li>
</ul>
</div>
<div class="nav-social">
<div class="facebook">
<svg width="13" height="24" viewBox="0 0 13 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.93882 9.23782H0V13.4556H3.93882V24H8.64V13.4556H12.1976L12.7059 9.23782H8.64V7.00246C8.38588 4.42864 9.88235 3.97973 10.8 3.9235H12.96V0.254054L9.65647 0.000947505C5.21788 -0.0665365 3.99529 3.48762 3.93882 5.27314V9.23782Z" fill="#959698"/>
</svg>
</div>
<div class="instagram">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7426 4C7.01878 4 4 7.01878 4 10.7426V21.2574C4 24.9812 7.01878 28 10.7426 28H21.2574C24.9812 28 28 24.9812 28 21.2574V10.7426C28 7.01878 24.9812 4 21.2574 4H10.7426ZM10.6484 6.21618C8.20056 6.21618 6.21618 8.20056 6.21618 10.6484V21.3517C6.21618 23.7996 8.20056 25.784 10.6484 25.784H21.3046C23.7524 25.784 25.7368 23.7996 25.7368 21.3517V10.6484C25.7368 8.20056 23.7524 6.21618 21.3046 6.21618H10.6484Z" fill="#959698"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9989 22.2003C19.3973 22.2003 22.1522 19.4454 22.1522 16.047C22.1522 12.6487 19.3973 9.8938 15.9989 9.8938C12.6006 9.8938 9.8457 12.6487 9.8457 16.047C9.8457 19.4454 12.6006 22.2003 15.9989 22.2003ZM15.9989 20.0315C18.2254 20.0315 20.0303 18.2266 20.0303 16.0001C20.0303 13.7736 18.2254 11.9686 15.9989 11.9686C13.7724 11.9686 11.9674 13.7736 11.9674 16.0001C11.9674 18.2266 13.7724 20.0315 15.9989 20.0315Z" fill="#959698"/>
<circle cx="22.4596" cy="9.58753" r="1.43811" fill="#959698"/>
</svg>
</div>
<div class="youtube">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.5505 21.5839C4.13508 19.5661 3.55349 14.3911 4.5505 9.83332C4.68898 9.05193 5.4229 7.45948 7.25076 7.34079C10.5148 7.08362 18.5681 6.72359 24.6688 7.34079C25.4898 7.35068 27.2504 7.86304 27.7252 9.83332C28.0911 11.8808 28.6035 17.0676 27.7252 21.4355C27.5471 22.1377 26.6866 23.5779 24.6688 23.7203C23.1258 23.9874 17.482 24.3612 7.25076 23.7203C6.55838 23.6412 5.049 23.1031 4.5505 21.5839ZM19.9214 15.5306L13.7197 11.9995V19.0617L19.9214 15.5306Z" fill="#959698"/>
</svg>
</div>
<div class="twitter">
<svg width="25" height="20" viewBox="0 0 25 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.8958 5.94742C6.67207 5.74377 2.89677 2.54559 1.66208 0.971951C-0.142464 3.93409 1.89161 6.46425 3.13421 7.35906C2.64034 7.4146 1.4563 7.04279 0.926017 6.84994C1.09697 10.1083 3.65658 11.3703 4.91501 11.594C4.23119 11.7976 3.18962 11.7868 2.75431 11.756C3.62809 14.3849 6.17345 15.0421 7.33691 15.0421C5.15246 17.0045 1.53545 17.2483 0 17.1249C4.77255 19.9019 12.1332 20.4573 17.3806 15.5049C20.806 11.745 21.5916 9.34775 21.797 4.76719C23.1457 3.82301 23.9419 2.73843 24.1714 2.31417C23.5826 2.64741 22.1215 2.91585 21.4646 3.00842C22.6803 2.37897 23.3641 1.00281 23.5541 0.393409C22.8513 0.893269 21.1718 1.37307 20.4199 1.55049C19.2077 0.424119 18.3711 0.127537 16.6921 0C13.1542 0.208275 11.3971 2.80014 11.8958 5.94742Z" fill="#959698"/>
</svg>
</div>
</div>
<div class="burguerMenu">
<input type="checkbox" id="hamburguer" style="display: none;">
<label for="hamburguer">
<div class="burguer-menu mr-2"></div>
</label>
</div>
</div>
</nav>
</header>
<!--================== BG-VIDEO =============================-->
<section class="bg-video">
<video class="video" autoplay muted loop>
<source src="video/spiderman2.mp4" type="video/mp4">
</video>
</section>
<!--==================CONTAINER=============================-->
<section class="container">
<div class="container-item-1 item-1">
<div class="px-1">
<img src="images/spiderman-text.png" alt="Spider-man - Miles Morales">
</div>
<p class="my-2 item-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Iaculis velit magna
vitae mauris orci fames posuere nibh. Sit tellus amet facilisi sit odio pulvinar
scelerisque quam et. Ultrices facilisis nunc massa diam, quis mi imperdiet.
</p>
<div class="item-3">
<a href="" class="btn btn-pre-order">Pre-order now</a>
<a href="" class=" ml-2 btn btn-teaser">Watch the teaser</a>
</div>
<div class="images flex align-itens-center mt-2 item-4">
<div class="ps">
<svg class="svs-size-auto" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.73534 22.7959L12.7267 19.4614V22.5901L7.55358 24.319C6.75904 24.6373 6.60358 24.8665 6.97879 25.3894C7.43045 25.801 9.03165 25.7187 9.9759 25.3894L12.7267 24.319V27.036C11.7413 27.2666 10.2907 27.3242 9.68851 27.3242C6.67223 27.338 3.27082 26.2432 2.70893 25.7187C1.51832 24.6072 1.80574 23.5369 3.73534 22.7959Z" fill="white"/>
<path d="M13.7531 6V28.3945L18.762 30V10.9811C18.8473 10.292 19.0092 10.0148 19.7063 9.91081C20.2014 9.86046 20.8928 10.6067 20.8558 10.9811V19.4614C21.5217 19.8567 21.9748 19.981 22.9086 20.0377C25.318 19.8542 26.3899 19.2371 26.5627 14.9331C26.5799 11.8989 25.8535 10.5069 22.9086 8.71698C19.5229 7.21824 17.496 6.67425 13.7531 6Z" fill="white"/>
<path d="M19.7063 24.8542V21.7667C21.2795 21.2885 22.2136 21.0712 24.0993 20.9022C26.3985 20.6963 28.8208 20.7376 32.4748 22.2607C33.5833 22.7228 34.3634 24.4837 31.1199 25.7187L19.7063 29.753V26.7067L27.9996 23.825C28.9916 23.4713 29.0671 23.0017 28.4102 22.7959C27.507 22.4666 26.6038 22.5077 25.7415 22.7959L19.7063 24.8542Z" fill="white"/>
</svg>
</div>
<div class="marvel">
<svg class="ml-2 svs-size-auto" width="62" height="28" viewBox="0 0 62 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="2" width="58" height="24.0415" fill="#EC111A"/>
<path d="M3.95312 4.40417V23.6373H7.40908L7.55934 15.0726L9.06193 23.6373H11.0153L12.5179 15.0726V23.6373H19.1293L19.5801 20.7824H22.2847L22.7355 23.6373H29.4972V17.4767H30.2485L31.7511 23.6373H35.207L33.1034 16.4249C34.2876 15.2354 34.847 14.4377 35.207 12.2176L37.1604 23.6373H41.3676L44.0723 6.65806V23.6373H50.6837V20.1814H47.5283V15.8239H50.6837V12.2176H47.5283V8.01039H50.6837V4.40417H40.9169L39.264 16.7254L37.9117 4.40417H34.0049L34.3055 7.2591C33.7044 5.75651 31.7511 4.40417 30.549 4.40417H25.891V21.2332L23.4868 4.40417H18.6785L16.1241 21.8342V4.40417H11.6163L9.96349 13.8705L8.31064 4.40417H3.95312Z" fill="white"/>
<path d="M51.2847 23.6373V4.40417H54.7407V20.3316H57.7459V23.6373H51.2847Z" fill="white"/>
<path d="M21.0831 9.66308L20.0312 17.3263H22.1349L21.0831 9.66308Z" fill="#EC111A"/>
<path d="M29.4976 13.7201V7.70972C30.8815 8.14666 31.7515 8.91179 31.7515 10.8652C31.7515 12.2175 30.9046 13.5298 29.4976 13.7201Z" fill="#EC111A"/>
</svg>
</div>
</div>
</div>
<div class="container-item-2 item-5">
<div class="img-spiderman">
<img class="js-tilt" src="images/image 4.png" alt="Spider-man" class="spiderman">
</div>
</div>
</section>
<!--================== JS =============================-->
<script src="js/app.js"></script>
<script src="https://code.jquery.com/jquery-3.6.2.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js" integrity="sha512-DkPsH9LzNzZaZjCszwKrooKwgjArJDiEjA5tTgr3YX4E6TYv93ICS8T41yFHJnnSmGpnf0Mvb5NhScYbwvhn2w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$('.js-tilt').tilt({
perspective: 2000,
scale: 1.05
});
</script>
</body>
</html>