-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
116 lines (110 loc) · 5.11 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Favorite Lol champion</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="img/heart.jpg" />
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="manifest" href="manifest.json">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="https://universe.leagueoflegends.com/en_US/champion/ekko/"><img id="Lol"
src="https://img.pngio.com/download-free-png-blue-league-legends-icons-of-symbol-garena-league-of-legends-minimalist-png-800_800.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#Home"> <i class="fab fa-fort-awesome"></i> Region</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Weapon"> <i class="fas fa-tools"></i> Weapon</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Quotes"> <i class="fas fa-quote-left"></i> Quotes</a>
</li>
</ul>
</div>
</nav>
<header>
<div class="overlay"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="vid/Ekko, the Boy Who Shattered Time _ Login Screen - League of Legends.mp4" type="video/mp4">
</video>
<div class="container h-100">
<div class="d-flex h-10 text-left align-items-center">
<div class="w-100 text-white">
<h1 class="display-3">Ekko</h1>
<h3>THE BOY WHO SHATTERED TIME</h3>
<p class="lead mb-0 col-md-4">Ekko represents the ingenuity and independent spirit of Zaun—a place where the
clever test their bravery and limits in the name of what could be possible.What started out as an idea for a
“time kid” ultimately gave us a chance to walk the streets of Zaun with new intention and purpose.</p>
</div>
</div>
</div>
</header>
<section id="Home">
<br><img class="mx-auto d-block" src="./img/zaun_crest_icon.png">
<div class="text-center">
<h1 class="display-3">Zaun</h1>
<h3 class="text-light">THE CITY OF IRON AND GLASS</h3>
</div>
<div class="container"><br>
<div class="row">
<div class="col-md-8 mx-auto">
<p class="text-light">
Zaun is a large, undercity district, lying in the deep canyons and valleys threading Piltover. What light
reaches below is filtered through fumes leaking from the tangles of corroded pipework and reflected from the
stained glass of its industrial architecture. Zaun and Piltover were once united, but are now separate, yet
symbiotic societies. Though it exists in perpetual smogged twilight, Zaun thrives, its people vibrant and
its culture rich. Piltover’s wealth has allowed Zaun to develop in tandem; a dark mirror of the city above.</p>
</div>
</div>
</div>
</section>
<section id="Weapon">
<img class="img-fluid"
src="https://am-a.akamaihd.net/image?f=https%3A%2F%2Funiverse-meeps.leagueoflegends.com%2Fv1%2Fassets%2Fimages%2Fimage-gallery%2Fekko_weaponanimation.jpg&resize=:1200">
</section>
<section class="my-5" id="Quotes">
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto">
<div class="text-center">
<h1>Best Quotes</h1>
<blockquote class="blockquote text-light">
<p>"It's not how much time you have, it's how you use it."</p>
<p>"Never had luck. Never needed it."</p>
<p>"Doubt me - I love that."</p>
<p>"Not quitting until it's right!"</p>
<p>"Won this fight already - doing it again for fun."</p>
</blockquote>
</div>
</div>
</div>
</div>
</section>
<footer class="py-5">
<div class="container">
<div class=" text-center text-muted">Copyright © 2021<img class="mx-auto d-block"
src="./img/GitHub-Mark-Light-32px.png"><a class="text-muted"
href="https://github.com/ayoub3bidi/myFavoriteLolChampion">Ayoub Abidi</a>
</div>
</div>
</footer>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./service-worker.js');
}
</script>
</body>
</html>