Merge pull request #18 from sadnxssdlm/addfix

fix css

Author: K-Smagghe

client/src/components/Cours/CartesCours.css

@@ -18,9 +18,20 @@
 }
 .cours {
   text-align: center;
-  color: #ffc219;
+  background-color: #ffcc00;
+  color: black;
+  text-align: center;
+  font-weight: bold;
+  display: block;
+  text-transform: uppercase;
+  border-radius: 8px;
 }
 
+.cours2 {
+  color: #f0f0f0;
+  text-align: center;
+  font-weight: bold;
+}
 .carte {
   background-color: #ffc219; /* fond clair, style « crème » */
   border-radius: 12px;
@@ -79,4 +90,18 @@
   .carte .contenu p {
     font-size: 1.1rem;
   }
+
+  .cours {
+    background-color: #ffcc00;
+    color: black;
+    text-align: center;
+    font-weight: bold;
+    padding: 8px 20px;
+    display: block;
+    font-size: 35px;
+    margin: 0 auto 30px;
+    text-transform: uppercase;
+    width: fit-content;
+    border-radius: 8px;
+  }
 }

client/src/components/Cours/Cours.tsx

@@ -17,6 +17,8 @@ function Cours() {
         <h1>
           Mission 1 <br /> Decouvre le code
         </h1>
+      </div>
+      <div className="cours2">
         <h2>Clique sur le poussin de ton choix.</h2>
       </div>
 

client/src/components/LevelContainer.tsx

@@ -116,7 +116,7 @@ const LevelContainer: React.FC = () => {
 
   return (
     <div className="level-container">
-      <h2 className="lvlcontainer-title">Mission 2: Code Blocks</h2>
+      <h2 className="lvlcontainer-title">Mission 3: Code Blocks</h2>
 
       <LevelSelector
         currentLevel={currentLevel}

client/src/components/Quiz.tsx

@@ -109,23 +109,31 @@ const Quiz = () => {
   }
 
   return (
-    <div className="border">
-      <div className="quiz">
-        <div className="countandTime">
-          <div className="questionNumber">
-            Question : {currentQuestion + 1} / {data.length}
+    <>
+      <div className="cours">
+        <h1>
+          Mission 2 <br /> Teste tes connaissances.
+        </h1>
+      </div>
+      <div className="border">
+        <div className="quiz">
+          <div className="countandTime">
+            <div className="questionNumber">
+              Question : {currentQuestion + 1} / {data.length}
+            </div>
+            <div className="timer">{timer}</div>
           </div>
-          <div className="timer">{timer}</div>
+          <Question
+            question={data[currentQuestion].question}
+            options={data[currentQuestion].options}
+            onAnswer={handleAnswer}
+            onNext={handleNext}
+            showNextButton={showNextButton}
+          />
         </div>
-        <Question
-          question={data[currentQuestion].question}
-          options={data[currentQuestion].options}
-          onAnswer={handleAnswer}
-          onNext={handleNext}
-          showNextButton={showNextButton}
-        />
       </div>
-    </div>
+      ;
+    </>
   );
 };