Skip to content

Commit 53178ad

Browse files
firestar300firestar300
committed
feat: add episode 7, 8 & 9
1 parent 7f680c3 commit 53178ad

File tree

18 files changed

+348
-7
lines changed

18 files changed

+348
-7
lines changed

‎episode7.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="fr">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<!-- SEO Meta Tags -->
8+
<title>Star Wars Episode VII : Le Réveil de la Force - Intro CSS3</title>
9+
<meta name="description" content="Revivez l'introduction épique de Star Wars Episode VII : Le Réveil de la Force avec cette animation CSS3 fidèle à l'original.">
10+
<meta name="keywords" content="Star Wars, Episode 7, Le Réveil de la Force, CSS3, animation intro">
11+
12+
<!-- Open Graph -->
13+
<meta property="og:title" content="Star Wars Episode VII : Le Réveil de la Force - Intro CSS3">
14+
<meta property="og:description" content="Revivez l'introduction épique de Star Wars Episode VII avec cette animation CSS3.">
15+
<meta property="og:image" content="https://firestar300.github.io/starwars-intro-css3/img/the-force-awakens-artowork.png">
16+
17+
<!-- Favicon -->
18+
<link rel="icon" type="image/png" href="/img/favicon.png">
19+
20+
<link rel="stylesheet" href="/src/styles/episode-animation.css">
21+
</head>
22+
<body>
23+
<!-- Start Screen -->
24+
<div id="start-screen">
25+
<div class="start-content">
26+
<h1 class="episode-title">Episode <span class="roman">VII</span></h1>
27+
<h2 class="episode-subtitle uppercase">Le Réveil de la Force</h2>
28+
<button id="start-button" class="start-btn">
29+
<span class="btn-text">Commencer</span>
30+
<span class="btn-icon">▶</span>
31+
</button>
32+
<p class="start-hint">Cliquez pour lancer l'intro avec le son</p>
33+
</div>
34+
</div>
35+
36+
<!-- Animation Content (hidden initially) -->
37+
<div id="animation-content" style="display: none;">
38+
<p id="start">Il y a bien longtemps, dans une galaxie lointaine, très lointaine....</p>
39+
40+
<img src="/assets/img/starwars-logo.svg" alt="Star Wars" class="logo">
41+
42+
<div id="titles">
43+
<div id="titlecontent">
44+
<p class="title center">Episode <span class="roman">VII</span></p>
45+
<p class="sub center uppercase">Le Réveil de la Force</p>
46+
<br>
47+
<p>Luke Skywalker a disparu. En son absence, le sinistre PREMIER ORDRE a surgi des cendres de l'Empire et cherche à détruire Luke, le dernier des Jedi.</p>
48+
<br>
49+
<p>Avec le soutien de la RÉPUBLIQUE, la générale Leia Organa dirige une brave RÉSISTANCE. Elle est désespérée de retrouver son frère Luke et de bénéficier de son aide pour restaurer la paix et la justice dans la galaxie.</p>
50+
<br>
51+
<p>Leia a envoyé son pilote le plus audacieux en mission secrète sur Jakku, où un vieil allié a découvert une piste menant à l'endroit où se trouve Luke…</p>
52+
</div>
53+
</div>
54+
55+
<audio id="intro-audio">
56+
<source src="/assets/sounds/intro.mp3" type="audio/mpeg">
57+
</audio>
58+
59+
<!-- End screen buttons -->
60+
<div id="end-buttons" class="end-buttons">
61+
<button id="home-button" class="end-btn">
62+
<span class="btn-text">Accueil</span>
63+
</button>
64+
<button id="replay-button" class="end-btn">
65+
<span class="btn-text">Rejouer</span>
66+
</button>
67+
</div>
68+
</div>
69+
70+
<script type="module" src="/src/scripts/episode.js"></script>
71+
</body>
72+
</html>

