reparer missions

.gitignore

@@ -508,3 +508,33 @@ $RECYCLE.BIN/
 
 www/medias/mediasCredits/warframeDuviriRide.mp4
 www/medias/mediasHistoireDE/warframeRailjackRide.mp4
+www/multimedia/mediasCredits/warframeDuviriRide.mp4
+www/multimedia/mediasHistoireDE/warframeRailjackRide.mp4
+COMPRESS/warframeRailjackRide.mp4
+COMPRESS/Ember.mp4
+COMPRESS/Equinox.mp4
+COMPRESS/Frost.mp4
+COMPRESS/Koumei.mp4
+COMPRESS/Rhino.mp4
+COMPRESS/Sevagoth.mp4
+COMPRESS/Voruna.mp4
+COMPRESS/warframeDuviriRide.mp4
+www/multimediaHQ/we_All_Lift_Together_mPTCq3LiZSE.mp3
+www/multimediaHQ/mediasAndres/Ember.mp4
+www/multimediaHQ/mediasAndres/EmberVid.webm
+www/multimediaHQ/mediasAndres/Equinox.mp4
+www/multimediaHQ/mediasAndres/equinox.webm
+www/multimediaHQ/mediasAndres/Frost.mp4
+www/multimediaHQ/mediasAndres/FrostVid.webm
+www/multimediaHQ/mediasAndres/Koumei.mp4
+www/multimediaHQ/mediasAndres/KoumeiVid.webm
+www/multimediaHQ/mediasAndres/nokko.webm
+www/multimediaHQ/mediasAndres/Rhino.mp4
+www/multimediaHQ/mediasAndres/RhinoVid.webm
+www/multimediaHQ/mediasAndres/Sevagoth.mp4
+www/multimediaHQ/mediasAndres/SevagothVid.webm
+www/multimediaHQ/mediasAndres/Voruna.mp4
+www/multimediaHQ/mediasAndres/VorunaVid.webm
+www/multimediaHQ/mediasCredits/warframeDuviriRide.mp4
+www/multimediaHQ/mediasHistoireDE/warframeRailjackRide.mp4
+www/multimediaHQ/mediasLea/warframeIntro.mp4

.vscode/extensions.json

@@ -25,6 +25,8 @@
         "nhoizey.gremlins",
         "s2junn.image-essentials",
         "shardulm94.trailing-spaces",
-        "esbenp.prettier-vscode"
+        "esbenp.prettier-vscode",
+        "wassim-k.rename-replace-extension",
+        "karenpommeroy.batch-rename"
     ]
 }

README.md

@@ -4,11 +4,9 @@
 
 ## TODO Lists
 
-- [ ] 💣💥💥Corriger bouton du nav (note perso Jeremy) 💥💥💣
-
 - [x] Planification du travail connecté - Par Stan
 - [x] Coder le menu de navigation commun a toutes les pages - Jeremy
-- [ ] Coder le pied de page commun a toutes les pages - Jeremy
+- [x] Coder le pied de page commun a toutes les pages - Jeremy
 - [x] Création d’un favicon.ico pour le site - Jeremy
 - [ ] Glitch images LOGO - Stanislas
 - [ ] Formulaires dans aPropos.html - Stanislas
@@ -19,8 +17,8 @@
 
   - [ ] Rédaction du texte pour la page « Accueil » - Léa
   - [ ] Rédaction du texte pour la page « à Propos » **ET FORMULAIRE** - Stanislas
-  - [ ] Rédaction du texte pour la page « L’équipe » - Jérémy et Andres>
+  - [x] Rédaction du texte pour la page « L’équipe » - Jérémy
-  - [ ] Rédaction du texte pour la page « Histoire de DE » - Jérémy
+  - [x] Rédaction du texte pour la page « Histoire de DE » - Jérémy
   - [ ] Rédaction du texte pour la page « Univers Sci-fi » - // Avancement de 70% Léa
   - [ ] Rédaction du texte pour la page « Missions » - Stanislas
   - [ ] Rédaction du texte pour la page « Armures » - Andres
@@ -29,7 +27,8 @@
   - [ ] Andres
   - [ ] Lea
   - [ ] Stan
-  - [ ] Jeremy
+  - [x] Jeremy
+  - [ ]
 
  <header> – Un entête incluant :
 ▪ Un logo conçu par vous
@@ -50,27 +49,44 @@ o <main> – Le contenu principal de la page
 
 - [ ] Verifier Structure respectent ENONCÉ
 
-  - [ ] Vous devez ajouter un favicon (faites une recherche sur Internet pour savoir ce que c’est)
+  - [x] Vous devez ajouter un favicon (faites une recherche sur Internet pour savoir ce que c’est)
   - [ ] balise `<header>`
     - [x] Logo
     - [ ] Une bannière conçue par vous (vous n’êtes pas obligés de garder la même sur toutes vos pages)
-    - [ ] Le titre principal de la page Web (vous n’êtes pas obligés de garder le même sur toutes vos pages)
+    - [x] Le titre principal de la page Web (vous n’êtes pas obligés de garder le même sur toutes vos pages)
-  - [ ] balise `<nav>`
+  - [x] balise `<nav>`
     - [x] Un bouton pour chaque page du site Web (sous la forme d’une liste `<ul>`) avec des effets de CSS
-    - [ ] Trouvez une façon d’indiquer sur quelle page se trouve actuellement le visiteur. Ou l’implantation d’un fil d’Ariane.
+    - [x] Trouvez une façon d’indiquer sur quelle page se trouve actuellement le visiteur. Ou l’implantation d’un fil d’Ariane.
-  - [ ] balise `<footer>`
+  - [x] balise `<footer>`
-    - [ ] copyright
+    - [x] copyright
-    - [ ] Le nom de l’équipe et le membre de l’équipe responsable de la création de la page concernée
+    - [x] Le nom de l’équipe et le membre de l’équipe responsable de la création de la page concernée
-    - [ ] La date de conception
+    - [x] La date de conception
-  - [ ] balise `<main>`
+  - [x] balise `<main>`
     - [ ] class dans balise `<body>`
-  - [ ] Inclure les references pour chaques fichier multimedia
+  - [x] Inclure les references pour chaques fichier multimedia
+  - [ ] Au moins un lien de téléchargement
+  - [ ] Un tableau
+    - [x] • La dimension du tableau doit être au moins de 4 colonnes et 4 lignes.
+    - [x] • Il doit y avoir de la fusion à l’intérieur du tableau.
+    - [x] • Les bordures doivent être faites par CSS.
+  - [ ] Des listes
+    - [x] • Au moins une liste à puce contenant au moins 3 éléments.
+    - [ ] • Au moins une liste numérotée contenant au moins 3 éléments.
+    - [ ] • Au moins une d’entre elle doit être une liste imbriquée d’au moins 2 éléments supplémentaires.
+  - [ ] Du contenu multimédia
+    - [ ] • Au moins un fichier audio
+    - [x] • Au moins deux fichiers vidéo
+    - [ ] • Au moins de cinq images différentes (excluant les photos des membres de l’équipe, le logo et la
+          bannière)
+  - [x] Aucun texte bidon de type Lorem Ipsum ne sera accepté dans le site Web.
+  - [ ]
 
   ```md
   . Vous pouvez les ajouter sur une page différente ou sur chaque page contenant les éléments concernés.
   ```
 
-- [ ] Tester les sites avec trois navigateurs (Brave, Firefox, Chrome)
+- [ ] Tester le site avec trois navigateurs (Brave, Firefox, Chrome)
+- [ ] Tester le site avec Safari (Si possible)
 
 - [ ] 💣💥💥Revérifier les sources pour les images et vidéo (Identifier) 💥💥💣
 
@@ -85,7 +101,7 @@ o <main> – Le contenu principal de la page
 
 ### En dernier, si on a le temps
 
