Edit jeu.html

front/easterEggEtoile.html

@@ -17,20 +17,55 @@
         }
 
         h1 {
-            font-family: 'Manrope', extrabold;
+            font-family: 'Manrope', sans-serif;
+            font-weight: 400;
             font-size: 64px;
-            color: white;
+            color: #0E3B43;
-            text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
         }
 
         p {
-            font-size: 18px;
+            font-family: 'Manrope', sans-serif;
-            margin-bottom: 30px;
+            font-weight: 300;
+            font-size: 20px;
+            color: #0E3B43;
         }
 
         #santa {
             font-size: 72px;
             cursor: pointer;
+            color: darkred;
+        }
+
+        .arrow-container {
+            display: flex;
+        }
+
+        .arrow_right {
+            font-size: 36px;
+            animation: swing_arrow_right 1s infinite alternate;
+        }
+
+        .arrow_left {
+            font-size: 36px;
+            animation: swing_arrow_left 1s infinite alternate;
+        }
+
+        @keyframes swing_arrow_right {
+            0% {
+                transform: translateX(0);
+            }
+            100% {
+                transform: translateX(10px);
+            }
+        }
+
+        @keyframes swing_arrow_left {
+            0% {
+                transform: translateX(0);
+            }
+            100% {
+                transform: translateX(-10px);
+            }
         }
     </style>
 </head>
@@ -40,10 +75,13 @@
 <p>En cette période festive, pensons à la nature et à la durabilité.</p>
 <p>Faites un geste écologique pendant les fêtes ! 🌲</p>
 
-<div id="santa" onclick="showEasterEgg()">→ 🎅 ←</div>
+<div class="arrow-container">
-
+    <p class="arrow_right">→</p>
+    <div id="santa" onclick="showEasterEgg()">🎅</div>
+    <p class="arrow_left">←</p>
+</div>
 <script>
-  function showEasterEgg() {
+  const showEasterEgg = () => {
     alert("Easter Egg : C'est le moment de penser à des cadeaux éco-friendly !");
   }
 </script>

front/index.html

@@ -30,10 +30,11 @@
         <h2>distinguons la réalité<br>des idées reçues.</h2>
         <p id="sous-pres">
             Défiez les idées reçues sur l'écologie avec notre quiz captivant !
+            </br>
             Testez-vous dès maintenant pour une expérience éducative et
             amusante.
         </p>
-        <button id="btnjouer"><a href="./jouer.html"></a>Essayer ce jeu</button>
+        <button id="btnjouer"><a href="./jouer.html">Essayer ce jeu</a></button>
 </main>
 
 

front/jouer.html

@@ -45,11 +45,13 @@
         <section id="left">
             <img class="image" id="imgleft" src="./img/imgleft.png"
                  alt="imgleft">
+            <div class="text-overlay">Votre texte ici</div>
         </section>
 
         <section id="right">
             <img class="image" id="imgright" src="./img/imgright.webp"
                  alt="imgright">
+            <div class="text-overlay">Votre texte ici</div>
         </section>
     </div>
 
@@ -85,10 +87,10 @@
         leftSection.classList.remove('hide');
       });
 
-      let score = 20;
 
+      let score = 0;
       function augmenterCompteur() {
-        score += 5;
+        score++;
 
         if (score >= 5) {
           document.getElementById('star1').style.visibility = 'visible';

front/style/easter eggs

@@ -0,0 +1,4 @@
+Liste des easter eggs :
+
+- Joyeux noël écologique ! : Répondez juste à toutes les questions du quizz
+		et une nouvelle page s'ouvre.

front/style/jeu.css

@@ -93,14 +93,18 @@ section a {
     /*background-image: url('');*/
 }
 
-.answer {
+.text-overlay {
-    margin-top: 50vh;
+    position: absolute;
-    text-align: center;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 24px;
     font-family: 'inter', sans-serif;
     font-weight: 400;
-    font-size: 40px;
+    text-align: center;
-    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    padding: 10px;
     color: white;
+
 }
 
 .question {
@@ -108,8 +112,6 @@ section a {
     top: 0;
     left: 50%;
     transform: translateX(-50%);
-
-
     background-color: #FFF1DD;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
     border-radius: 10px;
@@ -122,14 +124,14 @@ section a {
 .question h2 {
     font-family: 'inter', sans-serif;
     font-weight: 400;
-    font-size: 40px;
+    font-size: 35px;
     color: black;
     margin: 0;
 }
 
 .question p {
     font-family: 'Manrope', sans-serif;
-    font-size: 20px;
+    font-size: 25px;
     color: black;
 }
 

front/style/main.css

@@ -17,7 +17,8 @@ main {
 }
 
 h1 {
-    font-family: 'Manrope', extrabold;
+    font-family: 'Manrope', sans-serif;
+    font-weight: 400;
     font-size: 64px;
     color: white;
     text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
@@ -25,14 +26,16 @@ h1 {
 }
 
 h2 {
-    font-family: 'Manrope', extrabold;
+    font-family: 'Manrope', sans-serif;
+    font-weight: 400;
     font-size: 48px;
     color: white;
     text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
 #sous-pres {
-    font-family: 'Manrope', bold;
+    font-family: 'Manrope', sans-serif;
+    font-weight: 300;
     font-size: 20px;
     color: white;
     text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
@@ -45,7 +48,7 @@ h2 {
     height: 59px;
     padding: 10px 20px;
     margin-top: 90px;
-    font-family: 'Manrope', bold;
+    font-family: 'Manrope', sans-serif;
     font-size: 20px;
     border: none;
     border-radius: 10px;