‎episode8.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="fr">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<!-- SEO Meta Tags -->
8+
<title>Star Wars Episode VIII : Les Derniers Jedi - Intro CSS3</title>
9+
<meta name="description" content="Revivez l'introduction épique de Star Wars Episode VIII : Les Derniers Jedi avec cette animation CSS3 fidèle à l'original.">
10+
<meta name="keywords" content="Star Wars, Episode 8, Les Derniers Jedi, CSS3, animation intro">
11+
12+
<!-- Open Graph -->
13+
<meta property="og:title" content="Star Wars Episode VIII : Les Derniers Jedi - Intro CSS3">
14+
<meta property="og:description" content="Revivez l'introduction épique de Star Wars Episode VIII avec cette animation CSS3.">
15+
<meta property="og:image" content="https://firestar300.github.io/starwars-intro-css3/img/the-last-jedi-artwork.png">
16+
17+
<!-- Favicon -->
18+
<link rel="icon" type="image/png" href="/img/favicon.png">
19+
20+
<link rel="stylesheet" href="/src/styles/episode-animation.css">
21+
</head>
22+
<body>
23+
<!-- Start Screen -->
24+
<div id="start-screen">
25+
<div class="start-content">
26+
<h1 class="episode-title">Episode <span class="roman">VIII</span></h1>
27+
<h2 class="episode-subtitle uppercase">Les Derniers Jedi</h2>
28+
<button id="start-button" class="start-btn">
29+
<span class="btn-text">Commencer</span>
30+
<span class="btn-icon">▶</span>
31+
</button>
32+
<p class="start-hint">Cliquez pour lancer l'intro avec le son</p>
33+
</div>
34+
</div>
35+
36+
<!-- Animation Content (hidden initially) -->
37+
<div id="animation-content" style="display: none;">
38+
<p id="start">Il y a bien longtemps, dans une galaxie lointaine, très lointaine....</p>
39+
40+
<img src="/assets/img/starwars-logo.svg" alt="Star Wars" class="logo">
41+
42+
<div id="titles">
43+
<div id="titlecontent">
44+
<p class="title center">Episode <span class="roman">VIII</span></p>
45+
<p class="sub center uppercase">Les Derniers Jedi</p>
46+
<br>
47+
<p>Le PREMIER ORDRE règne. Après avoir détruit la République, le Suprême Leader Snoke lance maintenant son armée impitoyable contre les derniers espoirs de la galaxie.</p>
48+
<br>
49+
<p>Seule la Générale Leia Organa résiste encore avec les quelques forces de la RÉSISTANCE. Elle envoie en désespoir de cause un appel au secours dans toute la galaxie.</p>
50+
<br>
51+
<p>Pendant ce temps, Rey a retrouvé la légende Luke Skywalker, seul espoir des Jedi. Elle doit le convaincre de sortir de son exil pour sauver la galaxie…</p>
52+
</div>
53+
</div>
54+
55+
<audio id="intro-audio">
56+
<source src="/assets/sounds/intro.mp3" type="audio/mpeg">
57+
</audio>
58+
59+
<!-- End screen buttons -->
60+
<div id="end-buttons" class="end-buttons">
61+
<button id="home-button" class="end-btn">
62+
<span class="btn-text">Accueil</span>
63+
</button>
64+
<button id="replay-button" class="end-btn">
65+
<span class="btn-text">Rejouer</span>
66+
</button>
67+
</div>
68+
</div>
69+
70+
<script type="module" src="/src/scripts/episode.js"></script>
71+
</body>
72+
</html>

‎episode9.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="fr">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<!-- SEO Meta Tags -->
8+
<title>Star Wars Episode IX : L'Ascension de Skywalker - Intro CSS3</title>
9+
<meta name="description" content="Revivez l'introduction épique de Star Wars Episode IX : L'Ascension de Skywalker avec cette animation CSS3 fidèle à l'original.">
10+
<meta name="keywords" content="Star Wars, Episode 9, L'Ascension de Skywalker, CSS3, animation intro">
11+
12+
<!-- Open Graph -->
13+
<meta property="og:title" content="Star Wars Episode IX : L'Ascension de Skywalker - Intro CSS3">
14+
<meta property="og:description" content="Revivez l'introduction épique de Star Wars Episode IX avec cette animation CSS3.">
15+
<meta property="og:image" content="https://firestar300.github.io/starwars-intro-css3/img/the-rise-of-skywalker-artwork.png">
16+
17+
<!-- Favicon -->
18+
<link rel="icon" type="image/png" href="/img/favicon.png">
19+
20+
<link rel="stylesheet" href="/src/styles/episode-animation.css">
21+
</head>
22+
<body>
23+
<!-- Start Screen -->
24+
<div id="start-screen">
25+
<div class="start-content">
26+
<h1 class="episode-title">Episode <span class="roman">IX</span></h1>
27+
<h2 class="episode-subtitle uppercase">L'Ascension de Skywalker</h2>
28+
<button id="start-button" class="start-btn">
29+
<span class="btn-text">Commencer</span>
30+
<span class="btn-icon">▶</span>
31+
</button>
32+
<p class="start-hint">Cliquez pour lancer l'intro avec le son</p>
33+
</div>
34+
</div>
35+
36+
<!-- Animation Content (hidden initially) -->
37+
<div id="animation-content" style="display: none;">
38+
<p id="start">Il y a bien longtemps, dans une galaxie lointaine, très lointaine....</p>
39+
40+
<img src="/assets/img/starwars-logo.svg" alt="Star Wars" class="logo">
41+
42+
<div id="titles">
43+
<div id="titlecontent">
44+
<p class="title center">Episode <span class="roman">IX</span></p>
45+
<p class="sub center uppercase">L'Ascension de Skywalker</p>
46+
<br>
47+
<p>L'Empereur est de retour ! Son terrifiant message a résonné dans toute la galaxie. Le PREMIER ORDRE, sous les ordres de Kylo Ren, cherche à retrouver l'Empereur pour rejoindre ses forces.</p>
48+
<br>
49+
<p>La RÉSISTANCE, menée par la Générale Leia Organa, se lance dans une course contre la montre pour localiser l'Empereur avant qu'il ne soit trop tard.</p>
50+
<br>
51+
<p>Rey s'entraîne sous la tutelle de Leia pour devenir un Jedi. Elle doit affronter son destin et faire face à la vérité sur ses origines pour sauver la galaxie d'une destruction certaine…</p>
52+
</div>
53+
</div>
54+
55+
<audio id="intro-audio">
56+
<source src="/assets/sounds/intro.mp3" type="audio/mpeg">
57+
</audio>
58+
59+
<!-- End screen buttons -->
60+
<div id="end-buttons" class="end-buttons">
61+
<button id="home-button" class="end-btn">
62+
<span class="btn-text">Accueil</span>
63+
</button>
64+
<button id="replay-button" class="end-btn">
65+
<span class="btn-text">Rejouer</span>
66+
</button>
67+
</div>
68+
</div>
69+
70+
<script type="module" src="/src/scripts/episode.js"></script>
71+
</body>
72+
</html>

