menu section done

Rattrapages-jarrel-folly-adjon/03-Intégration d’une maquette web/index.html

@@ -117,7 +117,7 @@ <h2>
         Découvrez notre large sélection de boissons et desserts pour accompagner votre repas
       </p>
     </div>
-    <div class="Menu&commande">
+    <div class="MenuCommande">
       <div class="ProductDiv">
         <div class="Produit">
           <div class="ProductName">
@@ -131,7 +131,7 @@ <h2>
           <div class="description">
             <p>
               1 base · 4 ingrédients verts · Sauce
-Petit plus et pain offert 
+              Petit plus et pain offert 
             </p>
           </div>
         </div>
@@ -147,7 +147,7 @@ <h2>
           <div class="description">
             <p>
               1 base · 3 ingrédients verts & 1 bleu · Sauce
-Petit plus et pain offert 
+              Petit plus et pain offert 
             </p>
           </div>
         </div>
@@ -179,7 +179,7 @@ <h2>
           <div class="description">
             <p>
               1 base · 1 ingrédient verts & 3 bleus · Sauce
-Petit plus et pain offert 
+              Petit plus et pain offert 
             </p>
           </div>
         </div>
@@ -195,13 +195,27 @@ <h2>
           <div class="description">
             <p>
               1 base · 4 ingrédients bleus · Sauce
-Petit plus et pain offert 
+              Petit plus et pain offert 
             </p>
           </div>
         </div>
       </div>
       <div>
-
+        <div class="commande">
+          <h2 class="vert">
+          Force verte ?
+        </h2>
+        <h2 class="bleu">
+          Force bleue ?
+        </h2>
+        <p>
+          Ne perdez pas une seconde, faites votre choix
+          et venez chercher votre salade dans 20min !
+        </p>
+        <button>
+          Passer commande
+        </button>
+        </div>
       </div>
     </div>
   </section>

Rattrapages-jarrel-folly-adjon/03-Intégration d’une maquette web/input.scss

@@ -45,7 +45,6 @@
 }
 
 .welcome{
-  background-color: #B2D234;
   bottom: 45vh;
   margin-left: 25vw;
   margin-right: 25vw;
@@ -55,6 +54,7 @@
 
 
   h1{
+    text-align: center;
     font-size: 126px;
     margin: auto;
     color: #FFFF;
@@ -185,11 +185,13 @@
 .MenuSection{
 
   height: 140vh;
+  background: url("pattern.png");
   .MenuIntro{
     margin: auto;
     text-align: center;
     width: 60vw;
     h2{
+      padding-top: 10vh;
       margin-bottom: 3vh;
       font-size: 52px;
       font-family: 'Poppins', sans-serif;
@@ -201,6 +203,10 @@
       font-family: 'Poppins', sans-serif;
     }
   }
+
+  .MenuCommande{
+    display: flex;
+  }
 
   .Produit{
 
@@ -229,5 +235,44 @@
 
     }
   }
+  .vert{
+    transform: rotate(-9deg);
+    color: #B2D234;
+
+  }
+  .bleu{
+    transform: rotate(-9deg);
+    color: #60A0D8;
+  }
+
+  .commande{
+    margin-top: 20vh;
+    height: 70vh;
+    max-width: 31vw;
+
+    h2{
+      font-size: 64px;
+      font-family: 'Poppins', sans-serif;
+      font-style: italic;
+      margin-bottom: 10vh;
+    }
+    p{
+      margin-top: 10vh;
+      font-size: 18px;
+      font-family: 'Poppins', sans-serif;
+      text-align: center;
+
+    }
+    button{
+    margin-top: 20%;
+     width: 80%;
+     height: 8%;
+     border: none;
+     border-radius: 8px;
+     background: #B2D234;
+     color: #FFFF;
+     margin-left: 10%;
+    }
+  }
 }