Add Features Part.

Author: quechau

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

@@ -427,3 +427,31 @@
   text-align: center;
   margin-top: 2.8rem;
 }
+
+.plan-details {
+  font-size: 1.6rem;
+  line-height: 1.6;
+  text-align: center;
+}
+
+.feature-icon {
+  color: #e67e22;
+  height: 3.2rem;
+  width: 3.2rem;
+  background-color: #fdf2e9;
+  margin-bottom: 3.2rem;
+  padding: 1.6rem;
+  border-radius: 50%;
+}
+
+.feature-title {
+  font-size: 2.4rem;
+  color: #333;
+  font-weight: 700;
+  margin-bottom: 1.6rem;
+}
+
+.feature-text {
+  font-size: 1.8rem;
+  line-height: 1.8;
+}

starter/07-Omnifood-Desktop/content/index.html

@@ -431,7 +431,7 @@ <h2 class="heading-secondary">
           </h2>
         </div>
 
-        <div class="container grid grid--2-cols">
+        <div class="container grid grid--2-cols margin-bottom-md">
           <div class="pricing-plan pricing-plan--starter">
             <header class="plan-header">
               <p class="plan-name">Starter</p>
@@ -491,11 +491,48 @@ <h2 class="heading-secondary">
           </div>
         </div>
 
+        <div class="container grid">
+          <aside class="plan-details">
+            Prices include all applicable taxes. Users can cancel at any time.
+            Both plans include the following:
+          </aside>
+        </div>
+
         <div class="container grid grid--4-cols">
-          <div class="featured">Feature 1</div>
-          <div class="featured">Feature 2</div>
-          <div class="featured">Feature 3</div>
-          <div class="featured">Feature 4</div>
+          <div class="feature">
+            <ion-icon class="feature-icon" name="infinite-outline"></ion-icon>
+            <p class="feature-title">Never cook again!</p>
+            <p class="feature-text">
+              Our subscriptions cover 365 days per year, even including major
+              holidays.
+            </p>
+          </div>
+          <div class="feature">
+            <ion-icon class="feature-icon" name="nutrition-outline"></ion-icon>
+
+            <p class="feature-title">Local and organic</p>
+
+            <p class="feature-text">
+              Our cooks only use local, fresh, and organic products to prepare
+              your meals.
+            </p>
+          </div>
+          <div class="feature">
+            <ion-icon class="feature-icon" name="leaf-outline"></ion-icon>
+            <p class="feature-title">No waste</p>
+            <p class="feature-text">
+              All our partners only use reusable containers to package all your
+              meals.
+            </p>
+          </div>
+          <div class="feature">
+            <ion-icon class="feature-icon" name="pause-outline"></ion-icon>
+            <p class="feature-title">Pause anytime</p>
+            <p class="feature-text">
+              Going on vacation? Just pause your subscription, and we refund
+              unused days.
+            </p>
+          </div>
         </div>
       </section>
     </main>