-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
153 lines (148 loc) · 8.09 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
<!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>Arcade | League of Legends</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
rel="stylesheet"
/>
<script src="js/svg-inject.min.js"></script>
</head>
<body>
<section class="bg-loader">
<svg
width="218"
height="243"
viewBox="0 0 218 243"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
class="logo-ionia"
d="M82.5566 237.164C0.591606 171.954 1.59985 83.2378 100.057 65.1639C59.4741 59.052 38.4992 65.0645 6.05658 102.164C-9.25502 173.4 8.52734 207.841 82.5566 237.164Z"
fill="#F2F2F2"
/>
<path
class="logo-ionia"
d="M203.611 93.2461C203.196 86.6063 203.088 81.9261 204.557 92.6639C204.71 93.7843 204.809 94.7028 204.863 95.4457C206.372 98.2304 208.534 102.596 211.557 109.164C230.361 150.018 200.051 248.544 97.0566 241.164L82.5566 227.164C162.898 248.277 220.041 200.161 204.557 106.164C204.557 106.164 204.223 102.081 203.906 97.6173C202.397 95.4334 200.082 87.4244 203.611 93.2461Z"
fill="#F2F2F2"
/>
<path
class="logo-ionia"
d="M97.0566 163.664C86.3275 135.039 91.2474 122.526 117.057 112.664C112.515 125.625 111.893 132.961 114.057 146.164C118.889 146.497 120.79 145.776 122.557 142.664C129.129 148.505 131.125 151.705 129.057 157.164C122.547 174.718 116.762 179.318 97.0566 163.664Z"
fill="#F2F2F2"
/>
<path
class="logo-ionia"
d="M131.557 65.1639C69.1508 39.5678 48.2524 55.8863 11.0566 85.1639C47.997 30.7223 76.1284 15.0183 137.557 45.1639C147.059 63.6693 146.674 68.8868 131.557 65.1639Z"
fill="#F2F2F2"
/>
<path
class="logo-ionia"
d="M122.557 136.164C120.514 129.871 120.596 126.955 122.557 122.664C122.881 126.054 124.395 127.442 129.057 129.164C136.062 134.359 138.73 136.77 141.057 142.664C144.912 155.59 142.906 159.066 137.557 163.664C136.446 150.941 136.992 143.319 122.557 136.164Z"
fill="#F2F2F2"
/>
<path
class="logo-ionia"
d="M176.557 79.164C140.09 14.9695 92.403 8.60305 37.0566 45.1639C34.0526 45.1013 33.7215 44.2393 40.5566 38.1639C91.6804 2.96179 133.899 -0.805725 180.057 61.6639V79.164H176.557Z"
fill="#F2F2F2"
/>
<path
class="logo-ionia"
d="M192.057 70.1639L186.057 63.6639C157.28 16.2027 131.839 6.49417 81.7317 8.75611C102.003 -0.926701 115.078 -4.44939 162.057 15.6639L152.557 5.16392C163.343 10.3171 168.404 13.5778 174.057 20.6639C186.075 38.4276 191.518 48.7201 195.057 68.6639L192.057 70.1639Z"
fill="#F2F2F2"
/>
<path
class="logo-ionia"
d="M137.557 70.1639C148.213 70.3618 153.45 69.4832 149.557 50.1639C163.344 61.7104 169.75 68.7459 172.057 85.1639C175.16 90.2235 177.596 91.817 183.057 92.6639C183.629 86.3878 183.943 82.8564 183.057 73.6639C183.057 73.6639 183.057 70.1639 186.057 71.6639C189.057 73.1639 194.557 82.1639 194.557 82.1639V105.164C193.957 110.622 192.652 112.293 186.057 109.164C170.207 92.8031 160.957 83.9237 137.557 73.6639V70.1639Z"
fill="#F2F2F2"
/>
<path
class="logo-ionia"
d="M81.5566 8.66392L81.7317 8.75611M81.7317 8.75611C131.839 6.49417 157.28 16.2027 186.057 63.6639L192.057 70.1639L195.057 68.6639C191.518 48.7201 186.075 38.4276 174.057 20.6639C168.404 13.5778 163.343 10.3171 152.557 5.16392L162.057 15.6639C115.078 -4.44939 102.003 -0.926701 81.7317 8.75611ZM100.057 65.1639C1.59985 83.2378 0.591606 171.954 82.5566 237.164C8.52734 207.841 -9.25502 173.4 6.05658 102.164C38.4992 65.0645 59.4741 59.052 100.057 65.1639ZM204.557 92.6639C201.821 72.6604 204.557 106.164 204.557 106.164C220.041 200.161 162.898 248.277 82.5566 227.164L97.0566 241.164C200.051 248.544 230.361 150.018 211.557 109.164C192.753 68.3096 207.292 112.668 204.557 92.6639ZM117.057 112.664C91.2474 122.526 86.3275 135.039 97.0566 163.664C116.762 179.318 122.547 174.718 129.057 157.164C131.125 151.705 129.129 148.505 122.557 142.664C120.79 145.776 118.889 146.497 114.057 146.164C111.893 132.961 112.515 125.625 117.057 112.664ZM11.0566 85.1639C48.2524 55.8863 69.1508 39.5679 131.557 65.1639C146.674 68.8868 147.059 63.6693 137.557 45.1639C76.1284 15.0183 47.997 30.7223 11.0566 85.1639ZM122.557 122.664C120.596 126.955 120.514 129.871 122.557 136.164C136.992 143.319 136.446 150.941 137.557 163.664C142.906 159.066 144.912 155.59 141.057 142.664C138.73 136.77 136.062 134.359 129.057 129.164C124.395 127.442 122.881 126.054 122.557 122.664ZM37.0566 45.1639C92.403 8.60305 140.09 14.9695 176.557 79.164H180.057V61.6639C133.899 -0.805725 91.6804 2.96179 40.5566 38.1639C33.7215 44.2393 34.0526 45.1013 37.0566 45.1639ZM149.557 50.1639C153.45 69.4832 148.213 70.3618 137.557 70.1639V73.6639C160.957 83.9237 170.207 92.8031 186.057 109.164C192.652 112.293 193.957 110.622 194.557 105.164V82.1639C194.557 82.1639 189.057 73.1639 186.057 71.6639C183.057 70.1639 183.057 73.6639 183.057 73.6639C183.943 82.8564 183.629 86.3878 183.057 92.6639C177.596 91.817 175.16 90.2235 172.057 85.1639C169.75 68.7459 163.344 61.7104 149.557 50.1639Z"
stroke="black"
/>
</svg>
</section>
<header>
<nav class="navbar">
<div class="nav-menu">
<div class="logo">
<img
class="logo-ionia"
src="svg/ionia.svg"
onload="SVGInject(this)"
/>
</div>
<ul class="nav-list">
<li><a href="#" class="nav-link">Home</a></li>
<li><a href="#" class="nav-link">Trailer</a></li>
<li><a href="#" class="nav-link">Wallpaper</a></li>
</ul>
</div>
<div class="nav-social">
<img src="svg/icon-facebook.svg" onload="SVGInject(this)" />
<img src="svg/icon-instagram.svg" onload="SVGInject(this)" />
<img src="svg/icon-youtube.svg" onload="SVGInject(this)" />
<img src="svg/icon-twitter.svg" onload="SVGInject(this)" />
</div>
<div class="bx mr-2"></div>
</nav>
</header>
<section class="bg-video">
<video class="video" autoplay muted loop>
<source src="video/arcade.mp4" type="video/mp4" />
</video>
</section>
<section class="container">
<div class="container-item-1 ahri-text">
<div class="px-1">
<h1>Arcade</h1>
</div>
<p class="my-2 text">
Owner of the mysterious six-million-point high score in the infamously
difficult beat-em-up Demacia Vice, Ahri is a force of nature on the
retro battlefields of Arcade World. Dashing between bosses before
ripping them apart with her 8-bit magic, she's already earned the
nickname “Queen of the Arcade.”
</p>
<div class="buttons">
<a href="#" class="btn">See in game</a>
<a href="#" class="ml-2 btn-secondary">Watch Teaser</a>
</div>
<div class="flex items-center mt-3">
<img
src="img/lol.png"
class="logo-lol ml-2 w-auto"
onload="SVGInject(this)"
/>
</div>
</div>
<div class="container-item-2 ahri-image">
<div class="js-tilt">
<img
alt="Ahri"
class="ahri"
src="img/ahri.png"
onload="SVGInject(this)"
/>
</div>
</div>
</section>
<script src="js/app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"></script>
<script>
$(".js-tilt").tilt({
perspective: 3000,
scale: 1.07,
});
</script>
</body>
</html>