Merge branch 'main' of https://gitea.zkd.ca/Dev_Web/web01

www/armures.html

@@ -28,9 +28,20 @@
         <header class="video-header">
             <video id="entete" src="./medias/mediasAndres/nokko.webm" autoplay muted loop></video>
             <h1 id="title">Warframes</h1>
+
+            <nav class="wf-nav">
+                <ul>
+                    <li><a href="#Ember">Ember</a></li>
+                    <li><a href="#Equinox">Equinox</a></li>
+                    <li><a href="#Frost">Frost</a></li>
+                    <li><a href="#Koumei">Koumei</a></li>
+                    <li><a href="#Sevagoth">Sevagoth</a></li>
+                    <li><a href="#Voruna">Voruna</a></li>
+                </ul>
+            </nav>
         </header>
 
-        <section class="perso">
+        <section id="Ember" class="perso">
 
             <video class="bg-video" autoplay muted loop playsinline>
                 <source src="./medias/mediasAndres/EmberVid.webm" type="video/webm">
@@ -48,22 +59,13 @@
                     incinération destructrice, laissant des cadavres calcinés et des cendres dériver dans sa mer
                     écarlate.
                 </p>
+                <br>
+                <br>
+                <h3>Habilités</h3>
+
                 <div class="habilites-row">
                     <div class="habilites">
-                        <h3>Habilités</h3>
+                        <img src="./images/ImagesAndres/Ember/habEmber.PNG" alt="hh">
-                        <p>Boule de feu : Lance un projectile enflammé qui embrase les ennemis au contact.</p>
-                        <p>Immolation : Protégez Ember avec une armure de flammes dont la combustion s’intensifie avec
-                            le
-                            temps,
-                            consommant de l’énergie une fois sa
-                            jauge pleine. Relancez le sort pour éteindre les flammes.
-                        </p>
-                        <p>Explosion de feu : Frappez le sol pour créer une vague de plasma incinérant qui repousse les
-                            ennemis
-                            et détruit leur armure.</p>
-                        <p>Inferno : Commandez une comète enflammée qui s'écrasera devant des braises, engloutissant les
-                            ennemis
-                            dans un feu capable de se propager dans leurs rangs.</p>
                     </div>
 
                     <div class="habilites-video">
@@ -73,7 +75,7 @@
             </div>
         </section>
 
-        <section class="perso">
+        <section id="Equinox" class="perso">
 
             <video class="bg-video" autoplay muted loop playsinline>
                 <source src="./medias/mediasAndres/equinox.webm" type="video/webm">
@@ -88,33 +90,22 @@
                     Alternant entre deux formes, elle peut renforcer les Tenno dans la lumière ou leur offrir un répit
                     réparateur dans l'obscurité.
                 </p>
-            </div>
+                <br>
-            <div class="habilites">
+                <br>
                 <h3>Habilités</h3>
-                <p>
+
-                    Métamorphose :Changez de forme, obtenant temporairement des bonus de bouclier et d'armure en forme
+                <div class="habilites-row">
-                    nocturne, ou des bonus de dégâts
+                    <div class="habilites">
-                    et de vitesse en forme diurne.morphosis: Switch forms, temporarily gaining bonus shields and armor
+                        <img src="./images/ImagesAndres/Equinox/equinoxHab.PNG" alt="hh">
-                    in Night-Form, or bonus damage and speed in Day-Form.
+                    </div>
-                </p>
+                    <div class="habilites-video">
-                <p>
+                        <video src="./medias/mediasAndres/Equinox.mp4" autoplay muted loop playsinline></video>
-                    Repos et Rage : Sous forme nocturne, les cibles sont endormies. Sous forme diurne, elles deviennent
+                    </div>
-                    plus vulnérables aux dégâts.
+                </div>
-                </p>
-                <p>
-                    Apaisement et provocation : En forme nocturne, réduit les dégâts infligés par les ennemis proches.
-                    En forme diurne,
-                    augmente la puissance des compétences des alliés proches.
-                </p>
-                <p>
-                    Guérison et Mutilation : En forme nocturne, les alliés sont soignés à chaque ennemi proche tué. En
-                    forme diurne, les ennemis proches sont
-                    saignés puis soumis à une vague de force tranchante.
-                </p>
             </div>
         </section>
 
-        <section class="perso">
+        <section id="Frost" class="perso">
 
             <video class="bg-video" autoplay muted loop playsinline>
                 <source src="./medias/mediasAndres/FrostVid.webm" type="video/webm">
@@ -129,29 +120,22 @@
                     répit
                     et réconfort à ses alliés.
                 </p>
-            </div>
+                <br>
-            <div class="habilites">
+                <br>
                 <h3>Habilités</h3>