‎index.html‎

Lines changed: 41 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66

77
<!-- SEO Meta Tags -->
8-
<title>Star Wars - Textes d'introduction en CSS3 | Les 6 épisodes</title>
9-
<meta name="description" content="Découvrez les textes d'introduction emblématiques des 6 épisodes Star Wars recréés en CSS3 avec animations 3D. Une expérience immersive de la saga culte.">
8+
<title>Star Wars - Textes d'introduction en CSS3 | Les 9 épisodes</title>
9+
<meta name="description" content="Découvrez les textes d'introduction emblématiques des 9 épisodes Star Wars recréés en CSS3 avec animations 3D. Une expérience immersive de la saga culte.">
1010
<meta name="keywords" content="Star Wars, CSS3, animation, intro, texte défilant, épisodes, saga, 3D">
1111
<meta name="author" content="Star Wars CSS3">
1212
<meta name="theme-color" content="#000000">
@@ -119,6 +119,45 @@ <h3 class="episode-title">Le Retour du Jedi</h3>
119119
</div>
120120
</div>
121121

122+
<!-- Episode VII -->
123+
<div class="swiper-slide" data-bg="/img/the-force-awakens-artowork.png">
124+
<div class="slide-bg slide-bg-ep7"></div>
125+
<div class="slide-content">
126+
<img src="/img/the-force-awakens-artowork.png" alt="Episode VII" class="slide-image">
127+
<div class="slide-caption">
128+
<h2 class="episode-number">Episode VII</h2>
129+
<h3 class="episode-title">Le Réveil de la Force</h3>
130+
<a href="./episode7.html" class="cta-button">Voir l'intro</a>
131+
</div>
132+
</div>
133+
</div>
134+
135+
<!-- Episode VIII -->
136+
<div class="swiper-slide" data-bg="/img/the-last-jedi-artwork.png">
137+
<div class="slide-bg slide-bg-ep8"></div>
138+
<div class="slide-content">
139+
<img src="/img/the-last-jedi-artwork.png" alt="Episode VIII" class="slide-image">
140+
<div class="slide-caption">
141+
<h2 class="episode-number">Episode VIII</h2>
142+
<h3 class="episode-title">Les Derniers Jedi</h3>
143+
<a href="./episode8.html" class="cta-button">Voir l'intro</a>
144+
</div>
145+
</div>
146+
</div>
147+
148+
<!-- Episode IX -->
149+
<div class="swiper-slide" data-bg="/img/the-rise-of-skywalker-artwork.png">
150+
<div class="slide-bg slide-bg-ep9"></div>
151+
<div class="slide-content">
152+
<img src="/img/the-rise-of-skywalker-artwork.png" alt="Episode IX" class="slide-image">
153+
<div class="slide-caption">
154+
<h2 class="episode-number">Episode IX</h2>
155+
<h3 class="episode-title">L'Ascension de Skywalker</h3>
156+
<a href="./episode9.html" class="cta-button">Voir l'intro</a>
157+
</div>
158+
</div>
159+
</div>
160+
122161
</div>
123162

124163
<!-- Navigation -->

‎public/assets/sounds/episode1.mp3‎

3.73 MB
Binary file not shown.

‎public/assets/sounds/episode2.mp3‎

2.52 MB
Binary file not shown.

‎public/assets/sounds/episode2bis.mp3‎

1.09 MB
Binary file not shown.

‎public/assets/sounds/episode3.mp3‎

3.79 MB
Binary file not shown.

‎public/assets/sounds/episode4.mp3‎

3.85 MB
Binary file not shown.

‎public/assets/sounds/episode5.mp3‎

3.22 MB
Binary file not shown.

0 commit comments

Comments
 (0)