section-7: Features

Author: owen-webb

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

@@ -338,6 +338,12 @@
 
 /*** PRICING ***/
 
+.plan-details {
+  font-size: 1.6rem;
+  line-height: 1.6;
+  text-align: center;
+}
+
 .plan-header {
   margin-bottom: 4.8rem;
   text-align: center;
@@ -410,3 +416,27 @@
 .section-pricing {
   padding: 9.6rem 0;
 }
+
+/*** FEATURE ***/
+
+.feature-icon {
+  background-color: #fdf2e9;
+  border-radius: 50%;
+  color: #e67e22;
+  height: 3.2rem;
+  margin-bottom: 3.2rem;
+  padding: 1.6rem;
+  width: 3.2rem;
+}
+
+.feature-text {
+  font-size: 1.8rem;
+  line-height: 1.8;
+}
+
+.feature-title {
+  color: #333;
+  font-size: 2.4rem;
+  font-weight: 700;
+  margin-bottom: 1.6rem;
+}

starter/07-Omnifood-Desktop/index.html

@@ -341,7 +341,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>
@@ -404,11 +404,54 @@ <h2 class="heading-secondary">
           </div>
         </div>
 
+        <div class="container grid">
+          <aside class="plan-details">
+            Prices include all applicable taxes. You can cancel at any time. Both plans include the following:
+          </aside>
+        </div>
+
+        <!-- FEATURES -->
+
         <div class="container grid grid--4-cols">
-          <div></div>
-          <div></div>
-          <div></div>
-          <div></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>