-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
115 lines (108 loc) · 9.17 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
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>League of Legends</title>
<link rel="stylesheet" href="./css/style.css" type="text/css" />
<link href="https://fonts.cdnfonts.com/css/open-dyslexic" rel="stylesheet">
<link href="https://fonts.cdnfonts.com/css/open-dyslexic" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/bd5d7da3bf.js" crossorigin="anonymous"></script>
</head>
<body class="all_elements">
<header>
<div class="slider_container">
<a href="index.html"><img src="./ressources/logo-d-4x-zoom-rendered-00.webp" alt="Logo League of Legend"></a>
<label class="switch">
<input type="checkbox">
<span class="slider roundi"></span>
</label></div>
<div class="burger-menu">
<img src="/LoL/ressources/bars-solid (3).svg" alt=" burger menu icon" id="burger-icon" />
</div>
<nav id="navbar">
<a href="index.html" class="lien-actif">Accueil</a>
<a href="./second_pages/role.html">Rôles</a>
<a href="./second_pages/merch.html">Merch</a>
<a href="./second_pages/media.html">Médias</a>
</nav>
</header>
<main>
<div class="intro-home-page">
<div class="video-home-page">
<video autoplay muted loop>
<source src="https://www.leagueoflegends.com/static/hero-c35bd03ceaa5f919e98b20c905044a3d.webm" type="video/mp4">
Your browser does not support the video tag.
</video>
<img class="logo-home-page" src="./ressources/logo.png" />
<a class="download" href="https://signup.leagueoflegends.com/fr-fr/signup/index">Télécharger</a>
</div>
</div>
<div class="invisible-div-home-page"></div>
<div class="container content-home-page">
<img class="separator-home-page" src="./ressources/decorator-hr-lg.png" />
<h1 class="h1-home-page">C'est quoi LoL ?</h1>
<article class="article-home-page">
<div class="div-img-home-page">
<img class="img-home-page" src="./ressources/map.png" />
</div>
<div class="text-article-home-page">
<h2 class="h2-home-page">Le lore du jeu</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet consectetur adipiscing elit ut aliquam purus sit amet. Facilisi cras fermentum odio eu feugiat. Vel facilisis
volutpat est velit. Volutpat maecenas volutpat blandit aliquam etiam erat. Vitae congue eu consequat ac felis. Luctus accumsan tortor posuere ac ut consequat semper viverra. At ultrices mi tempus imperdiet. Senectus et netus et
malesuada. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. Tortor vitae purus faucibus ornare suspendisse. Sem fringilla ut morbi tincidunt augue interdum velit euismod.</p>
<p>Tincidunt dui ut ornare lectus. Nisl nisi scelerisque eu ultrices. Parturient montes nascetur ridiculus mus. Natoque penatibus et magnis dis parturient montes nascetur ridiculus mus. Suspendisse sed nisi lacus sed viverra tellus. Eu
mi bibendum neque egestas congue quisque egestas. Senectus et netus et malesuada. Consequat ac felis donec et odio. Donec ac odio tempor orci. Tellus molestie nunc non blandit massa enim nec dui nunc. Sagittis aliquam malesuada
bibendum arcu. Dignissim enim sit amet venenatis urna cursus eget nunc scelerisque. Pellentesque habitant morbi tristique senectus. Amet venenatis urna cursus eget nunc scelerisque viverra mauris in. Elit pellentesque habitant
morbi tristique.</p>
</div>
</article>
<img class="separator-home-page" src="./ressources/decorator-hr-lg.png" />
<article class="article-2-home-page article-home-page">
<div class="div-img-home-page">
<img class="img-home-page" src="./ressources/MOBA.png" />
</div>
<div class="text-article-home-page">
<h2 class="h2-home-page">Un jeu MOBA</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet consectetur adipiscing elit ut aliquam purus sit amet. Facilisi cras fermentum odio eu feugiat. Vel facilisis
volutpat est velit. Volutpat maecenas volutpat blandit aliquam etiam erat. Vitae congue eu consequat ac felis. Luctus accumsan tortor posuere ac ut consequat semper viverra. At ultrices mi tempus imperdiet. Senectus et netus et
malesuada. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. Tortor vitae purus faucibus ornare suspendisse. Sem fringilla ut morbi tincidunt augue interdum velit euismod.</p>
<p>Tincidunt dui ut ornare lectus. Nisl nisi scelerisque eu ultrices. Parturient montes nascetur ridiculus mus. Natoque penatibus et magnis dis parturient montes nascetur ridiculus mus. Suspendisse sed nisi lacus sed viverra tellus. Eu
mi bibendum neque egestas congue quisque egestas. Senectus et netus et malesuada. Consequat ac felis donec et odio. Donec ac odio tempor orci. Tellus molestie nunc non blandit massa enim nec dui nunc. Sagittis aliquam malesuada
bibendum arcu. Dignissim enim sit amet venenatis urna cursus eget nunc scelerisque. Pellentesque habitant morbi tristique senectus. Amet venenatis urna cursus eget nunc scelerisque viverra mauris in. Elit pellentesque habitant
morbi tristique.</p>
</div>
</article>
<img class="separator-home-page" src="./ressources/decorator-hr-lg.png" />
<article class="article-home-page">
<div class="div-img-home-page">
<img class="img-home-page" src="./ressources/creators.png" />
</div>
<div class="text-article-home-page">
<h2 class="h2-home-page">La création du jeu</h2>
<p>Pour comprendre d’où vient League of Legends, il faut s’intéresser à un tout autre jeu : Warcraft. On ne parle pas ici de World of Warcraft, très célèbre MMORPG, mais bien de Warcraft, jeu de stratégie. Les jeux les plus populaires
sont souvent adorés par leur communauté, qui donne du sien pour apporter encore plus de vie à leur jeu préféré. Il existe donc des façons de modifier un jeu pour avoir différents effets. Ces Mods permettent entre autres de changer
les visuels du jeu ou de créer de nouveaux modes de jeu. </p>
<p>Dans les années 2000 un mod de Warcraft est créé : Defense of the Ancients. Cinq joueurs s'y affrontent sur une carte à trois voies, pour tenter de détruire la base adverse : les fondements de DotA sont posés. Ce petit Mod, simple
ajout à un jeu déjà énorme, va conquérir le cœur des joueurs et évoluer dans un style de jeu à part entière : les MOBAs.</p>
<p>Connaissant un énorme succès, DotA n’en reste pas moins une simple extension d’un autre jeu. Les créateurs de ce nouveau jeu n’en possèdent pas vraiment les droits, car Blizzard, société qui possède Warcraft, comptent bien garder cette
nouvelle pépite pour eux. Ainsi, en 2005, les 2 créateurs du Mod DotA se rapprochent d’une autre société, Riot Games. Ils comptent créer leur propre jeu MOBA, indépendant de l’influence de Blizzard. 4 ans plus tard, la bêta de
League of Legends sort, en avril 2009. L’engouement est immédiat, les joueurs aiment ce nouveau style de jeu, et l’importance qui est accordée à l’équilibrage des personnages en fait un franc succès.</p>
<p>15 ans plus tard, Riot Games a su développer au travers de League of Legends une des plus grandes communautés de jeu vidéo au monde, la plus grande scène E-sport et s’est diversifié dans d’autres jeux.</p>
</div>
</article>
</div>
</main>
<footer class="footer">
<p>Copyright : Kilian - Janel - Maksym - Nicolas & Riot Games</p>
<div class="social">
<a href="https://www.youtube.com"><i class="fa-brands fa-youtube" style="color: #c89c3d;"></i></a>
<a href="https://www.facebook.com" target="_blank"><i class="fa-brands fa-facebook-f" style="color: #c89c3d;"></i></a>
<a href="https://twitter.com/?lang=fr"><i class="fa-brands fa-x-twitter" style="color: #c89c3d;"></i></a>
<a href="https://www.facebook.com/?locale=fr_FR"><i class="fa-brands fa-instagram" style="color: #c89c3d;"></i></a>
<a href="https://discord.com/"><i class="fa-brands fa-discord" style="color: #c89c3d;"></i></a>
</div>
</footer>
</body>
<script src="./js/style.js"></script>
</html>