Merge pull request #20 from sadnxssdlm/fix/small-bugs

css title

Author: Tristanzubi

client/src/assets/Style/Quiz.css

@@ -114,6 +114,24 @@
   .resultimage {
     width: 150px;
   }
+
+  .title {
+    background-color: #ffcc00;
+    color: black;
+    text-align: center;
+    font-weight: bold;
+    padding: 0 20px;
+    display: block;
+    font-size: 1rem;
+    margin: 0 auto 30px;
+    text-transform: uppercase;
+    width: fit-content;
+    border-radius: 8px;
+    margin: 40px 20px;
+  }
+  title h1 {
+    padding: 10px;
+  }
 }
 
 @media (min-width: 768px) {
@@ -226,4 +244,25 @@
   .resultimage {
     width: 150px;
   }
+
+  .title {
+    background-color: #ffcc00;
+    color: black;
+    text-align: center;
+    font-weight: bold;
+    padding: 0 20px;
+    display: block;
+    font-size: 1rem;
+    margin: 0 auto 30px;
+    text-transform: uppercase;
+    width: fit-content;
+    border-radius: 8px;
+    margin-top: 100px;
+    margin-bottom: 60px;
+  }
+
+  .title h1 {
+    padding: 6px;
+    font-size: 2.1rem;
+  }
 }

client/src/components/Cours/CartesCours.css

@@ -25,6 +25,7 @@
   display: block;
   text-transform: uppercase;
   border-radius: 8px;
+  margin: 20px;
 }
 
 .cours2 {
@@ -69,8 +70,13 @@
     height: auto;
   }
 
+  .cours {
+    padding-top: 10px;
+  }
+
   .cours h1 {
-    font-size: 2.2rem;
+    font-size: 2rem;
+    padding: 5px;
   }
 
   .cours h2 {
@@ -96,12 +102,13 @@
     color: black;
     text-align: center;
     font-weight: bold;
-    padding: 8px 20px;
+    padding: 0 20px;
     display: block;
-    font-size: 35px;
+    font-size: 1rem;
     margin: 0 auto 30px;
     text-transform: uppercase;
     width: fit-content;
     border-radius: 8px;
+    margin-top: 30px;
   }
 }

client/src/components/Cours/Cours.tsx

@@ -14,9 +14,7 @@ function Cours() {
   return (
     <>
       <div className="cours">
-        <h1>
-          Mission 1 <br /> Decouvre le code
-        </h1>
+        <h1>Mission 1: Decouvre le code</h1>
       </div>
       <div className="cours2">
         <h2>Clique sur le poussin de ton choix.</h2>

client/src/components/Quiz.tsx

@@ -110,10 +110,8 @@ const Quiz = () => {
 
   return (
     <>
-      <div className="cours">
-        <h1>
-          Mission 2 <br /> Teste tes connaissances.
-        </h1>
+      <div className="title">
+        <h1>Mission 2: Teste tes connaissances</h1>
       </div>
       <div className="border">
         <div className="quiz">