pricing section p2

Author: zJiaJun

starter/07-Omnifood-Desktop/css/general.css

@@ -83,6 +83,17 @@ body {
   display: grid;
   row-gap: 9.6rem;
   column-gap: 6.4rem;
+  /* margin-bottom: 9.6rem; */
+}
+
+/*
+.grid:last-child {
+  margin-bottom: 0;
+}
+*/
+
+.grid:not(:last-child) {
+  margin-bottom: 9.6rem;
 }
 
 .grid--2-cols {

starter/07-Omnifood-Desktop/css/style.css

@@ -352,6 +352,38 @@
   padding: 9.6rem 0;
 }
 
+.pricing-plan {
+  border-radius: 11px;
+  width: 75%;
+}
+
+.pricing-plan--starter {
+  justify-self: end;
+  border: 2px solid #fdf2e9;
+  padding: 4.6rem;
+}
+
+.pricing-plan--complete {
+  background-color: #fdf2e9;
+  padding: 4.8rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.pricing-plan--complete::after {
+  content: "Best value";
+  position: absolute;
+  top: 6%;
+  right: -18%;
+  text-transform: uppercase;
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: #333;
+  background-color: #ffd43b;
+  padding: 0.8rem 8rem;
+  transform: rotate(45deg);
+}
+
 .plan-header {
   text-align: center;
   margin-bottom: 4.8rem;

starter/07-Omnifood-Desktop/index.html

@@ -432,7 +432,7 @@ <h2 class="heading-secondary">
         </div>
 
         <div class="container grid grid--2-cols">
-          <div class="pricing-plan">
+          <div class="pricing-plan pricing-plan--starter">
             <header class="plan-header">
               <p class="plan-name">Starter</p>
               <p class="plan-price"><span>$</span>399</p>
@@ -445,18 +445,21 @@ <h2 class="heading-secondary">
               </li>
               <li class="list-item">
                 <ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
-                <span>Order times are between 11am and 9pm</span>
+                <span>Order from 11am and 9pm</span>
               </li>
               <li class="list-item">
                 <ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
                 <span>Delivery is free</span>
               </li>
+              <li class="list-item">
+                <ion-icon class="list-icon" name="close-outline"></ion-icon>
+              </li>
             </ul>
             <div class="plan-sing-up">
               <a href="#" class="btn btn--full">Start eating well</a>
             </div>
           </div>
-          <div class="pricing-plan">
+          <div class="pricing-plan pricing-plan--complete">
             <header class="plan-header">
               <p class="plan-name">Complete</p>
               <p class="plan-price"><span>$</span>649</p>
@@ -465,11 +468,11 @@ <h2 class="heading-secondary">
             <ul class="list">
               <li class="list-item">
                 <ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
-                <span>2 meals per day</span>
+                <span><strong>2 meals</strong> per day</span>
               </li>
               <li class="list-item">
                 <ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
-                <span>Order 24/7</span>
+                <span>Order <strong>24/7</strong></span>
               </li>
               <li class="list-item">
                 <ion-icon class="list-icon" name="checkmark-outline"></ion-icon>
@@ -485,6 +488,13 @@ <h2 class="heading-secondary">
             </div>
           </div>
         </div>
+
+        <div class="container grid grid--4-cols">
+          <div class="feature">1</div>
+          <div class="feature">2</div>
+          <div class="feature">3</div>
+          <div class="feature">4</div>
+        </div>
       </section>
     </main>
   </body>