-                <p>
+
-                    Gel : Une explosion d'énergie glaciale qui immobilise les cibles sur place.
+                <div class="habilites-row">
-                </p>
+                    <div class="habilites">
-                <p>
+                        <img src="./images/ImagesAndres/Frost/frostHab.PNG" alt="hh">
-                    Vague de glace : Envoie une vague de glace cristallisée et tranchante comme un rasoir vers un
+                    </div>
-                    ennemi, infligeant de lourds dégâts.
+                    <div class="habilites-video">
-                </p>
+                        <video src="./medias/mediasAndres/Frost.mp4" autoplay muted loop playsinline></video>
-                <p>
+                    </div>
-                    Boule à neige : Le gel capture instantanément toute vapeur et humidité ambiantes, créant une sphère
+                </div>
-                    protectrice d'invulnérabilité
-                    éphémère qui renforce son pouvoir protecteur.
-                </p>
-                <p>
-                    Avalanche : Invoque un glissement de terrain glacé et traître qui gèle et pulvérise instantanément
-                    tous les ennemis dans son rayon d'action.
-                </p>
             </div>
         </section>
 
-        <section class="perso">
+        <section id="Koumei" class="perso">
 
             <video class="bg-video" autoplay muted loop playsinline>
                 <source src="./medias/mediasAndres/KoumeiVid.webm" type="video/webm">
@@ -168,37 +152,22 @@
                     aussi soient suspendus aux ficelles des
                     Tenno.
                 </p>
-            </div>
+                <br>
-            <div class="habilites">
+                <br>
                 <h3>Habilités</h3>
-                <p>
+
-                    Kumihimo : Tissez les fils du destin. Les ennemis qui les touchent subissent une altération d'état
+                <div class="habilites-row">
-                    élémentaire aléatoire. Un triple six
+                    <div class="habilites">
-                    crée des fils infligeant une altération d'état élémentaire de chaque type.
+                        <img src="./images/ImagesAndres/Koumei/koumeiHab.PNG" alt="hh">
-                </p>
+                    </div>
-                <p>
+                    <div class="habilites-video">
-                    Omikuji : Koumei entrevoit un avenir prometteur et les étapes précises pour y parvenir. Relevez le
+                        <video src="./medias/mediasAndres/Koumei.mp4" autoplay muted loop playsinline></video>
-                    défi pour obtenir un Décret. Un
+                    </div>
-                    triple six vous octroie un décret sans défi.
+                </div>
-                </p>
-                <p>
-                    Omamori : Entourez-vous de charmes Omamori, chacun ayant une chance de transformer les attaques
-                    ennemies en soins plutôt qu'en dégâts.
-                    Le nombre de charmes est déterminé par le jet de dés de Koumei. Un triple six confère
-                    l'invulnérabilité pendant toute
-                    la durée de vos charmes Omamori.
-                </p>
-                <p>
-                    Bunraku : Maniez le destin de vos ennemis comme les fils d'une marionnette. Les dés de Koumei
-                    déterminent le nombre d’altérations
-                    d’état subies par les ennemis devant elle. Un triple six maximise le cumul des altérations d’état et
-                    étend le Bunraku
-                    aux ennemis situés derrière Koumei.
-                </p>
             </div>
         </section>
 
-        <section class="perso">
+        <section id="Rhino" class="perso">
 
             <video class="bg-video" autoplay muted loop playsinline>
                 <source src="./medias/mediasAndres/RhinoVid.webm" type="video/webm">
@@ -213,28 +182,22 @@
                     les tirs ennemis et de plier le champ de bataille à sa volonté par la seule force brute, il est
                     capable de tout contrôler.
                 </p>
-            </div>
+                <br>
-            <div class="habilites">
+                <br>
                 <h3>Habilités</h3>
-                <p>
+
-                    Charge du rhinocéros : Le rhinocéros charge vers une cible, frappant tous ceux qui se trouvent sur
+                <div class="habilites-row">
-                    son passage et empalant sa victime.
+                    <div class="habilites">
-                </p>
+                        <img src="./images/ImagesAndres/Rhino/rhinoHab.PNG" alt="hh">
-                <p>
+                    </div>
-                    Peau de fer : Rhino durcit sa peau, s'isolant ainsi de tout dommage.
+                    <div class="habilites-video">
-                </p>
+                        <video src="./medias/mediasAndres/Rhino.mp4" autoplay muted loop playsinline></video>
-                <p>
+                    </div>
-                    Rugissement : Confère à tous les Warframes proches des dégâts accrus pendant une courte durée.
+                </div>
-                </p>
-                <p>
-                    Piétinement du Rhino : Rhino piétine avec une force suffisante pour perturber le temps, faisant
-                    basculer les ennemis autour de lui
-                    dans un état de stase.
-                </p>
             </div>
         </section>
 
-        <section class="perso">
+        <section id="Sevagoth" class="perso">
 
             <video class="bg-video" autoplay muted loop playsinline>
                 <source src="./medias/mediasAndres/SevagothVid.webm" type="video/webm">
@@ -249,34 +212,22 @@
                     éclipse la lumière et moissonne
                     les âmes damnées pour assouvir sa soif insatiable de ténèbres.
                 </p>
-            </div>
+                <br>
-            <div class="habilites">
+                <br>
                 <h3>Habilités</h3>