-- [ ] Revérifier le footer
+- [x] Revérifier le footer
 
   ```note
 

www/aPropos.html

@@ -1,22 +1,29 @@
+<!-- /**********************************************************/
+/* Fichier : aPropos.html */
+/* Titre : À propos */
+/* Auteur : © Stanislas Royal, Cégep de Sherbrooke */
+/*************************************************************-->
+
 <!DOCTYPE html>
 <html lang="fr">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="images/F4vicon.ico">
+    <link rel="icon" href="images/f4vicon.ico">
     <link rel="stylesheet" href="css/style.css">
     <title>À propos</title>
     <script src="js/script.js"></script>
 </head>
 
-<body>
+<body class="aProposBG">
     <nav>
-        <a href="index.html" class="boutonAccueil"><img src="images/LogoALT-F4_Nav.svg" alt="ALT-F4"></a>
+        <a href="index.html" class="boutonAccueil"><img src="images/logoALT-F4_Nav.svg" alt="ALT-F4"
+                id="logoAccueil"></a>
 
         <ul>
-            <li><a href="aPropos.html">À propos</a></li>
+            <li><a href="aPropos.html" class="active">À propos</a></li>
-            <li><a href="team.html">L'équipe</a></li>
+            <li><a href="team.html">L’équipe</a></li>
             <li><a href="histoire.html">Histoire de DE</a></li>
             <li><a href="lore.html">Univers Sci-fi</a></li>
             <li><a href="missions.html">Missions</a></li>
@@ -25,23 +32,22 @@
     </nav>
 
     <main class="aPropos">
-        <p id="message">Coming soon...</p>
+        <h1>Contactez l’équipe!</h1>
         <div class="sidebyside">
-            <div>
+            <section class="commentaire">
                 <!-- utilisation de get pour avoir les variables dans l'url : page statique -->
                 <!-- si utilisation de serveur dynamique, changer pour POST -->
                 <form method="get" action="reponse.html">
-                    <fieldset>
+                    <h2>Commentaire</h2>
+                    <fieldset id="infoContact">
                         <legend>Informations de contact</legend>
                         <div>
-                            <label for="nomComplet">Votre nom complet :</label>
+                            <label for="nomComplet">Votre nom complet :</label>
-                            <input id="nomComplet" name="nomComplet" type="text" required minlength="3"
+                            <input id="nomComplet" name="nomComplet" type="text" required minlength="3" placeholder="Prénom Nom">
-                                placeholder="Prénom Nom">
                         </div>
                         <div>
-                            <label for="email">Votre adresse courriel : </label>
+                            <label for="email">Votre adresse courriel : </label>
-                            <input id="email" name="email" type="email" required
+                            <input id="email" name="email" type="email" required placeholder="(ex. vous@fournisseur.com)" size="30">
-                                placeholder="(ex. vous@fournisseur.com)" size="30">
                         </div>
                     </fieldset>
                     <fieldset>
@@ -61,53 +67,60 @@
                                     </div>
                                 </div>
                                 <div>
-                                    <label for="pagePrefs" class="formInfo">Page préféré :</label>
+                                    <label for="pagePrefs" class="formInfo">Page préférée :</label>
                                     <div>
                                         <select name="page" id="pagePrefs">
-                                            <option value="accueil" selected>Page d'accueil</option>
+                                            <option value="index" selected>Page d'accueil</option>
                                             <option value="aPropos">À Propos</option>
+                                            <option value="team">L'équipe</option>
                                             <option value="reponse" disabled>Réponse</option>
                                             <option value="histoire">Histoire de DE</option>
                                             <optgroup label="Univers Sci-fi">
-                                                <option value="sousPageLore1">Arc 1 : Éveil</option>
+                                                <option value="sousPageLore1">Arc 1 : Éveil</option>
-                                                <option value="sousPageLore2">Arc 2: Saga de la guerre intérieure
+                                                <option value="sousPageLore2">Arc 2 : Saga de la guerre intérieure
+                                                </option>
+                                                <option value="sousPageLore3">Arc 3 : Saga de la nouvelle Guerre
+                                                </option>
+                                                <option value="sousPageLore4">Arc 4 : Saga de la guerre du Néant
                                                 </option>
-                                                <option value="sousPageLore3">Arc 3: Saga de la nouvelle Guerre</option>
-                                                <option value="sousPageLore4">Arc 4: Saga de la guerre du Néant</option>
 
                                             </optgroup>
                                             <option value="missions">Missions</option>
                                             <option value="armures">Armures</option>
+                                            <option value="credits">Crédits</option>
                                         </select>
                                     </div>
                                 </div>
                             </div>
                             <div>
-                                <label>Quel personnage voudriez-vous essayer : </label>
+                                <label>Quel personnage voudriez-vous essayer : </label>
                                 <div class="sidebyside">
-                                    <!-- test clickable region -->
                                     <label class="clickLabel" for="persoOne">
                                         <input type="checkbox" id="persoOne" name="persoOne" value="1">
                                         Ember</label>
+                                    <label for="persoTwo">
+                                        <input type="checkbox" id="persoTwo" name="persoTwo" value="1">
+                                        Equinox</label>
 
-                                    <input type="checkbox" id="persoTwo" name="persoTwo" value="1">
+                                    <label for="persoThree">
-                                    <label for="persoTwo">Equinox</label>
+                                        <input type="checkbox" id="persoThree" name="persoThree" value="1">
+                                        Frost</label>
+
+                                    <label for="persoFour">
+                                        <input type="checkbox" id="persoFour" name="persoFour" value="1">
+                                        Koumei</label>
+
+                                    <label for="persoFive">
+                                        <input type="checkbox" id="persoFive" name="persoFive" value="1">
+                                        Rhino</label>
 
 
-                                    <input type="checkbox" id="persoThree" name="persoThree" value="1">
+                                    <label for="persoSix">
-                                    <label for="persoThree">Frost</label>
+                                        <input type="checkbox" id="persoSix" name="persoSix" value="1">
-
+                                        Sevagoth</label>
-
+                                    <label for="persoSeven">
-                                    <input type="checkbox" id="persoFour" name="persoFour" value="1">
+                                        <input type="checkbox" id="persoSeven" name="persoSeven" value="1">
-                                    <label for="persoFour">Koumei</label>
+                                        Voruna</label>
-
-
-                                    <input type="checkbox" id="persoFive" name="persoFive" value="1">
-                                    <label for="persoFive">Rhino</label>
-                                    <input type="checkbox" id="persoSix" name="persoSix" value="1">
-                                    <label for="persoSix">Sevagoth</label>
-                                    <input type="checkbox" id="persoSeven" name="persoSeven" value="1">
-                                    <label for="persoSeven">Voruna</label>
                                 </div>
                             </div>
                             <div>
@@ -117,8 +130,7 @@
                         </div>
                     </fieldset>
                     <fieldset>
-                        <legend>Votre appreciations</legend>
+                        <legend>Votre appréciation</legend>
-                        <!-- TODO : for="niveau" -->
                         <textarea name="zoneComment" rows="10" cols="80"
                             placeholder="Quelque chose à ajouter?"></textarea>
                     </fieldset>
@@ -127,74 +139,39 @@
                         <button type="reset">Réinitialiser</button>
                     </div>
                 </form>
-            </div>
+            </section>
-            <div>
 
-                <div>
+            <section class="coordonnees">
-                    <h1>Contactez l'équipe!</h1>
+                <div id="contactInfo">
                     <div>
-                        <div>
+                        <h2>Coordonnées</h2>
-                            <h2>Coordonnées</h2>
+                        <div class="grille">
-                            <div>
+                            <p id="titreAdresse">Adresse :</p>
-                                <p>Adresse : 475 Rue du Cégep, Sherbrooke, QC J1E 4K1</p>
+                            <a id="contenuAdresse" target="_blank" href="https://www.google.com/maps/dir//C%C3%A9gep+De+Sherbrooke+475+Rue+du+C%C3%A9gep+Sherbrooke,+Quebec+J1E+4K1/@45.4111141,-71.8863288,16z/data=!4m8!4m7!1m0!1m5!1m1!1s0x4cb7b3a7a1058a9f:0xac83ae2c6ba0672c!2m2!1d-71.8863288!2d45.4111141?entry=ttu&g_ep=EgoyMDI1MTEyMy4xIKXMDSoASAFQAw%3D%3D"> 475 rue du Cégep, Sherbrooke, QC J1E 4K1</a>
-                                <p>Pour plus d'information sur les créateurs : <a target="_blank"
-                                        href="https://www.cegepsherbrooke.qc.ca/">Cégep de Sherbrooke</a></p>
-                                <p>Téléphone : +18195646350</p>
-                            </div>
-                        </div>
 
-                        <div>
+                            <p id="titreInfo">Pour plus d’information sur les créateurs :</p>
-                            <div>
+                            <a id="contenuInfo" target="_blank" href="https://www.cegepsherbrooke.qc.ca/">Cégep de Sherbrooke</a>
-                                Contact
+
-                            </div>
+                            <p id="titreTelephone">Téléphone :</p>
-                            <div class="conteneurMaps">
+                            <a id="contenuTelephone" href="tel:+18195646350">+1 (819) 564-6350</a>
-                                <iframe title="Maps pour cegep"
+
-                                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2800.9120010040356!2d-71.88890908663183!3d45.41111407095251!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cb7b3a7a1058a9f%3A0xac83ae2c6ba0672c!2sC%C3%A9gep%20De%20Sherbrooke!5e0!3m2!1sen!2sca!4v1764356213744!5m2!1sen!2sca"
+                            <p id="titreCourriel">Courriel :</p>
-                                    width="600" height="450" allowfullscreen="" loading="lazy"
+                            <a id="contenuCourriel" target="_blank" href="mailto:empty@zkd.ca">Équipe Les Alt-F4</a>
-                                    referrerpolicy="no-referrer-when-downgrade"></iframe>
+                        </div>
-                            </div>
+                        <div class="conteneurMaps">
+                            <iframe id="mapsFrame" title="Maps pour cégep" src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d5601.823999127039!2d-71.8863288!3d45.4111141!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sca!4v1764819112867!5m2!1sfr!2sca" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                         </div>
                     </div>
                 </div>
-                <!--
+            </section>
-
-Contenu minimal de la page de contact de votre site Web :
-• <main> – Le contenu principal de la page
-o Des informations de contact sous forme de :
-▪ Des coordonnées (adresse civique, adresse courriel, etc.) (peuvent être fictives)
-▪ Une carte interactive (Google maps, etc.)
-
-
-475 Rue du Cégep, Sherbrooke, QC J1E 4K1
-https://www.cegepsherbrooke.qc.ca/
-+18195646350
-
-
-
-o Un formulaire de type « contactez-nous » :
-▪ Deux zones de texte monolignes
-▪ Une zone de texte multilignes
-▪ Une liste déroulante
-▪ Des choix sous forme de cases à cocher
-▪ Des choix sous forme de boutons radio
-▪ Un bouton de réinitialisation du formulaire
-▪ Un bouton d’envoi du formulaire
-o Lors de son envoi, le formulaire doit faire afficher une nouvelle page contenant un message de remerciement
-pour avoir complété le formulaire (ex : reponse.html). Cette page devra être créé en plus des autres pages
-demandées.
-
--->
-            </div>
         </div>
     </main>
 
     <footer>
-        <p>
+        <p>Copyright © 2025 Les Alt-F4. Tous droits réservés.</p>
-            © Stanislas Royal. Tout droits réservés. <br>
+        <p>Page créée par Stanislas Royal.</p>
-            Novembre 2025 <br>
+        <a href="credits.html">Crédits</a>
-            Page créée par Les Alt-F4
+
-        </p>
-        <p id="updateDate">DATE_WEBSITE</p>
     </footer>
 </body>
 

www/armures.html

@@ -1,32 +1,39 @@
+<!-- /**********************************************************/
+/* Fichier : armures.html */
+/* Titre : Armures */
+/* Auteur : © Andres David Herrera Escorcia, Cégep de Sherbrooke */
+/*************************************************************-->
+
 <!DOCTYPE html>
 <html lang="fr">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="images/F4vicon.ico">
+    <link rel="icon" href="images/f4vicon.ico">
     <link rel="stylesheet" href="css/style.css">
     <script src="js/script.js"></script>
-    <title>Warframes</title>
+    <title>Armures</title>
 </head>
 
 <body>
     <nav>
-        <a href="index.html" class="boutonAccueil"><img src="images/LogoALT-F4_Nav.svg" alt="ALT-F4"></a>
+        <a href="index.html" class="boutonAccueil"><img src="images/logoALT-F4_Nav.svg" alt="ALT-F4"
+                id="logoAccueil"></a>
 
         <ul>
             <li><a href="aPropos.html">À propos</a></li>
-            <li><a href="team.html">L'équipe</a></li>
+            <li><a href="team.html">L’équipe</a></li>
             <li><a href="histoire.html">Histoire de DE</a></li>
             <li><a href="lore.html">Univers Sci-fi</a></li>
             <li><a href="missions.html">Missions</a></li>
-            <li><a href="armures.html">Armures</a></li>
+            <li><a href="armures.html" class="active">Armures</a></li>
         </ul>
     </nav>
 
     <main class="armures">
         <header class="video-header">
-            <video id="entete" src="./medias/mediasAndres/nokko.webm" autoplay muted loop></video>
+            <video id="entete" src="multimedia/mediasAndres/nokko.webm" autoplay muted loop></video>
             <h1 id="title">Armures</h1>
 
             <nav class="wf-nav">
@@ -44,7 +51,7 @@
 
         <section class="descarmure">
             <div class="armtxt">
-                <h2>Que sont les armures(Warframes) ?</h2>
+                <h2>Que sont les armures (Warframes)?</h2>
                 <p>Les Warframes sont des armes vivantes, des armures de combat biomécaniques façonnées pour incarner la
                     volonté des Tennos. Mi-technologie, mi-créature, chacune d’elles canalise l’énergie du Néant pour
                     déchaîner des pouvoirs dévastateurs et accomplir des prouesses physiques impossibles. Nées des
@@ -52,7 +59,7 @@
                     ou
                     de l’essence du Tenno qui les contrôle.
 
-                    Plus que de simples armures, elles sont des extensions de l’âme du Tenno : rapides, agiles,
+                    Plus que de simples armures, elles sont des extensions de l’âme du Tenno : rapides, agiles,
                     destructrices, ou protectrices. Chaque Warframe possède son propre style de combat, ses capacités
                     uniques et son histoire profondément liée aux cicatrices du passé. Ensemble, Tenno et Warframe
                     forment
@@ -63,13 +70,15 @@
         <section id="Ember" class="perso">
 
             <video class="bg-video" autoplay muted loop playsinline>
-                <source src="./medias/mediasAndres/EmberVid.webm" type="video/webm">
+                <source src="multimedia/mediasAndres/emberVid.webm" type="video/webm">
             </video>
 
+            <div class="bg-overlay"></div>
+
             <div class="content">
                 <h2>Ember</h2>
                 <p>
-                    Des étoiles flamboyantes embrasent nos mondes. Aussi ardente que le soleil, la rage d'Ember consume
+                    Des étoiles flamboyantes embrasent nos mondes. Aussi ardente que le soleil, la rage d’Ember consume
                     ses
                     ennemis et disperse leurs cendres dans
                     le vent solaire. Impératrice des flammes élémentaires, embrase la terre de ses feux sauvages.
@@ -84,11 +93,11 @@
 
                 <div class="habilites-row">
                     <div class="habilites">
-                        <img src="./images/ImagesAndres/Ember/habEmber.PNG" alt="hh">
+                        <img src="./images/imagesAndres/Ember/habEmber.PNG" alt="hh">
                     </div>
 
                     <div class="habilites-video">
-                        <video src="./medias/mediasAndres/Ember.mp4" autoplay muted loop playsinline></video>
+                        <video src="multimedia/mediasAndres/ember.mp4" autoplay muted loop playsinline></video>
                     </div>
                 </div>
             </div>
@@ -97,17 +106,19 @@
         <section id="Equinox" class="perso">
 
             <video class="bg-video" autoplay muted loop playsinline>
-                <source src="./medias/mediasAndres/equinox.webm" type="video/webm">
+                <source src="multimedia/mediasAndres/equinox.webm" type="video/webm">
             </video>
 
+            <div class="bg-overlay"></div>
+
             <div class="content">
                 <h2>Equinox</h2>
                 <p>
-                    Incarnation de forces opposées en une seule entité, Equinox déchaîne sa colère comme l'aube
+                    Incarnation de forces opposées en une seule entité, Equinox déchaîne sa colère comme l’aube
                     naissante,
                     ou marque la fin de la vie comme le crépuscule.
                     Alternant entre deux formes, elle peut renforcer les Tenno dans la lumière ou leur offrir un répit
-                    réparateur dans l'obscurité. <a href="https://www.warframe.com/" target="_blank">Site officiel de
+                    réparateur dans l’obscurité. <a href="https://www.warframe.com/" target="_blank">Site officiel de
                         Warframe</a>
                 </p>
                 <br>
@@ -116,10 +127,10 @@
 
                 <div class="habilites-row">
                     <div class="habilites">
-                        <img src="./images/ImagesAndres/Equinox/equinoxHab.PNG" alt="hh">
+                        <img src="./images/imagesAndres/Equinox/equinoxHab.PNG" alt="hh">
                     </div>
                     <div class="habilites-video">
-                        <video src="./medias/mediasAndres/Equinox.mp4" autoplay muted loop playsinline></video>
+                        <video src="multimedia/mediasAndres/equinox.mp4" autoplay muted loop playsinline></video>
                     </div>
                 </div>
             </div>
@@ -128,13 +139,15 @@
         <section id="Frost" class="perso">
 
             <video class="bg-video" autoplay muted loop playsinline>
-                <source src="./medias/mediasAndres/FrostVid.webm" type="video/webm">
+                <source src="multimedia/mediasAndres/frostVid.webm" type="video/webm">
             </video>
 
+            <div class="bg-overlay"></div>
+
             <div class="content">
                 <h2>Frost</h2>
                 <p>
-                    Frost est un Warframe lent et lourdement blindé, capable d'utiliser ses compétences offensives et
+                    Frost est un Warframe lent et lourdement blindé, capable d’utiliser ses compétences offensives et
                     défensives à son avantage et à celui de
                     son équipe. Il déchaîne de furieux blizzards qui terrassent et gèlent ses ennemis, tout en offrant
                     répit
@@ -147,10 +160,10 @@
 
                 <div class="habilites-row">
                     <div class="habilites">
-                        <img src="./images/ImagesAndres/Frost/frostHab.PNG" alt="hh">
+                        <img src="./images/imagesAndres/Frost/frostHab.PNG" alt="hh">
                     </div>
                     <div class="habilites-video">
-                        <video src="./medias/mediasAndres/Frost.mp4" autoplay muted loop playsinline></video>
+                        <video src="multimedia/mediasAndres/frost.mp4" autoplay muted loop playsinline></video>
                     </div>
                 </div>
             </div>
@@ -159,17 +172,19 @@
         <section id="Koumei" class="perso">
 
             <video class="bg-video" autoplay muted loop playsinline>
-                <source src="./medias/mediasAndres/KoumeiVid.webm" type="video/webm">
+                <source src="multimedia/mediasAndres/koumeiVid.webm" type="video/webm">
             </video>
 
+            <div class="bg-overlay"></div>
+
             <div class="content">
                 <h2>Koumei</h2>
                 <p>
-                    Tisse les fils du destin, à la fois couturière, prophétesse et marionnette. Ose miser sur l'avenir
+                    Tisse les fils du destin, à la fois couturière, prophétesse et marionnette. Ose miser sur l’avenir
-                    d'Origin, prends des risques,
+                    d’Origin, prends des risques,
                     laisse la chance te guider. Défie le destin, recommence et échappe à sa spirale indemne, comme la
                     Vierge aux Dés, Koumei.
-                    Protège-toi par des charmes providentiels, puis répands le malheur sur tes ennemis, afin qu'eux
+                    Protège-toi par des charmes providentiels, puis répands le malheur sur tes ennemis, afin qu’eux
                     aussi soient suspendus aux ficelles des
                     Tenno. <a href="https://www.warframe.com/" target="_blank">Site officiel de Warframe</a>
                 </p>
@@ -179,10 +194,10 @@
 
                 <div class="habilites-row">
                     <div class="habilites">
-                        <img src="./images/ImagesAndres/Koumei/koumeiHab.PNG" alt="hh">
+                        <img src="./images/imagesAndres/Koumei/koumeiHab.PNG" alt="hh">
                     </div>
                     <div class="habilites-video">
-                        <video src="./medias/mediasAndres/Koumei.mp4" autoplay muted loop playsinline></video>
+                        <video src="multimedia/mediasAndres/koumei.mp4" autoplay muted loop playsinline></video>
                     </div>
                 </div>
             </div>
@@ -191,15 +206,17 @@
         <section id="Rhino" class="perso">
 
             <video class="bg-video" autoplay muted loop playsinline>
-                <source src="./medias/mediasAndres/RhinoVid.webm" type="video/webm">
+                <source src="multimedia/mediasAndres/rhinoVid.webm" type="video/webm">
             </video>
 
+            <div class="bg-overlay"></div>
+
             <div class="content">
                 <h2>Rhino</h2>
                 <p>Rhino est un Warframe lourdement blindé, doté de la force et de la robustesse de son homonyme
                     intrépide et impétueux. Privilégiant la
-                    puissance à la vitesse, Rhino est conçu pour jouer le rôle de tank au sein d'une cellule. Capable de
+                    puissance à la vitesse, Rhino est conçu pour jouer le rôle de tank au sein d’une cellule. Capable de
-                    foncer dans la mêlée, d'attirer
+                    foncer dans la mêlée, d’attirer
                     les tirs ennemis et de plier le champ de bataille à sa volonté par la seule force brute, il est
                     capable de tout contrôler. <a href="https://www.warframe.com/" target="_blank">Site officiel de
                         Warframe</a>
@@ -210,10 +227,10 @@
 
                 <div class="habilites-row">
                     <div class="habilites">
-                        <img src="./images/ImagesAndres/Rhino/rhinoHab.PNG" alt="hh">
+                        <img src="./images/imagesAndres/Rhino/rhinoHab.PNG" alt="hh">
                     </div>
                     <div class="habilites-video">
-                        <video src="./medias/mediasAndres/Rhino.mp4" autoplay muted loop playsinline></video>
+                        <video src="multimedia/mediasAndres/rhino.mp4" autoplay muted loop playsinline></video>
                     </div>
                 </div>
             </div>
@@ -222,15 +239,17 @@
         <section id="Sevagoth" class="perso">
 
             <video class="bg-video" autoplay muted loop playsinline>
-                <source src="./medias/mediasAndres/SevagothVid.webm" type="video/webm">
+                <source src="multimedia/mediasAndres/sevagothVid.webm" type="video/webm">
             </video>
 
+            <div class="bg-overlay"></div>
+
             <div class="content">
                 <h2>Sevagoth</h2>
                 <p>
-                    Perdu dans un voyage à la dérive à travers le Vaste Intemporel, le sombre timonier Sevagoth
+                    Perdu dans un voyage à la dérive à travers le Vaste intemporel, le sombre timonier Sevagoth
-                    apprivoise l'inéluctable mortalité au milieu
+                    apprivoise l’inéluctable mortalité au milieu
-                    des tempêtes traîtresses du Néant. Il revient éternellement d'outre-tombe, tandis que son Ombre
+                    des tempêtes traîtresses du Néant. Il revient éternellement d’outre-tombe, tandis que son Ombre
                     éclipse la lumière et moissonne
                     les âmes damnées pour assouvir sa soif insatiable de ténèbres. <a href="https://www.warframe.com/"
                         target="_blank">Site officiel de Warframe</a>
@@ -241,10 +260,10 @@
 
                 <div class="habilites-row">
                     <div class="habilites">
-                        <img src="./images/ImagesAndres/Sevagoth/sevagothHab.PNG" alt="hh">
+                        <img src="./images/imagesAndres/Sevagoth/sevagothHab.PNG" alt="hh">
                     </div>
                     <div class="habilites-video">
-                        <video src="./medias/mediasAndres/Sevagoth.mp4" autoplay muted loop playsinline></video>
+                        <video src="multimedia/mediasAndres/sevagoth.mp4" autoplay muted loop playsinline></video>
                     </div>
                 </div>
             </div>
@@ -253,17 +272,19 @@
         <section id="Voruna" class="perso">
 
             <video class="bg-video" autoplay muted loop playsinline>
-                <source src="./medias/mediasAndres/VorunaVid.webm" type="video/webm">
+                <source src="multimedia/mediasAndres/vorunaVid.webm" type="video/webm">
             </video>
 
+            <div class="bg-overlay"></div>
+
             <div class="content">
                 <h2>Voruna</h2>
                 <p>
                     Faites attention au hurlement glacial qui annonce la reprise de la chasse primordiale. La nuit tombe
                     sur le sanctuaire sacré éclairé par la
                     lune, où rôdent des bêtes sacrées aux griffes et aux crocs acérés. Écoutez la reine des loups,
-                    Voruna, car c'est ici qu'elle décrète
+                    Voruna, car c’est ici qu’elle décrète
-                    son festin de minuit. Se délectant d'un carnage sauvage, ses fidèles loups, les silencieux Dynar,
+                    son festin de minuit. Se délectant d’un carnage sauvage, ses fidèles loups, les silencieux Dynar,
                     les chaotiques Raksh,
                     les voraces Lycath et les féroces Ulfrun, ravagent leurs proies une fois lâchées. Sous la lueur
                     lunaire, sur un sol écarlate,
@@ -276,10 +297,10 @@
 
                 <div class="habilites-row">
                     <div class="habilites">
-                        <img src="./images/ImagesAndres/Voruna/vorunaHab.PNG" alt="hh">
+                        <img src="./images/imagesAndres/Voruna/vorunaHab.PNG" alt="hh">
                     </div>
                     <div class="habilites-video">
-                        <video src="./medias/mediasAndres/Voruna.mp4" autoplay muted loop playsinline></video>
+                        <video src="multimedia/mediasAndres/voruna.mp4" autoplay muted loop playsinline></video>
                     </div>
                 </div>
             </div>
@@ -304,16 +325,60 @@
 
                     <tr>
                         <td>
-                            <img src="./images/ImagesAndres/Excalibur.PNG" alt="Excalibur">
+                            <img src="./images/imagesAndres/Excalibur.PNG" alt="Excalibur">
                         </td>
                         <td>
-                            <img src="./images/ImagesAndres/mag.PNG" alt="Mag">
+                            <img src="./images/imagesAndres/mag.PNG" alt="Mag">
                         </td>
                         <td>
-                            <img src="./images/ImagesAndres/Nokko.PNG" alt="Nokko">
+                            <img src="./images/imagesAndres/Nokko.PNG" alt="Nokko">
                         </td>
                         <td>
-                            <img src="./images/ImagesAndres/Nova.PNG" alt="Nova">
+                            <img src="./images/imagesAndres/Nova.PNG" alt="Nova">
+                        </td>
+                    </tr>
+                    <tr>
+                        <td colspan="4">Compétences</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <li>
+                                <ul>
+                                    <li>Coupe éphémère</li>
+                                    <li>Flash radial</li>
+                                    <li>Javelot radial</li>
+                                    <li>Épée exaltée</li>
+                                </ul>
+                            </li>
+                        </td>
+                        <td>
+                            <li>
+                                <ul>
+                                    <li>Abruti</li>
+                                    <li>Magnétiser</li>
+                                    <li>Polariser</li>
+                                    <li>Écraser</li>
+                                </ul>
+                            </li>
+                        </td>
+                        <td>
+                            <li>
+                                <ul>
+                                    <li>Peste fongique</li>
+                                    <li>Béret lumineux</li>
+                                    <li>Enracinement</li>
+                                    <li>Rebond de Spore</li>
+                                </ul>
+                            </li>
+                        </td>
+                        <td>
+                            <ul>
+                                <li>Étoile nulle</li>
+                                <li>Goutte d'antimatière</li>
+                                <li>Trou de ver</li>
+                                <li>Imprégnation moléculaire</li>
+                            </ul>
+                            </li>
                         </td>
                     </tr>
                 </table>
@@ -322,60 +387,28 @@
 
         <section class="wikiwar">
             <div class="wikiinfo">
-                <h2>⬇️Pour plus d'informations vous pouvez consulter la wiki de Warframe⬇️</h2>
+                <h2>⬇️Pour plus d’informations, vous pouvez consulter le wiki de Warframe⬇️</h2>
-                <p>Faite click sur l'image pour se rendre!</p>
+                <p>Faite clic sur l’image pour se rendre!</p>
             </div>
 
             <div class="accueilwiki">
-                <a href="https://wiki.warframe.com/">
+                <a target="_blank" href="https://wiki.warframe.com/">
-                    <img src="./images/ImagesAndres/accueilWiki.PNG" alt="jdjj">
+                    <img src="./images/imagesAndres/accueilWiki.PNG" alt="jdjj">
                 </a>
             </div>
 
             <div class="accueilwiki">
-                <a href="https://wiki.warframe.com/w/Warframes">
+                <a target="_blank" href="https://wiki.warframe.com/w/Warframes">
-                    <img src="./images/ImagesAndres/warframeWiki.PNG" alt="fsfsf">
+                    <img src="./images/imagesAndres/warframeWiki.PNG" alt="fsfsf">
                 </a>
             </div>
-
-            <div class="wikiinfo">
-                <h2>⬇️Si vous avez des questions⬇️</h2>
-            </div>
-
-            <div class="contact-lists">
-
-                <h2>Moyens de communication</h2>
-                <ol>
-                    <li>Téléphone : 514-555-9283</li>
-                    <li>Instagram : @AltF4_Official</li>
-                    <li>Twitter / X : @AltF4Team</li>
-                </ol>
-                <br>
-                <h2>Réseaux associés</h2>
-
-                <ul>
-                    <li>Communautés en ligne
-                        <ul>
-                            <li>Serveur Discord – Communauté ALT-F4</li>
-                            <li>Forum officiel Warframe – Section ALT-F4</li>
-                        </ul>
-                    </li>
-
-                    <li>Contenus multimédias
-                        <ul>
-                            <li>Chaîne YouTube ALT-F4</li>
-                            <li>Live Twitch hebdomadaire</li>
-                        </ul>
-                    </li>
-                </ul>
-
-            </div>
-        </section>
     </main>
 
     <footer>
-        <p>© Andres David Herrera Escorcia. Tout droits réservés. <br> Novembre 2025 <br> Page créée par Les Alt-F4</p>
+        <p>Copyright © 2025 Les Alt-F4. Tous droits réservés.</p>
-        <p id="updateDate">DATE_WEBSITE</p>
+        <p>Page créée par Andres David Herrera Escorcia.</p>
+        <a href="credits.html">Crédits</a>
+
     </footer>
 </body>
 

www/credits.html

@@ -1,10 +1,16 @@
+<!-- /**********************************************************/
+/* Fichier : credits.html */
+/* Titre : Crédits */
+/* Auteur : © Jérémy Hébert, Cégep de Sherbrooke */
+/*************************************************************-->
+
 <!DOCTYPE html>
 <html lang="fr">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="images/F4vicon.ico">
+    <link rel="icon" href="images/f4vicon.ico">
     <link rel="stylesheet" href="css/style.css">
     <script src="js/script.js"></script>
     <title>Crédits</title>
@@ -12,11 +18,12 @@
 
 <body>
     <nav>
-        <a href="index.html" class="boutonAccueil"><img src="images/LogoALT-F4_Nav.svg" alt="ALT-F4"></a>
+        <a href="index.html" class="boutonAccueil"><img src="images/logoALT-F4_Nav.svg" alt="ALT-F4"
+                id="logoAccueil"></a>
 
         <ul>
             <li><a href="aPropos.html">À propos</a></li>
-            <li><a href="team.html">L'équipe</a></li>
+            <li><a href="team.html">L’équipe</a></li>
             <li><a href="histoire.html">Histoire de DE</a></li>
             <li><a href="lore.html">Univers Sci-fi</a></li>
             <li><a href="missions.html">Missions</a></li>
@@ -25,176 +32,280 @@
     </nav>
 
     <main class="credits">
-        <div class="titre">
+        <header class="introduction">
-            <h1>Crédits</h1>
+            <div class="introduction">
-            <p>Découvrez les personnes et ressources qui ont contribué au fait que ce site puisse voir le jour.</p>
+                <h1>Crédits</h1>
-        </div>
+                <p>Découvrez les personnes et ressources qui ont contribué au fait que ce site puisse voir le jour.</p>
+                <a href="#premiereBox">Plus d’infos</a>
+            </div>
+        </header>
 
-        <div class="grille">
+        <section>
-            <div class="soustitre">
+            <article id="premiereBox">
-                <h3>Warframe</h3>
+                <div class="box">
-            </div>
+                    <h2>Warframe</h2>
-            <div class="description">
+                    <p class="contenu">
-                <p>
+                        Le site internet de Warframe a été consulté afin d’obtenir des images et vidéos authentiques du
-                    Le site internet de Warframe a été consulté afin d'obtenir des images et vidéos authentiques du jeux.
+                        jeu.
-                </p>
+                    </p>
-            </div>
+                    <div class="bouton"><a target="_blank" href="https://www.warframe.com/fr/game/about">Voir la
-            <div class="bouton"><a href="https://www.warframe.com/fr/game/about">Voir la source</a></div>
+                            source</a></div>
-        </div>
+                </div>
+            </article>
 
-        <div class="grille">
+            <article>
-            <div class="soustitre">
+                <div class="box">
-                <h3>Léa Dezothez</h3>
+                    <h2>Léa Dezothez</h2>
-            </div>
+                    <ul>
-            <div class="description">
+                        <li class="contenu">
-                <ul>
+                            Pour connaître le rôle de Léa, rendez-vous sur la page de l’équipe en cliquant sur le
-                    <li>Pour connaître le rôle de Léa, rendez-vous sur la page de l'équipe en cliquant sur le bouton.</li>
+                            bouton.
-                    <li>Léa a également fournis la vaste majorité des images.</li>
+                        </li>
-                </ul>
+                        <li class="contenu">
-            </div>
+                            Léa a également fourni la vaste majorité des images.
-            <div class="bouton"><a href="team.html#goToLea">Voir la personne</a></div>
+                        </li>
-        </div>
+                    </ul>
+                    <div class="bouton"><a href="team.html#lea">Voir la personne</a></div>
+                </div>
+            </article>
 
-        <div class="grille">
+            <article>
-            <div class="soustitre">
+                <div class="box">
-                <h3>Jérémy Hébert</h3>
+                    <h2>Jérémy Hébert</h2>
-            </div>
+                    <ul>
-            <div class="description">
+                        <li class="contenu">
-                <ul>
+                            Pour connaître le rôle de Jérémy, rendez-vous sur la page de l’équipe en cliquant sur le
-                    <li>Pour connaître le rôle de Jérémy, rendez-vous sur la page de l'équipe en cliquant sur le bouton.</li>
+                            bouton.
-                </ul>
+                        </li>
-            </div>
+                        <li class="contenu">
-            <div class="bouton"><a href="team.html#goToJeremy">Voir la personne</a></div>
+                            Jérémy a également fourni les logos ainsi que l’image se trouvant dans la page de réponse au
-        </div>
+                            formulaire.
+                        </li>
+                    </ul>
+                    <div class="bouton"><a href="team.html#jeremy">Voir la personne</a></div>
+                </div>
+            </article>
 
-        <div class="grille">
+            <article>
-            <div class="soustitre">
+                <div class="box">
-                <h3>Andres</h3>
+                    <h2>Andres David Herrera Escorcia</h2>
-            </div>
+                    <p class="contenu">
-            <div class="description">
+                        Pour connaître le rôle de Andres, rendez-vous sur la page de l’équipe en cliquant sur le bouton.
-                <ul>
+                    </p>
-                    <li>Pour connaître le rôle de Andres, rendez-vous sur la page de l'équipe en cliquant sur le bouton.</li>
+                    <div class="bouton"><a href="team.html#andres">Voir la personne</a></div>
-                </ul>
+                </div>
-            </div>
+            </article>
-            <div class="bouton"><a href="team.html#goToAndres">Voir la personne</a></div>
-        </div>
 
-        <div class="grille">
+            <article>
-            <div class="soustitre">
+                <div class="box">
-                <h3>Stanislas Royal</h3>
+                    <h2>Stanislas Royal</h2>
-            </div>
+                    <p class="contenu">
-            <div class="description">
+                        Pour connaître le rôle de Stanislas, rendez-vous sur la page de l’équipe en cliquant sur le
-                <ul>
+                        bouton.
-                    <li>Pour connaître le rôle de Stanislas, rendez-vous sur la page de l'équipe en cliquant sur le bouton.</li>
+                    </p>
-                </ul>
+                    <div class="bouton"><a href="team.html#stanislas">Voir la personne</a></div>
-            </div>
+                </div>
-            <div class="bouton"><a href="team.html#goToStanislas">Voir la personne</a></div>
+            </article>
-        </div>
 
-        <div class="grille">
+            <article>
-            <div class="soustitre">
+                <div class="box">
-                <h3>Création de Warframe</h3>
+                    <h2>discotools.xyz</h2>
-            </div>
+                    <p class="contenu">
-            <div class="description">
+                        Discotools.xyz a permis la création du bouclier présent dans le logo ainsi que le favicon.
-                <p>
+                    </p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    <div class="bouton"><a target="_blank" href="https://discotools.xyz/fr/icons-editor">Voir la
-                </p>
+                            source</a></div>
-                <br>
+                </div>
-                <p>
+            </article>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </div>
-            <div class="bouton"><a href="TODO">Voir la source</a></div>
-        </div>
 
-        <div class="grille">
+            <article>
-            <div class="soustitre">
+                <div class="box">
-                <h3>L’objectif</h3>
+                    <h2>Figma</h2>
-            </div>
+                    <p class="contenu">
-            <div class="description">
+                        Figma a été utilisé dans la conception du logo, du favicon et de l’image de remerciement pour
-                <p>
+                        avoir rempli le formulaire.
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
-                </p>
+                    <div class="bouton"><a target="_blank" href="https://www.figma.com/fr-fr/">Voir la source</a></div>
-                <br>
+                </div>
-                <p>
+            </article>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </div>
-            <div class="bouton"><a href="TODO">Voir la source</a></div>
-        </div>
 
-        <div class="grille">
+            <article>
-            <div class="soustitre">
+                <div class="box">
-                <h3>Les secrets</h3>
+                    <h2>Lyco Canario</h2>
-            </div>
+                    <p class="contenu">
-            <div class="description">
+                        Lyco Canario est derrière la poule utilisée dans l’image de remerciement pour avoir rempli le
-                <p>
+                        formulaire.
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
-                </p>
+                    <div class="bouton"><a target="_blank" href="https://dribbble.com/lycocanario">Voir la source</a>
-                <br>
+                    </div>
-                <p>
+                </div>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </article>
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </div>
-            <div class="bouton"><a href="TODO">Voir la source</a></div>
-        </div>
 
-        <div class="grille">
+            <article>
-            <div class="soustitre">
+                <div class="box">
-                <h3>L’évolution</h3>
+                    <h2>Visual Studio Code</h2>
-            </div>
+                    <p class="contenu">
-            <div class="description">
+                        Visual Studio Code a été l’outil de développement utilisé pour l’ensemble du projet.
-                <p>
+                    </p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    <div class="bouton"><a target="_blank" href="https://code.visualstudio.com/">Voir la source</a>
-                </p>
+                    </div>
-                <br>
+                </div>
-                <p>
+            </article>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </div>
-            <div class="bouton"><a href="TODO">Voir la source</a></div>
-        </div>
 
-        <div class="grille">
+            <article>
-            <div class="soustitre">
+                <div class="box">
-                <h3>Coming soon...</h3>
+                    <h2>/noclip</h2>
-            </div>
+                    <p class="contenu">
-            <div class="description">
+                        Le documentaire sur Warframe conçu par /noclip a servi à rédiger la page sur l’histoire de
-                <p>
+                        Digital Extremes.
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
-                </p>
+                    <div class="bouton"><a target="_blank"
-                <br>
+                            href="https://www.youtube.com/watch?v=UOE6528pwFc&list=PL-THgg8QnvU7Weo1mCM9H2AXljC7UrDm8&index=2">Voir
-                <p>
+                            la source</a></div>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </div>
-                </p>
+            </article>
-                <br>
+
-                <p>
+            <article>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                <div class="box">
-                </p>
+                    <h2>Jacob Deschamps & Josianne Fortin</h2>
-            </div>
+                    <p class="contenu">
-            <div class="bouton"><a href="TODO">Voir la source</a></div>
+                        La théorie fournie par le corps professoral a dépanné l’équipe à de multiples reprises.
-        </div>
+                    </p>
+                    <div class="bouton"><a target="_blank"
+                            href="https://moodle.cegepsherbrooke.qc.ca/course/view.php?id=1518">Voir la
+                            source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Gitea</h2>
+                    <p class="contenu">
+                        Les systèmes de Gitea ont permis un travail connecté durant l’ensemble du projet.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://about.gitea.com/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>ChatGPT</h2>
+                    <p class="contenu">
+                        ChatGPT a permis la rédaction de certains textes du site.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://chatgpt.com/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Gemini</h2>
+                    <p class="contenu">
+                        Gemini a permis la rédaction de certains textes du site.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://gemini.google.com/app">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Moqups</h2>
+                    <p class="contenu">
+                        Moqups a permis la création de la maquette, afin de rendre prévisible le style artistique du
+                        site.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://moqups.com/fr/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Google Maps</h2>
+                    <p class="contenu">
+                        Google Maps a permis l’intégration de la carte géographique sur le site.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://www.google.com/maps">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>World Wide Web Consortium</h2>
+                    <p class="contenu">
+                        Les valideurs du World Wide Web Consortium ont permis la révision du code de l’ensemble du site.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://validator.w3.org/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Brave Search</h2>
+                    <p class="contenu">
+                        Le moteur de recherche Brave Search a dépanné a de multiples reprises.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://search.brave.com/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Google</h2>
+                    <p class="contenu">
+                        Le moteur de recherche Google a dépanné à de multiples reprises.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://www.google.com/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>DuckDuckGo</h2>
+                    <p class="contenu">
+                        Le moteur de recherche DuckDuckGo a dépanné à de multiples reprises.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://duckduckgo.com/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>paint.net</h2>
+                    <p class="contenu">
+                        L’outil paint.net a permis l’édition de plusieurs images présentes sur le site.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://www.getpaint.net/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>Google Fonts</h2>
+                    <p class="contenu">
+                        Le site de Google Fonts a permis de trouver une police pour le site.
+                    </p>
+                    <div class="bouton"><a target="_blank" href="https://fonts.google.com/">Voir la source</a></div>
+                </div>
+            </article>
+
+            <article>
+                <div class="box">
+                    <h2>PlayWarframe</h2>
+                    <p class="contenu">
+                        La chaine Youtube officielle de Waframe a permis d'obtenir la musique «We All Lift Together».
+                    </p>
+                    <div class="bouton"><a target="_blank" href="multimedia/we_All_Lift_Together_mPTCq3LiZSE.mp3"
+                            download>Télécharger la musique</a></div>
+                </div>
+            </article>
+        </section>
     </main>
 
     <footer>
-        <p>© Jérémy Hébert. Tout droits réservés. <br> Novembre 2025 <br> Page créée par Les Alt-F4</p>
+        <p>Copyright © 2025 Les Alt-F4. Tous droits réservés.</p>
-        <p id="updateDate">DATE_WEBSITE</p>
+        <p>Page créée par Jérémy Hébert.</p>
+        <a href="credits.html">Crédits</a>
+
     </footer>
 </body>
 

www/css/style.css

@@ -1,10 +1,15 @@
 @charset "UTF-8";
-
 /* La feuille de style est encodée en UTF-8 */
+
 /****************************/
-/* PAGE: Tous */
+/* FICHIER: style.css */
-/* AUTEUR: Tous */
+/* AUTEURS: Léa Dezothez, Jérémy Hébert, Andres David Herrera Escorcia et Stanislas Royal */
-/* Nav + footer: Jérémy */
+/****************************/
+
+/****************************/
+/* PAGE: Style commun a l'ensemble des pages du projet */
+/* AUTEUR: Léa Dezothez, Jérémy Hébert, Andres David Herrera Escorcia et Stanislas Royal */
+/* Nav + footer: Jérémy Hébert */
 /****************************/
 * {
     margin: 0;
@@ -12,44 +17,6 @@
     box-sizing: border-box;
 }
 
-/** SECTION modifier par script  **/
-#updateDate {
-    visibility: hidden;
-    display: none;
-}
-
-#updateDateV {
-    visibility: visible;
-    display: block;
-    background-color: yellow;
-    font-weight: bold;
-    color: black;
-}
-
-#updateDateW {
-    visibility: visible;
-    display: block;
-    font-weight: bold;
-    color: white;
-}
-
-#pageCouranteNAV {
-    text-shadow: violet 2px;
-    box-shadow: #ffefe5;
-}
-
-/** FIN DE SECTION modifier par script  **/
-
-.sidebyside {
-    display: flex;
-}
-
-.centered {
-    text-align: center;
-    margin: auto;
-    display: block;
-}
-
 body {
     min-height: 100vh;
     /* Pour footer at bottom from : https://douiri.org/blog/fix-footer-bottom-css/ */
@@ -89,11 +56,15 @@ nav a {
     text-decoration: none;
     color: #ffefe5;
     padding: 10.8px 16px;
-    margin: 160px 4px;
+    margin: 16px 4px;
     background-color: #13172c;
     border-radius: 20px;
 }
 
+nav a.active {
+    background-color: #273a5666;
+}
+
 nav a:hover {
     background-color: #b47871;
 }
@@ -108,6 +79,23 @@ footer {
     color: #ffefe5;
     width: 100%;
     padding: 16px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+footer a {
+    display: inline-block;
+    text-decoration: none;
+    color: #ffefe5;
+    padding: 10.8px 16px;
+    margin: 8px 4px;
+    background-color: #726F9A;
+    border-radius: 20px;
+}
+
+footer a:hover {
+    background-color: #b47871;
 }
 
 ::selection {
@@ -118,7 +106,7 @@ footer {
 
 /****************************/
 /* PAGE: Accueil */
-/* AUTEUR: Léa */
+/* AUTEUR: Léa Dezothez */
 /****************************/
 .accueil {
     color: #ffefe5;
@@ -154,7 +142,7 @@ footer {
 
 .accueil #video {
     width: 100%;
-    height: auto;
+    height: 100%;
     display: block;
 }
 
@@ -162,8 +150,8 @@ footer {
     background-color: #13172cb0;
     position: absolute;
     top: 5%;
+    height: 118.5%;
     left: 50%;
-    padding-bottom: 36.6%;
     transform: translate(-50%, 0);
     z-index: 10;
 }
@@ -260,37 +248,62 @@ footer {
 
 /****************************/
 /* PAGE: à Propos */
-/* AUTEUR: Stanislas */
+/* AUTEUR: Stanislas Royal */
 /****************************/
-.aPropos {
+.aProposBG {
-    background-color: rgb(99, 241, 99);
+    background: url('../images/imageSR/Warframe0006.webp') center/cover fixed;
+    height: 100vh;
 }
 
-.aPropos main {
+.aPropos {
     margin: auto;
+    display: block;
+}
 
-    /* min-height: calc(100vh - 60px); */
+.aPropos .sidebyside {
-    /* display: block; */
+    display: flex;
+    max-width: 100%;
+}
+
+.aPropos .sidebyside section.commentaire,
+.aPropos .sidebyside section.coordonnees {
+    width: 50%;
+    margin: 16px;
+}
+
+/* FROM: https://www.w3schools.com/howto/howto_css_equal_height.asp */
+.aPropos .col-container {
+    display: table;
+}
+
+.aPropos .col {
+    display: table-cell;
+    /* Make elements inside the container behave like table cells */
+}
+
+.aPropos .centered {
+    text-align: center;
+    margin: auto;
+    display: block;
+}
+
+.aPropos h1 {
+    text-align: center;
+}
+
+.aPropos>main>div:first {
+    margin: auto;
+    display: flex;
+    align-content: center;
+    text-align: center;
 }
 
 .aPropos .conteneurMaps {
     max-width: 700px;
     max-height: 600px;
     overflow: scroll;
-}
+    margin-top: 2em;
-
+    padding: 1em;
-.aPropos .conteneurMaps­>iframe {
-    border: 0;
-
-}
-
-.aPropos .sidebyside>div {
-    margin: 5px 20px;
-}
-
-.aPropos .sidebyside>h1 {
-    width: 120%;
-
 }
 
 .aPropos textarea {
@@ -299,29 +312,147 @@ footer {
 }
 
 .aPropos form {
-    width: 70ch;
+    width: 100%;
+    height: 100%;
     margin: auto;
-    background-color: #273A56;
+    background-color: #726F9A;
-    border-radius: 15px;
+    border-radius: 20px;
-    padding: 10px;
+    padding: 16px;
     color: #E6ECF3;
-    overflow: scroll;
+}
+
+.aPropos p {
+    width: 100%;
+}
+
+.aPropos #contactInfo {
+    background-color: #273A56;
+    padding: 1em;
+    border-radius: 20px;
+    color: #E6ECF3;
+    width: 100%;
+}
+
+.aPropos .grille {
+    display: grid;
+    grid-template-areas:
+        "titreAdresse contenuAdresse"
+        "titreInfo contenuInfo"
+        "titreTelephone contenuTelephone"
+        "titreCourriel contenuCourriel";
+    grid-template-columns: 1fr 2fr;
+}
+
+.aPropos .grille #titreAdresse {
+    grid-area: titreAdresse;
+    text-align: left;
+}
+
+.aPropos .grille #contenuAdresse {
+    grid-area: contenuAdresse;
+    text-align: right;
+}
+
+.aPropos .grille #titreInfo {
+    grid-area: titreInfo;
+    text-align: left;
+}
+
+.aPropos .grille #contenuInfo {
+    grid-area: contenuInfo;
+    text-align: right;
+}
+
+.aPropos .grille #titreTelephone {
+    grid-area: titreTelephone;
+    text-align: left;
+}
+
+.aPropos .grille #contenuTelephone {
+    grid-area: contenuTelephone;
+    text-align: right;
+}
+
+.aPropos .grille #titreCourriel {
+    grid-area: titreCourriel;
+    text-align: left;
+}
+
+.aPropos .grille #contenuCourriel {
+    grid-area: contenuCourriel;
+    text-align: right;
+}
+
+.aPropos .grille #contenuAdresse,
+.aPropos .grille #contenuInfo,
+.aPropos .grille #contenuTelephone,
+.aPropos .grille #contenuCourriel {
+    color: #E6ECF3;
+    font-weight: 800;
+    text-decoration: underline;
+}
+
+.aPropos .grille #contenuAdresse:hover,
+.aPropos .grille #contenuInfo:hover,
+.aPropos .grille #contenuTelephone:hover,
+.aPropos .grille #contenuCourriel:hover {
+    color: #c19f8a;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.conteneurMaps::-webkit-scrollbar {
+    display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.conteneurMaps {
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
+    padding: 0;
+    margin: auto;
+    width: 100%;
+}
+
+.aPropos #mapsFrame {
+    border-radius: 20px;
+    width: 100%;
+    height: 400px;
+}
+
+.aPropos .sidebyside label {
+    margin: 10px;
+    padding: 1px;
 }
 
 .aPropos fieldset {
     padding: 10px;
     width: 100%;
     border-color: #606060;
-    margin: 10px auto;
 }
 
-/*.aPropos div {*/
+.aPropos fieldset:not(:first-child) {
-/*    display: block; */
+    margin: 1em auto 1em 0px;
-/*}*/
+}
+
+.aPropos h2 {
+    margin-bottom: 1em;
+}
+
+.aPropos #infoContact label {
+    width: 11em;
+    display: inline-block
+}
+
+.aPropos #infoContact input {
+    width: 25em;
+    display: inline-block
+}
 
 /****************************/
 /* PAGE: L'équipe */
-/* AUTEUR: Jérémy */
+/* AUTEUR: Jérémy Hébert */
 /****************************/
 .team {
     background: #13172c center;
@@ -431,10 +562,10 @@ footer {
 
 /****************************/
 /* PAGE: Histoire de DE */
-/* AUTEUR: Jérémy */
+/* AUTEUR: Jérémy Hébert */
 /****************************/
 .histoire {
-    background: #13172c url("../images/imagesTeam/Intro.png") center;
+    background: #13172c center;
     background-size: cover;
     background-position: top;
     color: #ffefe5;
@@ -465,7 +596,7 @@ footer {
     text-decoration: none;
     color: #ffefe5;
     padding: 10.8px 16px;
-    margin: 0 4px;
+    margin: 160px 4px;
     background-color: #13172c;
     border-radius: 20px;
 }
@@ -479,78 +610,97 @@ footer {
     margin: auto;
 }
 
-.histoire div.titre {
+.histoire section article {
-    grid-area: titre;
-    text-align: center;
-    font-size: 2rem;
-    padding-top: 66px;
-}
-
-.histoire div.grilleGauche {
-    background-color: rgb(19 23 44 / 90%);
-    border-radius: 20px;
-    display: grid;
-    align-items: flex-start;
-    grid-template-areas:
-        "image soustitre"
-        "image description";
-    grid-template-columns: 1fr 5fr;
-    grid-template-rows: 1fr 5fr;
-    padding: 16px;
-    margin: 16px 5%;
-    text-align: justify;
-}
-
-.histoire div.grilleDroite {
-    background-color: rgb(19 23 44 / 90%);
-    border-radius: 20px;
-    display: grid;
-    align-items: flex-start;
-    grid-template-areas:
-        "soustitre image"
-        "description image";
-    grid-template-columns: 5fr 1fr;
-    grid-template-rows: 1fr 5fr;
-    padding: 16px;
-    margin: 16px 5%;
-    text-align: justify;
-}
-
-.histoire div.image {
-    grid-area: image;
-    grid-template-columns: 15%;
     display: flex;
-    justify-content: center;
+    padding: 16px;
+    height: 75vh;
     align-items: center;
 }
 
-.histoire div.soustitre {
+.histoire section article.grilleGauche {
-    grid-area: soustitre;
+    text-align: left;
-    grid-template-columns: 85%;
-    text-align: center;
 }
 
-.histoire div.description {
+.histoire section article.grilleDroite {
-    grid-area: description;
+    text-align: right;
-    grid-template-columns: 85%;
 }
 
-.histoire div.image img {
+.histoire section article#contexte {
-    width: 100%;
+    background: #13172c url("../images/imagesDE/Contexte.webp") center/cover;
-    aspect-ratio: 1 / 1;
+}
-    /* hauteur = largeur */
+
-    border-radius: 20%;
+.histoire section article#chapitre1 {
+    background: #13172c url("../images/imagesDE/Chapitre1.webp") center/cover;
+}
+
+.histoire section article#chapitre2 {
+    background: #13172c url("../images/imagesDE/Chapitre2.webp") center/cover;
+}
+
+.histoire section article#chapitre3 {
+    background: #13172c url("../images/imagesDE/Chapitre3.webp") center/cover;
+}
+
+.histoire section article#chapitre4 {
+    background: #13172c url("../images/imagesDE/Chapitre4.webp") center/cover;
+}
+
+.histoire section article#chapitre5 {
+    background: #13172c url("../images/imagesDE/Chapitre5.webp") center/cover;
+}
+
+.histoire section article#chapitre6 {
+    background: #13172c url("../images/imagesDE/Chapitre6.webp") center/cover;
+}
+
+.histoire section article#chapitre7 {
+    background: #13172c url("../images/imagesDE/Chapitre7.webp") center/cover;
+}
+
+.histoire section article#chapitre8 {
+    background: #13172c url("../images/imagesDE/Chapitre8.webp") center/cover;
+}
+
+.histoire section article div.box {
+    background-color: rgba(19, 23, 44, 0.8);
     padding: 16px;
+    margin: 16px;
+    border-radius: 20px;
 }
 
-.histoire div.grilleDroite:hover,
+.histoire section article div.box:hover {
-.histoire div.grilleGauche:hover {
+    background-color: rgba(39, 58, 86, 0.9);
-    background-color: rgba(39, 58, 86, 90%);
+}
+
+.histoire section article.grilleGauche div.box {
+    margin-right: 50%;
+}
+
+.histoire section article.grilleDroite div.box {
+    margin-left: 50%;
+}
+
+.histoire section article h2,
+.histoire section article h3,
+.histoire section article p {
+    padding: 8px 0;
+}
+
+.histoire section article h2.titre {
+    font-size: 2rem;
+}
+
+.histoire section article h3.nomChapitre {
+    font-size: 1.5rem;
+}
+
+.histoire section article p.contenuChapitre {
+    font-size: 1rem;
 }
 
 /**************************************/
 /* PAGE: Univers Sci-fi et sous-pages */
-/* AUTEUR: Léa */
+/* AUTEUR: Léa Dezothez */
 /**************************************/
 .lore:not(footer) {
     background-color: #13172c;
@@ -792,15 +942,143 @@ footer {
 
 /****************************/
 /* PAGE: Missions */
-/* AUTEUR: Stanislas */
+/* AUTEUR: Stanislas Royal */
 /****************************/
+
 .missions {
-    background-color: rgb(43, 189, 226);
+    width: 100%;
+    background-color: #273A56;
+    color: #ffefe5;
+    text-shadow: 2px 2px 2px #13172c;
+}
+
+.missions audio {
+    margin: 2em auto auto auto;
+    position: sticky;
+    top: 65px;
+    left: 40vh;
+    width: 70vh;
+    text-align: center;
+
+}
+
+.missions .sidebyside {
+
+        display: flex;
+    max-width: 100%;
+
+}
+
+.missions section {
+    height: 40vh;
+    min-height: 200px;
+}
+
+.missions article {
+    width: 70vw;
+    height: 40vh;
+    margin: 1vh 10vw;
+    padding: 3em;
+    text-align: left;
+}
+
+.missions h1,
+.missions h2 {
+    margin-bottom: 2em;
+}
+
+.missions>section:first-of-type {
+    padding: 0 20vw;
+}
+
+.missions #autreMissions a:any-link {
+    color: #bf815b;
+    text-decoration: underline;
+    font-weight: 600;
+}
+
+.missions section:nth-child(even) article {
+    text-align: right;
+    /* float: right; */
+}
+
+.missions section:nth-child(odd) article {
+    text-align: left;
+}
+
+.missions section article p {
+    max-width: 50%;
+}
+
+.missions section:nth-child(even)>article>p {
+    margin: auto 0 auto auto;
+    text-align: right;
+}
+
+#assassination {
+    background: url('../images/imageSR/qu/assassinat.jpg') center/cover fixed;
+}
+
+
+.missions #missionsInfo {
+    background: url('../images/imageSR/qu/survie.jpg') center/cover fixed;
+}
+
+.missions #survie {
+    background: url('../images/imageSR/qu/survie.jpg') center/cover fixed;
+}
+
+.missions #assassination {
+    background: url('../images/imageSR/qu/assassinat.jpg') center/cover fixed;
+}
+
+.missions #capture {
+    background: url('../images/imageSR/qu/capture.jpg') center/cover fixed;
+}
+
+.missions #defense {
+    background: url('../images/imageSR/qu/defense.jpg') center/cover fixed;
+}
+
+.missions #excavation {
+    background: url('../images/imageSR/qu/excavation.jpg') center/cover fixed;
+}
+
+.missions #extermination {
+    background: url('../images/imageSR/qu/extermination.jpg') center/cover fixed;
+}
+
+.missions #hijack {
+    background: url('../images/imageSR/qu/detournement.jpg') center/cover fixed;
+}
+
+.missions #interception {
+    background: url('../images/imageSR/qu/interception.jpg') center/cover fixed;
+}
+
+.missions #invasion {
+    background: url('../images/imageSR/qu/invasion.jpg') center/cover fixed;
+}
+
+.missions #mobileDefense {
+    background: url('../images/imageSR/qu/defenseMobile.jpg') center/cover fixed;
+}
+
+.missions #sauvetage {
+    background: url('../images/imageSR/qu/sauvetage.jpg') center/cover fixed;
+}
+
+.missions #sabotage {
+    background: url('../images/imageSR/qu/sabotage.jpg') center/cover fixed;
+}
+
+.missions #autreMissions {
+    background: url('../images/imageSR/qu/sabotageRuches.jpg') center/cover fixed;
 }
 
 /****************************/
 /* PAGE: Warframes */
-/* AUTEUR: Andres */
+/* AUTEUR: Andres David Herrera Escorcia */
 /****************************/
 .armures {
     max-width: 100%;
@@ -838,15 +1116,24 @@ footer {
 
 .armures .perso .bg-video {
     position: absolute;
-    top: 50%;
+    top: 0;
-    left: 50%;
+    left: 0;
-    width: 110%;
+    width: 100%;
     height: 100%;
     object-fit: cover;
-    transform: translate(-50%, -50%);
     z-index: 0;
 }
 
+.perso .bg-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.80);
+    z-index: 1;
+}
+
 .armures .perso .content {
     position: relative;
     z-index: 10;
@@ -968,6 +1255,10 @@ footer {
     font-size: 1.2rem;
 }
 
+.accueilwiki img {
+    width: 100%;
+}
+
 .wikiwar {
     background-color: #273A56;
     color: white;
@@ -978,19 +1269,23 @@ footer {
     padding: 10px;
 }
 
+.wf-table-simple li {
+    list-style: none;
+}
+
 /****************************/
 /* PAGE: Crédits */
-/* AUTEUR: Jeremy */
+/* AUTEUR: Jérémy Hébert */
 /****************************/
 .credits {
-    background: #13172c url("../images/imagesTeam/Intro.png") center;
+    background: #C19F8A center;
     background-size: cover;
     background-position: top;
     color: #ffefe5;
 }
 
 .credits header.introduction {
-    background: #13172c url("../images/imagesDE/temporaire.webp") center/cover fixed;
+    background: #13172c url("../images/imagesCredits/Header.webp") center/cover fixed;
     background-position: top;
     height: 100vh;
     display: block;
@@ -1009,6 +1304,36 @@ footer {
     height: 100vh;
 }
 
+.credits header.introduction div.introduction a {
+    display: inline-block;
+    text-decoration: none;
+    color: #ffefe5;
+    padding: 10.8px 16px;
+    margin: 160px 4px;
+    background-color: #13172c;
+    border-radius: 20px;
+}
+
+.credits header.introduction div.introduction a:hover {
+    border-radius: 20px;
+    background-color: #b47871;
+}
+
+.credits main {
+    margin: auto;
+}
+
+.credits header.introduction h1,
+.credits header.introduction p {
+    line-height: 5;
+    font-size: 2rem;
+}
+
+.credits header.introduction div.introduction {
+    background-color: #13172cd5;
+    height: 100vh;
+}
+
 .credits div.bouton a {
     display: inline-block;
     text-decoration: none;
@@ -1028,56 +1353,37 @@ footer {
     margin: auto;
 }
 
-.credits div.titre {
+.credits section article {
-    text-align: center;
-    font-size: 2rem;
-    padding-top: 66px;
-}
-
-.credits div.grille {
-    background-color: rgba(115, 110, 154, 0.9);
-    border-radius: 20px;
-    display: grid;
-    align-items: flex-start;
-    grid-template-areas:
-        "soustitre soustitre"
-        "description description"
-        "bouton bouton";
-    /*grid-template-columns: 1fr 3fr;*/
-    padding: 16px;
-    margin: 16px 5%;
-    text-align: center;
-}
-
-.credits div.bouton {
-    grid-area: bouton;
-    grid-template-columns: 15%;
     display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 16px;
-}
-
-.credits div.soustitre {
-    grid-area: soustitre;
-    grid-template-columns: 85%;
-    text-align: center;
-}
-
-.credits div.description {
-    grid-area: description;
-    grid-template-columns: 85%;
-}
-
-.credits div.image img {
-    width: 100%;
-    aspect-ratio: 1 / 1;
-    /* hauteur = largeur */
-    border-radius: 20%;
     padding: 16px;
+    align-items: center;
 }
 
-.credits div.grilleDroite:hover,
+.credits section article div.box {
-.credits div.grilleGauche:hover {
+    background-color: rgba(19, 23, 44, 0.8);
-    background-color: rgba(39, 58, 86, 90%);
+    padding: 16px;
+    margin: 16px;
+    border-radius: 20px;
+}
+
+.credits section article div.box:hover {
+    background-color: rgba(39, 58, 86, 0.9);
+}
+
+.credits section article h2,
+.credits section article h3,
+.credits section article .contenu {
+    padding: 8px 0;
+    list-style: none;
+}
+
+/****************************/
+/* PAGE: Merci */
+/* AUTEUR: Jérémy Hébert */
+/****************************/
+.reponse {
+    background: #C19F8A url("../images/imagesReponse/Merci.png") center;
+    background-size: cover;
+    background-position: top;
+    color: #ffefe5;
 }

www/histoire.html

@@ -1,10 +1,16 @@
+<!-- /**********************************************************/
+/* Fichier : histoire.html */
+/* Titre : Histoire de DE */
+/* Auteur : © Jérémy Hébert, Cégep de Sherbrooke */
+/*************************************************************-->
+
 <!DOCTYPE html>
 <html lang="fr">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="images/F4vicon.ico">
+    <link rel="icon" href="images/f4vicon.ico">
     <link rel="stylesheet" href="css/style.css">
     <script src="js/script.js"></script>
     <title>Histoire de DE</title>
@@ -12,12 +18,13 @@
 
 <body>
     <nav>
-        <a href="index.html" class="boutonAccueil"><img src="images/LogoALT-F4_Nav.svg" alt="ALT-F4"></a>
+        <a href="index.html" class="boutonAccueil"><img src="images/logoALT-F4_Nav.svg" alt="ALT-F4"
+                id="logoAccueil"></a>
 
         <ul>
             <li><a href="aPropos.html">À propos</a></li>
-            <li><a href="team.html">L'équipe</a></li>
+            <li><a href="team.html">L’équipe</a></li>
-            <li><a href="histoire.html">Histoire de DE</a></li>
+            <li><a href="histoire.html" class="active">Histoire de DE</a></li>
             <li><a href="lore.html">Univers Sci-fi</a></li>
             <li><a href="missions.html">Missions</a></li>
             <li><a href="armures.html">Armures</a></li>
@@ -27,220 +34,154 @@
     <main class="histoire">
         <header class="introduction">
             <div class="introduction">
-                <h1>L'histoire de Digital Extremes</h1>
+                <h1>L’histoire de Digital Extremes</h1>
-                <p>Plonger dans l'histoire fascinante de Digital Extremes</p>
+                <p>Plonger dans l’histoire fascinante de Digital Extremes.</p>
-                <a href="#goToTitre">Plus d'infos</a>
+                <a href="#contexte">Plus d’infos</a>
             </div>
         </header>
 
-        <div class="titre" id="goToTitre">
+        <section>
-            <h2>La face cachée de Warframe</h2>
-        </div>
 
-        <div class="grilleGauche">
+            <article class="grilleGauche" id="contexte">
-            <div class="image"><img src="images/imagesDE/DELogo-WhiteOnBlueRGB.png" alt="Logo de Digital Extremes"></div>
+                <div class="box">
-            <div class="soustitre">
+                    <h2 class="titre">La face cachée de Warframe</h2>
-                <h3>Histoire du fondateur</h3>
+                    <p class="contenuChapitre">
-            </div>
+                        Warframe est aujourd’hui un pilier du jeu en ligne, un univers singulier mêlant science-fiction
-            <div class="description">
+                        organique et combats rapides. Pourtant, derrière son apparence futuriste, son existence même
-                <p>
+                        tient du miracle. Le jeu est né à une époque où Digital Extremes, son studio créateur, était au
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        bord de l’effondrement après dix années difficiles. L’histoire de Warframe est celle d’un
-                </p>
+                        sauvetage inattendu, d’une idée persistante et d’une équipe déterminée à se réinventer.
-                <br>
+                    </p>
-                <p>
+                </div>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </article>
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </div>
-        </div>
 
-        <div class="grilleDroite">
+            <article class="grilleDroite" id="chapitre1">
-            <div class="image"><img src="images/imagesDE/temporaire.webp" alt="Image temporaire"></div>
+                <div class="box">
-            <div class="soustitre">
+                    <h3 class="nomChapitre">Les premiers pas de James Schmalz</h3>
-                <h3>Collaboration avec Epic Games</h3>
+                    <p class="contenuChapitre">
-            </div>
+                        L’histoire commence avec James Schmalz, un passionné qui crée des jeux par loisir bien avant
-            <div class="description">
+                        d’en faire une profession. Pendant ses études universitaires, il réalise un petit jeu, Legends
-                <p>
+                        of Murder, vendu à un magazine pour un montant modeste, mais révélateur de son potentiel.
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        Inspiré par des œuvres de science-fiction, il conçoit ensuite Solar Winds, qui attire
-                </p>
+                        l’attention d’Epic MegaGames. Ce premier succès est suivi d’un autre encore plus important, Epic
-                <br>
+                        Pinball, qui lui apporte une notoriété suffisante pour fonder Digital Extremes.
-                <p>
+                    </p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </div>
-                </p>
+            </article>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </div>
-        </div>
 
-        <div class="grilleGauche">
+            <article class="grilleGauche" id="chapitre2">
-            <div class="image"><img src="images/imagesDE/temporaire.webp" alt="Image temporaire"></div>
+                <div class="box">
-            <div class="soustitre">
+                    <h3 class="nomChapitre">La décennie Unreal Tournament</h3>
-                <h3>Publication d’un jeu sous l’éditeur Epic Games</h3>
+                    <p class="contenuChapitre">
-            </div>
+                        Durant près de dix ans, Digital Extremes collabore étroitement avec Epic Games sur la franchise
-            <div class="description">
+                        Unreal Tournament. Les deux studios travaillent presque comme une seule entité, partageant leurs
-                <p>
+                        équipes et leurs talents. Cette période voit naître certains des jeux multijoueurs les plus
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        marquants de leur époque. Cependant, lorsque les deux entreprises prennent des chemins
-                </p>
+                        différents, Digital Extremes cherche à établir son propre projet ambitieux.
-                <br>
+                    </p>
-                <p>
+                </div>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </article>
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </div>
-        </div>
 
-        <div class="grilleDroite">
+            <article class="grilleDroite" id="chapitre3">
-            <div class="image"><img src="images/imagesDE/temporaire.webp" alt="Image temporaire"></div>
+                <div class="box">
-            <div class="soustitre">
+                    <h3 class="nomChapitre">Le piège du Travail à louer</h3>
-                <h3>Dark Sector</h3>
+                    <p class="contenuChapitre">
-            </div>
+                        Le studio décide alors de se lancer dans un projet interne, Dark Sector, voulu comme une
-            <div class="description">
+                        nouvelle grande franchise de science-fiction. Au lieu de leur offrir l’indépendance créative, ce
-                <p>
+                        prototype les enferme dans un cycle de travail à la demande pour différents éditeurs. Pariah,
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        Warpath, l’adaptation PlayStation 3 de Bioshock et une version transformée de Dark Sector sont
-                </p>
+                        produits durant cette période. Le studio survit, mais la créativité s’érode. Pourtant, au cœur
-                <br>
+                        de ces années difficiles, un concept refuse de disparaître : celui d’un monde de science-fiction
-                <p>
+                        sombre, évolutif, formé d’armures vivantes et de technologie organique. C’était la racine de
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        Warframe.
-                </p>
+                    </p>
-                <br>
+                </div>
-                <p>
+            </article>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </div>
-        </div>
 
-        <div class="grilleGauche">
+            <article class="grilleGauche" id="chapitre4">
-            <div class="image"><img src="images/imagesDE/temporaire.webp" alt="Image temporaire"></div>
+                <div class="box">
-            <div class="soustitre">
+                    <h3 class="nomChapitre">Neuf mois pour recommencer</h3>
-                <h3>Passage au <em>Free-to-Play</em></h3>
+                    <p class="contenuChapitre">
-            </div>
+                        Lorsque le marché du jeu vidéo se transforme et que les contrats se raréfient, Digital Extremes
-            <div class="description">
+                        se retrouve en situation critique. La décision est prise de ressusciter l’ancienne idée de Dark
-                <p>
+                        Sector et d’en faire un nouveau jeu en ligne. Le studio dispose de neuf mois pour créer un
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        prototype jouable, concevoir un site fonctionnel, bâtir une infrastructure en ligne complète et
-                </p>
+                        construire les fondations d’un modèle économique. Sans expérience dans le domaine des jeux
-                <br>
+                        persistants, l’équipe se lance dans une course contre la montre. L’objectif est clair : sortir
-                <p>
+                        un jeu minimal, mais fonctionnel, capable de servir de base pour l’avenir.
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
-                </p>
+                </div>
-                <br>
+            </article>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </div>
-        </div>
 
-        <div class="grilleDroite">
+            <article class="grilleDroite" id="chapitre5">
-            <div class="image"><img src="images/imagesDE/temporaire.webp" alt="Image temporaire"></div>
+                <div class="box">
-            <div class="soustitre">
+                    <h3 class="nomChapitre">Les premiers soutiens de la communauté</h3>
-                <h3>Création de Warframe</h3>
+                    <p class="contenuChapitre">
-            </div>
+                        À son lancement, Warframe avance timidement. Digital Extremes propose alors un Pack fondateur
-            <div class="description">
+                        permettant de soutenir le développement du jeu. Les premiers achats surprennent l’équipe et leur
-                <p>
+                        offrent un encouragement vital. En parallèle, le studio réévalue rapidement son modèle
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        économique. Les premiers systèmes favorisaient trop fortement les joueurs payants, ce qui
-                </p>
+                        menaçait de briser la confiance naissante. En janvier 2013, la décision est prise d’abandonner
-                <br>
+                        ces éléments, marquant la transition vers un modèle plus équitable. L’arrivée du jeu sur Steam
-                <p>
+                        quelques mois plus tard marque un tournant décisif : le public s’élargit brusquement et les
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        revenus permettent enfin au studio de stabiliser sa situation.
-                </p>
+                    </p>
-                <br>
+                </div>
-                <p>
+            </article>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </div>
-        </div>
 
-        <div class="grilleGauche">
+            <article class="grilleGauche" id="chapitre6">
-            <div class="image"><img src="images/imagesDE/temporaire.webp" alt="Image temporaire"></div>
+                <div class="box">
-            <div class="soustitre">
+                    <h3 class="nomChapitre">L’évolution continue</h3>
-                <h3>L’objectif</h3>
+                    <p class="contenuChapitre">
-            </div>
+                        Une fois l’urgence de la survie passée, Digital Extremes adopte une philosophie simple :
-            <div class="description">
+                        Warframe doit évoluer constamment pour rester attractif. Le studio développe de nouvelles zones,
-                <p>
+                        enrichit le système de mouvement, ajoute régulièrement des Warframes et ouvre la porte aux
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        créations de la communauté à travers le programme Tennogen. Cette dynamique s’accompagne d’un
-                </p>
+                        dialogue constant avec les joueurs, rendu possible par des diffusions en direct, des événements
-                <br>
+                        communautaires et des mises à jour fréquentes. Les développeurs apprennent à intégrer certaines
-                <p>
+                        pratiques inventées par les joueurs eux-mêmes, transformant des exploits en mécaniques
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        officielles lorsque celles-ci améliorent le plaisir de jeu.
-                </p>
+                    </p>
-                <br>
+                </div>
-                <p>
+            </article>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </div>
-        </div>
 
-        <div class="grilleDroite">
+            <article class="grilleDroite" id="chapitre7">
-            <div class="image"><img src="images/imagesDE/temporaire.webp" alt="Image temporaire"></div>
+                <div class="box">
-            <div class="soustitre">
+                    <h3 class="nomChapitre">Un univers bizarre et unique</h3>
-                <h3>Les secrets</h3>
+                    <p class="contenuChapitre">
-            </div>
+                        L’une des forces de Warframe réside dans son identité visuelle et narrative. Plutôt que de
-            <div class="description">
+                        s’inspirer des productions hollywoodiennes, les artistes du studio se tournent vers des
-                <p>
+                        influences européennes, notamment le travail de Moebius. Le résultat est un univers étrange,
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        biomécanique, parfois déroutant, mais toujours distinctif. Chaque élément possède un vocabulaire
-                </p>
+                        propre, des Syandanas aux Kavats en passant par les factions dotées de leurs propres
-                <br>
+                        caractéristiques culturelles. Ce choix esthétique, parfois clivant, est devenu l’une des
-                <p>
+                        signatures essentielles du jeu. Ce qui semblait être une barrière à l’entrée est devenu un
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        atout, un monde si singulier que ceux qui s’y plongent s’y attachent profondément.
-                </p>
+                    </p>
-                <br>
+                </div>
-                <p>
+            </article>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </div>
-        </div>
 
-        <div class="grilleGauche">
+            <article class="grilleGauche" id="chapitre8">
-            <div class="image"><img src="images/imagesDE/temporaire.webp" alt="Image temporaire"></div>
+                <div class="box">
-            <div class="soustitre">
+                    <h3 class="nomChapitre">La transformation en succès durable</h3>
-                <h3>L’évolution</h3>
+                    <p class="contenuChapitre">
-            </div>
+                        Avec le temps, Warframe devient un exemple rare de jeu en ligne porté par la passion,
-            <div class="description">
+                        l’adaptabilité et le lien avec sa communauté. Ce qui aurait pu être le dernier espoir d’un
-                <p>
+                        studio en difficulté devient une œuvre en perpétuelle expansion, façonnée par ses créateurs
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        comme par ses joueurs. L’histoire de Digital Extremes et de Warframe illustre qu’un projet né de
-                </p>
+                        la nécessité peut devenir une référence, à condition d’être animé par une vision forte et la
-                <br>
+                        volonté de toujours se réinventer.
-                <p>
+                    </p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </div>
-                </p>
+            </article>
-                <br>
+        </section>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </div>
-        </div>
-
-        <div class="grilleDroite">
-            <div class="image"><img src="images/imagesDE/temporaire.webp" alt="Image temporaire"></div>
-            <div class="soustitre">
-                <h3>Coming soon...</h3>
-            </div>
-            <div class="description">
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <br>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </div>
-        </div>
     </main>
 
     <footer>
-        <p>© Jérémy Hébert. Tout droits réservés. <br> Novembre 2025 <br> Page créée par Les Alt-F4</p>
+        <p>Copyright © 2025 Les Alt-F4. Tous droits réservés.</p>
-        <p id="updateDate">DATE_WEBSITE</p>
+        <p>Page créée par Jérémy Hébert.</p>
+        <a href="credits.html">Crédits</a>
+
     </footer>
 </body>
 

www/index.html

@@ -1,22 +1,29 @@
+<!-- /**********************************************************/
+/* Fichier : index.html */
+/* Titre : Page d'accueil */
+/* Auteur : © Léa Dezothez, Cégep de Sherbrooke */
+/*************************************************************-->
+
 <!DOCTYPE html>
 <html lang="fr">
 
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link rel="icon" href="images/F4vicon.ico">
+	<link rel="icon" href="images/f4vicon.ico">
 	<link rel="stylesheet" href="css/style.css">
 	<script src="js/script.js"></script>
-	<title>Les ALT-F4</title>
+	<title>Les Alt-F4</title>
 </head>
 
 <body class="accueil">
 	<nav>
-		<a href="index.html" class="boutonAccueil"><img src="images/LogoALT-F4_Nav.svg" alt="ALT-F4"></a>
+		<a href="index.html" class="boutonAccueil"><img src="images/logoALT-F4_Nav.svg" alt="ALT-F4"
+				id="logoAccueil"></a>
 
 		<ul>
 			<li><a href="aPropos.html">À propos</a></li>
-			<li><a href="team.html">L'équipe</a></li>
+			<li><a href="team.html">L’équipe</a></li>
 			<li><a href="histoire.html">Histoire de DE</a></li>
 			<li><a href="lore.html">Univers Sci-fi</a></li>
 			<li><a href="missions.html">Missions</a></li>
@@ -28,7 +35,7 @@
 		<header>
 			<section>
 				<div id="texte">
-					<h1>WARFRAME : <br> Toute une histoire</h1>
+					<h1>WARFRAME: <br> Toute une histoire</h1>
 					<p> Warframe est un jeu d’action coopératif free-to-play dans lequel vous incarnez un Tenno, un
 						guerrier
 						d’élite
@@ -40,9 +47,7 @@
 						évolution. Grâce à une grande liberté de personnalisation et à un contenu régulièrement enrichi,
 						Warframe offre une expérience profonde, fluide et accessible en équipe comme en solo.</p>
 				</div>
-				<video autoplay muted loop playsinline id="video">
+				<video autoplay muted loop playsinline id="video" src="multimedia/mediasLea/warframeIntro.mp4">Balise vidéo non supportée</video>
-					<source src="medias/mediasLea/warframeIntro.mp4" type="video/mp4">
-				</video>
 			</section>
 		</header>
 
@@ -57,7 +62,7 @@
 				<div>
 					<img src="images/imagesTeam/AvatarLea.png" alt="Avatar de Léa">
 					<p>Léa Dezothez</p>
-					<p>Directrice Artistique</p>
+					<p>Directrice artistique</p>
 				</div>
 
 				<div>
@@ -72,7 +77,7 @@
 					<p>Conseiller</p>
 				</div>
 				<a href="team.html">
-					<h2>Rencontrez l'équipe!</h2>
+					<p>Rencontrez l'équipe!</p>
 				</a>
 			</article>
 		</section>
@@ -80,21 +85,21 @@
 		<section> <!--Histoire de DE-->
 			<article id="histoireDE">
 				<div class="fondOpaqueGauche">
-					<h2>L'histoire de <br><em>Digital Extreme</em></h2>
+					<h2>L’histoire de <br><em>Digital Extreme</em></h2>
 
 					<p>Fondé en 1993, Digital Extremes s’est imposé comme un pionnier de l’industrie du jeu vidéo grâce
-						à des titres marquants allant de l’ancêtre « shareware » Epic Pinball à la série emblématique
+						à des titres marquants allant de l’ancêtre «shareware» Epic Pinball à la série emblématique
-						Unreal (co-produite avec Epic Games), puis au succès mondial du jeu gratuit en ligne Warframe.
+						Unreal (coproduite avec Epic Games), puis au succès mondial du jeu gratuit en ligne Warframe.
 						Avec plus de 30 ans d’innovation à son actif, le studio est reconnu non seulement pour la
 						qualité de ses jeux,
-						mais aussi pour sa culture interne forte : une équipe diversifiée comptant plus de 450 personnes
+						mais aussi pour sa culture interne forte: une équipe diversifiée comptant plus de 450 personnes
 						réparties au Canada et à l’international, un environnement de travail collaboratif, créatif et
-						engagé — et un profond attachement à la communauté de joueurs. Basé à Londres en Ontario,
+						engagé, ainsi qu’un profond attachement à la communauté de joueurs. Basé à Londres en Ontario,
 						Digital Extremes continue d’insuffler sa passion pour le développement et le partage, en gardant
 						comme moteur la créativité, l’excellence et l’esprit communautaire.</p>
 					<!--Texte généré avec ChatGPT-->
 
-					<a href="histoire.html">PLUS D'INFOS</a>
+					<a href="histoire.html">PLUS D’INFOS</a>
 				</div>
 			</article>
 		</section>
@@ -108,13 +113,13 @@
 						son histoire est devenue très complexe au cours des années.
 						Des évènements de communautés, des ajouts de mécaniques et de nouvelles zones ont enrichi le
 						narratif.
-						Toute ces informations prennent son sens en suivant les quêtes principales, qui racontent
+						Toutes ces informations prennent son sens en suivant les quêtes principales, qui racontent
 						l’histoire
 						du jeu.
 						Pour débloquer plus de quêtes d’histoire, il faut que le joueur progresse sur le système solaire
 						et
 						qu’il débloque des jonctions qui lient les planètes entre elles.</p>
-					<a href="lore.html">PLUS D'INFOS</a>
+					<a href="lore.html">PLUS D’INFOS</a>
 				</div>
 			</article>
 		</section>
@@ -136,7 +141,7 @@
 						d’adopter
 						des approches variées, de s’adapter à différents styles de jeu et de tirer parti des capacités
 						uniques de chaque Warframe.</p>
-					<a href="missions.html">PLUS D'INFOS</a>
+					<a href="missions.html">PLUS D’INFOS</a>
 				</div>
 			</article>
 		</section>
@@ -146,7 +151,7 @@
 				<div class="droite">
 					<h2>Les armures</h2>
 
-					<p>Les Warframes sont au cœur de l’expérience de Warframe : de puissantes armures biomécaniques
+					<p>Les Warframes sont au cœur de l’expérience de Warframe: de puissantes armures biomécaniques
 						dotées
 						de capacités uniques qui définissent entièrement le style de jeu du joueur. Chacune possède
 						quatre
@@ -160,15 +165,17 @@
 						peut être façonnée selon les préférences du joueur, faisant du choix et de l’optimisation un
 						élément
 						clé de la progression.</p>
-					<a href="armures.html">PLUS D'INFOS</a>
+					<a href="armures.html">PLUS D’INFOS</a>
 				</div>
 			</article>
 		</section>
 	</main>
 
 	<footer>
-		<p>© Léa Dezothez. Tout droits réservés. <br> Novembre 2025 <br> Page créée par Les Alt-F4</p>
+		<p>Copyright © 2025 Les Alt-F4. Tous droits réservés.</p>
-		<p id="updateDate">DATE_WEBSITE</p>
+		<p>Page créée par Léa Dezothez.</p>
+		<a href="credits.html">Crédits</a>
+
 	</footer>
 </body>
 

www/js/script.js

@@ -1,123 +1,50 @@
-
+/* AUTEUR: Stan
+   DATE : 2025-12-03
+   DESC: Ajout de glitch comme certains evenement dans Warframe
+   */
 // https://www.geeksforgeeks.org/html/difference-between-domcontentloaded-and-load-events/
-// Performance for my useCase (modify NAV and FOOTER)
-// https://stackoverflow.com/questions/44329324/cannot-read-property-symbolsymbol-iterator-of-undefined
-/*
-document.addEventListener("DOMContentLoaded", 
-    function(e) {
-        console.log("DOMContentLoaded triggered !");
 
-        var topEl  = document.getElementsByTagName("nav"); // maybe header
+// https://www.w3schools.com/js/js_timing.asp
-        var listLI = topEl[0].getElementsByTagName("li");
+// https://stackoverflow.com/questions/62039703/blur-an-image-with-javascript
+function timerBlur() {
+  var count = 3;
+  var timer2 = setInterval(function () {
 
+    if (count == 3) {
+      document.getElementById('logoAccueil').style.filter = "blur(3px)";
 
-document.getElementById("");
+    }
- //       var allA = listLI.getElementsByTagName("a");
+    else if (count == 2) {
-// topEl.
+      document.getElementById('logoAccueil').style.filter = "blur(2px)";
+    }
+    else if (count == 1) {
+      document.getElementById('logoAccueil').style.filter = "blur(1px)";
+    }
+    else if (count == 0) {
+      document.getElementById('logoAccueil').style.filter = "";
+      clearInterval(timer2);
+    }
+    count--;
+  }, 350);
 
-listLI.forEach(nodeLI => {console.log(nodeLI.innerHTML);});
-*/
-/*
-allA.forEach(node => {
-    console.log(node);
-});
-
-*/
-/*
-        // let myNav = document.getElementsByTagName("nav");
-        // myNav.getElementsByTagName("a")
-        for (child of allA){
-            console.log(child.innerHTML);
-        }
-*/            // for (document.querySelector("nav")
-//    });
-
-
-/*!SECTION
-
-// .textContent
-// .innerHTML
-
-
-const parent = document.getElementById("myParent");
-const children = parent.children;
-
-for (let i = 0; i < children.length; i++) {
-  const child = children[i];
-  // Perform actions on the child element
-  console.log(child.textContent);
 }
 
-
+function timerGlitch() {
-for (let i = 0; i < children.length; i++) {
+  var timer = setInterval(function () {
-  const child = children[i];
+    curSrc = document.getElementById('logoAccueil').getAttribute('src');
-  // Perform actions on the child element
+    if (curSrc == 'images/logoALT-F4_Nav.svg') {
-  console.log(child.TagName);
+      timerBlur();
-console.log(child.textContent);… 
+      document.getElementById('logoAccueil').setAttribute('src', 'images/logoAlt-F4_NavGlitch.svg')
-
+    }
-
+    else {
-*/
+      document.getElementById('logoAccueil').setAttribute('src', 'images/logoALT-F4_Nav.svg')
-
+    }
-// javascript console output DOM tree
+  }, 2500);
-// https://stackoverflow.com/questions/50305257/how-to-console-log-entire-html-dom-tree-in-order-with-attribute-names
-// https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
-
-/*
-var walker = document.createTreeWalker(
-  document.documentElement,
-  NodeFilter.SHOW_ELEMENT // only elements
-);
-
-while (walker.nextNode()) {
-  let current = walker.currentNode;
-  console.log(
-    current.tagName,
-    [...current.attributes].map(({value,name}) => `${name}=${value}`).join()
-  );
 }
-*/
-
-// Needed for image loaded and fetched : Not on local computer.
-/*    https://www.geeksforgeeks.org/html/difference-between-domcontentloaded-and-load-events/
-document.addEventListener("load", function(e) {
-  console.log("The page has completely loaded.");
-});
-*/
 
 window.onload = function () {
-            setTimeout(function () {
+  timerGlitch();
-/*                document.getElementById('message').innerHTML =
+  // NOTE: Change Current Page based on url in <NAV>
-                    'The page has finished loading! After 2 second'; */
+  // NOTE Track mouse mouvement and show after a percentage of ?
-                    // Check if on the test domain and that the text changed, if so display Data.
+  // NOTE une page sur deux, ...
-                    if (window.location.hostname === 's.zkd.ca' && document.getElementById("updateDate").innerHTML != 'DATE_WEBSITE' )
+};
-                    {
-                        document.getElementById("updateDate").setAttribute("id", "updateDateV");
-                    } else
-                    {
-                        document.getElementById("updateDate").setAttribute("id", "updateDateW");
-                        document.getElementById("updateDateW").innerHTML = 'À la prochaine!';
-                    }
-
-                    // https://developer.mozilla.org/en-US/docs/Web/API/Element/children
-                    // const myHeader = document.getElementByTagName("header"); // TODO: Make sure only first nav (need <header>)
-                    myNav = document.getElementsByTagName("nav");
-                    console.log(myNav.length());
-
-                    for (var i = 0; i < myNav.children.length(); i++) {
-                        var tableChild = myNav.children[i];
-                        console.log(tableChild.tagName);
-                        // Do stuff
-                    }
-
-/*                    for (const child of myNav.children) {
-                    console.log(child.tagName);
-                    }
-*/
-            }, 2000);
-            // NOTE: Change Current Page based on url in <NAV>
-
-
-            // TODO Add timer for glitch
-            // NOTE Track mouse mouvement and show after a percentage of ?
-            // NOTE une page sur deux, ...
-        };

www/lore.html

@@ -1,10 +1,16 @@
+<!-- /**********************************************************/
+/* Fichier : lore.html */
+/* Titre : Univers Sci-fi */
+/* Auteur : © Léa Dezothez, Cégep de Sherbrooke */
+/*************************************************************-->
+
 <!DOCTYPE html>
 <html lang="fr">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="images/F4vicon.ico">
+    <link rel="icon" href="images/f4vicon.ico">
     <link rel="stylesheet" href="css/style.css">
     <script src="js/script.js"></script>
     <title>Univers Sci-fi</title>
@@ -12,13 +18,14 @@
 
 <body class="lore">
     <nav>
-        <a href="index.html" class="boutonAccueil"><img src="images/LogoALT-F4_Nav.svg" alt="ALT-F4"></a>
+        <a href="index.html" class="boutonAccueil"><img src="images/logoALT-F4_Nav.svg" alt="ALT-F4"
+                id="logoAccueil"></a>
 
         <ul>
             <li><a href="aPropos.html">À propos</a></li>
-            <li><a href="team.html">L'équipe</a></li>
+            <li><a href="team.html">L’équipe</a></li>
             <li><a href="histoire.html">Histoire de DE</a></li>
-            <li><a href="lore.html">Univers Sci-fi</a></li>
+            <li><a href="lore.html" class="active">Univers Sci-fi</a></li>
             <li><a href="missions.html">Missions</a></li>
             <li><a href="armures.html">Armures</a></li>
         </ul>
@@ -29,27 +36,27 @@
             <div>
                 <h1>Comment commence <em>Warframe</em>?</h1>
 
-                <p>Depuis l’année 2024, les nouveaux joueurs ont accès à deux débuts qui finissent par converger.
+                <p>Depuis l’année 2024, les nouveaux joueurs ont accès à deux débuts qui finissent par converger.
-                    Le premier est celui qui est considéré <em>«Canon»</em> dans l’univers de Warframe tandis que le
+                    Le premier est celui qui est considéré <em>«Canon»</em> dans l’univers de Warframe, tandis que le
                     deuxième
                     ressemble plus à un <em>Roguelike</em> pour rapidement introduire les joueurs au fonctionnement du
                     jeu.
                     Il n’y a pas de conséquences à choisir le premier chemin, mais choisir le deuxième pour un nouveau
-                    joueur pourrait être plus désorientant qu’autre chose même s’il l’introduit tout de suite à toutes
+                    joueur pourrait être plus désorientant qu’autre chose, même s’il l’introduit tout de suite à toutes
-                    les mécaniques importantes. <strong>Ces pages sur l'histoire inclue aussi ce deuxième chemin, mais
+                    les mécaniques importantes. <strong>Ces pages sur l’histoire incluent aussi ce deuxième chemin, mais
-                        ne l'aborde que lorsqu'il arrive au moment important dans l'histoire principale.</strong></p>
+                        ne l’abordent que lorsqu’il arrive au moment important dans l’histoire principale.</strong></p>
 
-                <h3>Cliquez sur l'image pour sauter à la page concernant l'arc voulu!</h3>
+                <h3>Cliquez sur l’image pour sauter à la page concernant l’arc voulu!</h3>
                 <table>
                     <tr>
-                        <th>Arc 1: Éveil</th>
+                        <th>Arc 1 : Éveil</th>
-                        <th>Arc 2: Saga de la guerre intérieure</th>
+                        <th>Arc 2 : Saga de la guerre intérieure</th>
-                        <th>Arc 3: Saga de la nouvelle Guerre</th>
+                        <th>Arc 3 : Saga de la nouvelle Guerre</th>
-                        <th>Arc 4: Saga de la guerre du Néant</th>
+                        <th>Arc 4 : Saga de la guerre du Néant</th>
                     </tr>
                     <tr>
                         <td><a href="sousPageLore1.html"><img src="images/ImagesLea/awakeningTableau.jpg"
-                                    alt="Trois tenno prennent la pose"></a></td>
+                                    alt="Trois Tenno prennent la pose"></a></td>
 
                         <td><a href="sousPageLore2.html"><img src="images/ImagesLea/warWithinTableau.jpg"
                                     alt="Environnement de la forteresse Grineer"></a></td>
@@ -58,7 +65,7 @@
                                     alt="Image du Sentient Natah"></a></td>
 
                         <td><a href="sousPageLore4.html"><img src="images/ImagesLea/voidWarTableau.jpg"
-                                    alt="Image de Rhino et Mag dos à dos"></a></td>
+                                    alt="Image de Rhino et Mag, dos à dos"></a></td>
 
                     </tr>
                 </table>
@@ -67,8 +74,10 @@
     </main>
 
     <footer>
-        <p>© Léa Dezothez. Tout droits réservés. <br> Novembre 2025 <br> Page créée par Les Alt-F4</p>
+        <p>Copyright © 2025 Les Alt-F4. Tous droits réservés.</p>
-        <p id="updateDate">DATE_WEBSITE</p>
+        <p>Page créée par Léa Dezothez.</p>
+        <a href="credits.html">Crédits</a>
+
     </footer>
 </body>
 

www/missions.html

@@ -1,10 +1,16 @@
+<!-- /**********************************************************/
+/* Fichier : missions.html */
+/* Titre : Missions */
+/* Auteur : © Stanislas Royal, Cégep de Sherbrooke */
+/*************************************************************-->
+
 <!DOCTYPE html>
 <html lang="fr">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="images/F4vicon.ico">
+    <link rel="icon" href="images/f4vicon.ico">
     <link rel="stylesheet" href="css/style.css">
     <script src="js/script.js"></script>
     <title>Missions</title>
@@ -12,25 +18,152 @@
 
 <body>
     <nav>
-        <a href="index.html" class="boutonAccueil"><img src="images/LogoALT-F4_Nav.svg" alt="ALT-F4"></a>
+        <a href="index.html" class="boutonAccueil"><img src="images/logoALT-F4_Nav.svg" alt="ALT-F4"
+                id="logoAccueil"></a>
 
         <ul>
             <li><a href="aPropos.html">À propos</a></li>
-            <li><a href="team.html">L'équipe</a></li>
+            <li><a href="team.html">L’équipe </a></li>
             <li><a href="histoire.html">Histoire de DE</a></li>
             <li><a href="lore.html">Univers Sci-fi</a></li>
-            <li><a href="missions.html">Missions</a></li>
+            <li><a href="missions.html" class="active">Missions</a></li>
             <li><a href="armures.html">Armures</a></li>
         </ul>
     </nav>
 
     <main class="missions">
-        <p>Coming soon...</p>
+        <section id="missionsInfo">
+            <h1>Les missions</h1>
+            <p>Il existe plusieurs types de missions dans Warframe. Une des mécaniques du jeu, les missions, est très
+                importante par le fait qu’elles nous permettent de récolter des ressources pour créer de meilleures
+                armes, armures et compagnons.
+                Les styles de missions présentées seront les plus communes et celles que le joueur rencontrera le plus
+                lors de l’histoire et de l’exploration de la carte stellaire.</p>
+        </section>
+        <audio src="multimedia/we_All_Lift_Together_mPTCq3LiZSE.mp3" loop controls>Balise audio non
+            supportée</audio>
+        <section id="survie">
+            <article>
+                <h2>Survival</h2>
+                <p>Les missions de survie sont à durée illimitée, les joueurs reçoivent à chaque cinq minutes le choix
+                    de
+                    continuer ou d’évacuer. Ils reçoivent aussi une récompense basée sur le niveau de la difficulté.
+                    Lorsque les joueurs évacuent, ils n’ont pas besoin de se rendre à l’extraction, contrairement aux
+                    autres
+                    types de missions.</p>
+            </article>
+        </section>
+        <section id="assassination">
+            <article>
+                <h2>Assassination</h2>
+                <p>Les missions d’assassination présentent une victime à localiser et éliminer, il n’y a que très
+                    rarement
+                    d’autre objectif. Ceci représente donc des missions rapidement complétées.</p>
+            </article>
+        </section>
+        <section id="capture">
+            <article>
+                <h2>Capture</h2>
+                <p>Dans le même style que les missions d’Assassination, il faut localiser la cible et la diminuer ses
+                    points
+                    de vie avant de pouvoir la capturer</p>
+            </article>
+        </section>
+        <section id="defense">
+            <article>
+                <h2>Défense</h2>
+                <p>Une défense oblige les joueurs à protéger un objet sur la carte. Il y a généralement un bouclier pour
+                    aider les joueurs et la mission peut être chronométrée ou a plusieurs vagues, comme une mission de
+                    survie.
+                </p>
+            </article>
+        </section>
+        <section id="excavation">
+            <article>
+                <h2>Excavation</h2>
+                <p>Découlant un peu des missions de défenses, les joueurs doivent se rendre à un point d’excavation ou
+                    une
+                    perceuse minière se doit d’être alimentée en énergie et protéger le temps qu’elle fonctionne.</p>
+            </article>
+        </section>
+        <section id="extermination">
+            <article>
+                <h2>Extermination</h2>
+                <p>Généralement, pendant un conflit entre des factions du jeu, le joueur se doit de libérer l’espace du
+                    conflit au détriment des factions présentes. Il y a un minimum d’ennemi à éliminer pour compléter la
+                    mission, ensuite le joueur peut explorer la carte ou se rendre a l’extraction.</p>
+            </article>
+        </section>
+        <section id="hijack">
+            <article>
+                <h2>Hijack</h2>
+                <p>Une autre mission de défense, où l’objet est un véhicule avançant lentement vers l’objectif, les
+                    joueurs
+                    doivent défendre le véhicule. La mission est nommée hijack, puisqu’il s’agit normalement d’un
+                    véhicule
+                    appartenant à la faction de la carte.</p>
+            </article>
+        </section>
+        <section id="interception">
+            <article>
+                <h2>Interception</h2>
+                <p>Une mission basée sur «Capture the Flag», les joueurs doivent capturer des zones et les contrôler le
+                    plus longtemps possible. Il est possible de faire ce type de mission seul, si le joueur utilise un
+                    Warframe avec une grande mobilité.</p>
+            </article>
+        </section>
+        <section id="invasion">
+            <article>
+                <h2>Invasion</h2>
+                <p>Mission d’extermination contre une espèce extraterrestre mutante. Deux factions s’opposent pour le
+                    contrôle d’une planète, les joueurs choisissent leur camp!</p>
+            </article>
+        </section>
+        <section id="mobileDefense">
+            <article>
+                <h2>Mobile Défense</h2>
+                <p>Une mission où nous devons déplacer un objet pour pirater des consoles, généralement trois consoles,
+                    et
+                    le temps du piratage, nous défendons le terminal pour pouvoir procéder ensuite au suivant.</p>
+            </article>
+        </section>
+        <section id="sauvetage">
+            <article>
+                <h2>Rescue</h2>
+                <p>L’objectif, ici, est de localiser un prisonnier dans une base, de le libérer, pour ensuite l’escorter
+                    jusqu’à l’extraction</p>
+            </article>
+        </section>
+        <section id="sabotage">
+            <article>
+                <h2>Sabotage</h2>
+                <p>Mission où les joueurs font exploser des réacteurs pour détruire une base ennemie.</p>
+            </article>
+        </section>
+        <section id="autreMissions">
+            <article>
+                <h2>Autres missions</h2>
+                <div class="sidebyside">
+                    <div>
+                        <p>Il existe encore bien plus de style de missions, je vous invite à jouer pour les découvrir.
+                        </p>
+                        <p><a target="_blank" href="https://www.warframe.com/download">Page de téléchargement de
+                                Warframe</a>
+                        </p>
+                    </div>
+                    <iframe title="steam" src="https://store.steampowered.com/widget/230410/" frameborder="0"
+                        width="646" height="190"></iframe>
+
+                </div>
+            </article>
+        </section>
     </main>
 
     <footer>
-        <p>© Stanislas Royal. Tout droits réservés. <br> Novembre 2025 <br> Page créée par Les Alt-F4</p>
+        <p>Copyright © 2025 Les Alt-F4. Tous droits réservés.</p>
-        <p id="updateDate">DATE_WEBSITE</p>
+        <p>Page créée par Stanislas Royal.</p>
+        <a href="credits.html">Crédits</a>
+
     </footer>
 </body>