-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
371 lines (352 loc) · 19.1 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
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SAYNA || HOME || BATMAN 2 || JS PROJECT</title>
<meta name="description" content="HOME PAGE / BATMAN 2 / SAYNA / PROJET JAVASCRIPT">
<meta name="keywords" content="BATMAN, GAME, JAVASCRIPT">
<link rel="stylesheet" type="text/css" href="./assets/css/style.css">
<link rel="stylesheet" type="text/css" href="./assets/css/home-style.css">
<link rel="icon" href="./assets/images/logos/logo_bat_flèche_2.png" type="image/x-icon">
</head>
<body>
<!-- EN TETE -->
<header id="page-top">
<h1 class="hover-jaune-bataman"></h1>
<nav>
<ul>
<li>
<a href="#" class="active">HOME</a>
</li>
<li>
<a href="./game.html">GAME</a>
</li>
</ul>
</nav>
</header>
<!-- BAR LATERAL -->
<aside class="fade-in">
<ul>
<li class="cursor-pointer" id="batman-up-button">
<img class="hover-jaune-bataman" src="assets/images/logos/logo_bat_flèche.png" alt="Logo aller en haut du page">
</li>
<li>
<a href="">
<img class="social-network hover-jaune-bataman" src="assets/images/logos/icon_facebook.png" alt="Logo facebook contact">
</a>
</li>
<li>
<a href="">
<img class="social-network hover-jaune-bataman" src="assets/images/logos/icon_ig.png" alt="Logo instagram contact">
</a>
</li>
<li>
<a href="">
<img class="social-network hover-jaune-bataman" src="assets/images/logos/icon_tw.png" alt="Logo twitter contact">
</a>
</li>
<li class="mt-10 cursor-pointer" id="batman-down-button">
<img class="hover-jaune-bataman" src="assets/images/logos/logo_bat_flèche_2.png" alt="Logo aller en bas du page">
</li>
</ul>
</aside>
<!-- CONTENU PRINCIPAL -->
<main>
<!-- INTRODUCTION -->
<section class="introduction" id="introduction">
<p class="text-1 fade-in-start">
Au nom de ses parents assassinés, Bruce Wayne mène une guerre éternelle contre les criminels de Gotham City. Il est vengeur. Il est la nuit.Il est Batman.
<br><br>
<strong class="ff-rajdhani-bold">Il est Batman</strong>
</p>
<div class="boutton-intro fade-in-start">
<button id="scroll-to-heros"><span>VOIR LE HEROS</span></button>
<button id="scroll-to-enemy"><span>LES ADVERSAIRES</span></button>
</div>
<div class="margin-200 fade-in-start">
<img src="./assets/images/logos/flèche_down_header.png" alt='Flèche down header'>
</div>
</section>
<!-- BATMAN AU CINEMA -->
<section class="content" id="heros">
<h1 class="fade-in">BATMAN AU CINÉMA</h1>
<p class="text-1 fade-in">
Le personnage de Batman est un super héros de l’univers de DC Comics. Il a été créé par le dessinateur Bob Kane et le scénariste Bill Finger et apparaît pour la première fois dans le comic book Detective Comics en 1939. Batman se différencie de Superman, alors héros majeur de DC, car il n’a aucun pouvoir. Il sera porté au cinema pour la première fois en 1943 par Lewis Wilson et bénéficiera de nombreux reboot, donnant l’occasion à de multiples acteurs d’interpréter l’homme chauve-souris. Voici les trois derniers :
</p>
<div>
<div class="fade-zoom card-person">
<img class="animate-zoom" src="assets/images/illustrations/Bathome2.png" alt="Photo de batman en 2022 (Robert Pattinson)">
<div class="person-name">
<div>
<img class="person-image" src="assets/images/personnage/robert_pattinson.jpg">
<p>Robert Pattinson <br> <span>2022</span></p>
</div>
</div>
</div>
<div class="fade-zoom card-person">
<img class="animate-zoom" src="assets/images/illustrations/Bathome3.png" alt="Photo de batman 2006, 2008, 2012 (Christian Bale)">
<div class="person-name">
<div>
<img class="person-image" src="assets/images/personnage/christian_bale.jpg">
<p>Christian Bale <br> <span>2006-2008-2012</span></p>
</div>
</div>
</div>
<div class="fade-zoom card-person">
<img class="animate-zoom" src="assets/images/illustrations/Bathome4.png" alt="Photo de batman 2016-2017/2020-2023 (Ben Affleck)">
<div class="person-name">
<div>
<img class="person-image" src="assets/images/personnage/ben_affleck.jpg">
<p>Ben Affleck <br> <span>20016-2017/2020-2023</span></p>
</div>
</div>
</div>
</div>
</section>
<img class="img-enemy" src="assets/images/illustrations/Bathome13.png" alt="Image de boomerang de batman">
<!-- NEMESIS -->
<section class="content" id="enemy">
<h1 class="fade-in">NÉMÉSIS</h1>
<p class="text-1 fade-in">
Batman souhaite éradiquer la criminalité de Gotham. C’est pourquoi, il affrontera la plupart du temps, des vilains sans capacités surnaturelles mais particulièrement violents ou psychopathes. Avec son introduction dans la Justice League il aura l’occasion de se mesurer à des antagonistes qui défient l’imagination et les lois de la physique. Parmi les derniers ennemis emblématiques que nous avons pu voir au cinéma, on retrouve :
</p>
<div>
<div class="fade-zoom card-person">
<img class="animate-zoom" src="assets/images/illustrations/Bathome5.png" alt="Photo de The Riddler en 2022 (Paul Dano)">
<div class="person-name">
<div>
<img class="person-image" src="assets/images/personnage/riddler.jpg">
<p>The Riddler - Paul Dano <br> <span>2022</span></p>
</div>
</div>
</div>
<div class="fade-zoom card-person">
<img class="animate-zoom" src="assets/images/illustrations/Bathome6.png" alt="Photo de Le Joker en 2008 (Heath Ledger)">
<div class="person-name">
<div>
<img class="person-image" src="assets/images/personnage/le_joker.jpg">
<p>Le Joker Heath - Ledger <br> <span>2008</span></p>
</div>
</div>
</div>
<div class="fade-zoom card-person">
<img class="animate-zoom" src="assets/images/illustrations/Bathome7.png" alt="Photo de Darkseid en 2022 (Ray Porter)">
<div class="person-name">
<div>
<img class="person-image" src="assets/images/personnage/darkseid.jpg">
<p>Darkseid - Ray Porter <br> <span>2022</span></p>
</div>
</div>
</div>
</div>
</section>
<!-- ALLIES -->
<section class="content" id="section4">
<h1 class="fade-in">ALLIES</h1>
<p class="text-1 fade-in">
Alfred est le majordome des Wayne. A leur mort il s’occupe de l’éducation du jeune Bruce avant de l’assister dans son rôle du Batman. Ce dernier rencontrera Catwoman dès le premier numéro des aventures de l’homme-chauve souris en 1940. Tantôt ennemie tantôt alliée la jeune femme fatale fera tourner la tête de Batman à maintes reprises. Du côté de la police, Bruce pourra compter sur l’aide infaillible de James Gordon, “Jim” , qui désire lui aussi nettoyer sa ville de la criminalité qui y règne.
</p>
<div>
<div class="fade-zoom card-person">
<img class="animate-zoom" src="assets/images/illustrations/Bathome9.png" alt="Photo de Alfred Pennyworth - Michael Cain (2006-2008-2012)">
<div class="person-name">
<div>
<img class="person-image" src="assets/images/personnage/alfred_pennyworth.jpg">
<p>Alfred Pennyworth - Michael Cain <br> <span>2006-2008-2012</span></p>
</div>
</div>
</div>
<div class="fade-zoom card-person">
<img class="animate-zoom" src="assets/images/illustrations/Bathome8.png" alt="Photo de Catwoman - Zoé Kravitz (2008)">
<div class="person-name">
<div>
<img class="person-image" src="assets/images/personnage/catwoman.jpg">
<p>Catwoman - Zoé Kravitz <br> <span>2008</span></p>
</div>
</div>
</div>
<div class="fade-zoom card-person">
<img class="animate-zoom" src="assets/images/illustrations/Bathome10.png" alt="Photo de James Gordon (2014-2019)">
<div class="person-name">
<div>
<img class="person-image" src="assets/images/personnage/gordon.jpg">
<p>James Gordon <br> <span>2014-2019</span></p>
</div>
</div>
</div>
</div>
</section>
<img class="img-alias" src="assets/images/illustrations/Bathome12.png" alt="Photo de batman en position d'attaque">
<!-- JUSTICE LEAGUE -->
<section class="justice-league" id="section5">
<h1 class="fade-in">JUSTICE LEAGUE</h1>
<p class="text-1 fade-in">
Lorsque la Terre est menacée les plus grands super-héros s’allient pour la protéger. Ils doivent cependant apprendre à se faire confiance mutuellement et à faire équipe ce qui ne sera pas chose aisée. Ensemble ils forment la Justice League, les plus grands superhéros de la Terre, ceux vers qui le monde entier se tourne lorsque les menaces extraterrestres ou surnaturelles menacent son existence.
</p>
<div class="fade-zoom" style="z-index: -1;">
<img src="assets/images/illustrations/Bathome11.png" alt="Photo de l'equipe de Justice League">
</div>
</section>
<!-- MULTIMEDIA -->
<section class="multimedia" id="section6">
<h1 class="fade-in">MULTIMÉDIA</h1>
<div class="fade-in" style="display: inline-flex;">
<img class="arrow-left" src="assets/images/logos/icon_flèche_1.png" alt="fleche left">
<div class="multi-content">
<img src="assets/images/illustrations/Bathome_ba1.png">
<div class="bg-liner-green">
<h2>ACTION, ADVENTURE</h2>
<p class="text-randjani-head">Batman Begins</p>
<p class="text-space-grotesk-head">IMDB : 8.2</p>
<p class="text">
Le jeune Bruce Wayne assiste impuissant au meurtre de ses parents. Profondément traumatisé, il grandit obnubilé par un désir de vengeance. La Ligue des ombres, une secte de guerriers ninja dirigée par Ra's al Ghul, se chargera de son entraînement. De retour chez lui à Gotham, avec l'aide de son majordome Alfred Pennyworth, Bruce Wayne se lance alors dans la lutte contre le crime sous le nom de Batman.
</p>
</div>
</div>
<img class="arrow-right" src="assets/images/logos/icon_flèche_2.png" alt="fleche right">
</div>
<div id="multimedia" class="fade-zoom video" style="margin-top: 20%;">
<img id="player-icon" src="./assets/images/logos/icon_player.png" onclick="document.getElementById('video').play(); this.style.display = 'none'" class="player-icon">
<video onclick="pauseOrPlay()" poster="./assets/images/illustrations/Bathome_ba2.png" id="video" src="./assets/multimedia/BATMAN_VIDEO.mp4" controls></video>
</div>
<br><br>
</section>
<section class="contact" id="section7">
<h1 class="fade-in">PRENONS CONTACT</h1>
<div>
<form class="formulaire-contact">
<div class="part-1 fade-in">
<label class="sous-titre">ADRESSE EMAIL</label><br>
<input type="text" name="email" placeholder="Adresse email"><br>
</div>
<div class="part-2 fade-in">
<label class="sous-titre">NEWSLETTER</label><br>
<p class="text-muted">
En cochant cette case vous acceptez de recevoir l’actualité concernant les aventures de Batman :
<input type="checkbox" name="accept">
</p>
<div class="custom-select">
<select name="type">
<option value="">Choisissez la fréquence à laquelle vous souhaitez recevoir votre newsletter</option>
<option value="one_per_week">Une fois par semaine</option>
<option value="two_per_month">Une fois toutes deux semines (2 fois par mois)</option>
<option value="one_pere_month">Une fois par mois</option>
<option value="one_per_threemonth">Une fois tous les trois mois</option>
<option value="one_per_sixmonth">Une fois tous les six mois</option>
</select>
</div>
<br><br>
<input type="text" name="confirmation" placeholder="Souhaitez vous recevoir des news">
</div>
<div class="part-3 fade-in">
<button type="button">Des films</button>
<button type="button" class="ml-10">Des comics</button>
<button type="button" class="ml-10">De tout</button>
</div>
<div class="part-4 fade-in">
<label class="sous-titre">MESSAGE</label><br>
<input type="text" name="message" placeholder="Laissez un commentaire pour la communauté"><br>
</div>
<div class="part-5 fade-in">
<button type="submit">CONFIRMER</button>
</div>
</form>
</div>
</section>
<section class="citation" id="section8">
<div class="open fade-in">
<img class="guillemet" src="assets/images/logos/icon_guillemets_1.png">
</div>
<div class="text fade-in">
<p>
La seule façon raisonnable de vivre en ce bas monde,<br> c'est en dehors des règles.
</p>
<p class="subtext">
The Dark Knight : Le Chevalier Noir - <br>
Le Joker à Batman (2008)
</p>
<div class="text-center -ml-5" id="wrapper-dot-9">
<ul id="dot-9">
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="disc"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>
</div>
</div>
<div class="close fade-in">
<img class="guillemet" src="assets/images/logos/icon_guillemets_2.png">
</div>
</section>
</main>
<!-- FOOTER -->
<footer id="page-bottom">
<div class="text">
<img src="assets/images/logos/icon_WB.png">
Ce projet respecte l’univers cinématographique des films Batman récents. Version Nolan & Snyder & Reeves
</div>
<div class="logos">
<ul class="-ml-5">
<li>
<a href="">
<img class="hover-jaune-bataman" src="assets/images/logos/logo_sayna_white.png">
</a>
</li>
<li>
<a href="">
<img class="hover-jaune-bataman" class="-ml-5" src="assets/images/logos/icon_x.png">
</a>
</li>
<li>
<a href="">
<img class="hover-jaune-bataman"class="-ml-5" src="assets/images/logos/icon_DC.png">
</a>
</li>
<li>
<a href="">
<img class="hover-jaune-bataman" src="assets/images/logos/icon_facebook.png">
</a>
</li>
<li>
<a href="">
<img class="hover-jaune-bataman" src="assets/images/logos/icon_ig.png">
</a>
</li>
<li>
<a href="">
<img class="hover-jaune-bataman" src="assets/images/logos/icon_tw.png">
</a>
</li>
</ul>
</div>
</footer>
<!-- POPUPBOX ERROR -->
<div class="popup-error">
<div class="popup-content part-3">
<h2>Erreur</h2>
<ul id="message-error">
</ul>
<button id="close-popup">OK</button>
</div>
</div>
<!-- POPUPBOX MESSAGE -->
<div class="popup-message">
<div class="popup-content">
<span class="message">MESSAGE REÇU !</span>
</div>
</div>
<div id="canvas-container">
<canvas id="canvas" width="1300" height="700"></canvas>
</div>
<script src="assets/js/scripts.js"></script>
<script src="assets/js/custom-select.js"></script>
<script src="assets/js/home-script.js"></script>
</body>
</html>
<!--/E-SHOP/MON COMPTE-->