-                <p>
+
-                    Moisson : L'Ombre de Sevagoth se répand, ravageant les ennemis sur son passage. Les survivants
+                <div class="habilites-row">
-                    subissent les effets de la Moisson de la
+                    <div class="habilites">
-                    Mort au fil du temps. Les âmes des morts remplissent le Puits de la Mort.
+                        <img src="./images/ImagesAndres/Sevagoth/sevagothHab.PNG" alt="hh">
-                </p>
+                    </div>
-                <p>
+                    <div class="habilites-video">
-                    Semer : Plantez une graine de mort sur les cibles proches pour drainer leur force vitale. Récoltez
+                        <video src="./medias/mediasAndres/Sevagoth.mp4" autoplay muted loop playsinline></video>
-                    ce qui a été semé pour faire
+                    </div>
-                    exploser les ennemis touchés, leur infligeant des dégâts de zone proportionnels à leur santé.
+                </div>
-                    Les âmes des morts remplissent le Puits de la Mort.
-                </p>
-                <p>
-                    Ténèbres : Invoque une onde de choc radiale qui emprisonne et ralentit les ennemis, aspirant leur
-                    force vitale pour le Puits de la Mort.
-                    Les alliés pris dans l'onde volent de la santé à chaque attaque.
-                </p>
-                <p>
-                    Ombre exaltée : Lorsque le Puits de la mort atteint plus de 75 %, la forme d’ombre de Sevagoth est
-                    prête à être libérée. Déchirez
-                    l'ennemi avec un arsenal de compétences axées sur le corps à corps.
-                </p>
             </div>
         </section>
 
-        <section class="perso">
+        <section id="Voruna" class="perso">
 
             <video class="bg-video" autoplay muted loop playsinline>
                 <source src="./medias/mediasAndres/VorunaVid.webm" type="video/webm">
@@ -295,37 +246,18 @@
                     lunaire, sur un sol écarlate,
                     tremblez devant son sourire monstrueux.
                 </p>
-            </div>
+                <br>
-            <div class="habilites">
+                <br>
                 <h3>Habilités</h3>
-                <p>
+
-                    Voile de Dynar : (TAP) Dynar rend Voruna invisible et augmente sa vitesse. L'invisibilité prend fin
+                <div class="habilites-row">
-                    lorsque Voruna attaque.
+                    <div class="habilites">
-                    Pendant un court instant, les attaques de mêlée infligent plus de dégâts critiques et de chances
+                        <img src="./images/ImagesAndres/Voruna/vorunaHab.PNG" alt="hh">
-                    d’appliquer un effet de statut,
+                    </div>
-                    et infligent Saignement. Tuer un ennemi au corps à corps pendant cette période prolonge l’effet.
+                    <div class="habilites-video">
-                </p>
+                        <video src="./medias/mediasAndres/Voruna.mp4" autoplay muted loop playsinline></video>
-                <p>
+                    </div>
-                    Crocs de Raksh : (TAP) Les crocs de Raksh lacèrent vos ennemis. 5 altérations d'état aléatoires sont
+                </div>
-                    appliquées à un ennemi, pouvant
-                    être cumulées jusqu'à 10 fois. À la mort de la cible, les altérations d'état se propagent aux
-                    ennemis proches.
-                </p>
-                <p>
-                    Chasse de Lycath : (TAP) Lycath chasse pour nourrir la meute. Les ennemis tués au corps à corps ont
-                    une chance de laisser tomber des
-                    orbes de santé, et ceux tués d'un tir à la tête, des orbes d'énergie. Augmentez la durée de la
-                    chasse de Lycath en
-                    éliminant des ennemis touchés par au moins 5 altérations d'état.
-                </p>
-                <p>
-                    La Descente d'Ulfrun : (TAP) Voruna se met à quatre pattes et prépare 5 charges brutales qui
-                    verrouillent les ennemis. Ulfrun, le loup
-                    le plus puissant, mène l'attaque tandis que Voruna fonce sur sa cible. La meute inflige des dégâts
-                    accrus aux cibles et aux ennemis
-                    proches touchés par des altérations d'état. Les attaques mortelles doublent les dégâts des charges
-                    restantes de Voruna.
-                </p>
             </div>
         </section>
     </main>

www/css/style.css

@@ -885,11 +885,53 @@ footer {
     display: block;
 }
 
+.armures .perso .habilites img {
+    width: 100%;
+    height: auto;
+    border-radius: 10px;
+    display: block;
+}
+
 .armures .habilites {
     position: relative;
     z-index: 15;
 }
 
+.armures .perso .habilites {
+    flex: 1;
+}
+
+.armures .perso .habilites-video {
+    flex: 1;
+}
+
+.armures .perso .habilites-row img,
+.armures .perso .habilites-row video {
+    width: 100%;
+    height: 500px;
+    object-fit: cover;
+    display: block;
+}
+
+.armures .wf-nav {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    top: 80px;
+    transform: translateX(-50%);
+    background: rgba(0, 0, 0, 0.4);
+    padding: 10px 25px;
+    border-radius: 10px;
+    backdrop-filter: blur(5px);
+    z-index: 999;
+}
+
+.armures .perso {
+    scroll-margin-top: 140px;
+}
+
+
+
 /****************************/
 /* PAGE: Crédits */
 /* AUTEUR: Jeremy */