how works section p1

Author: zJiaJun

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

@@ -14,8 +14,12 @@ Bold: 700
 - Line heights:
 Default: 1
 Small: 1.05
+Medium: 1.2
 Paragraph default: 1.6
 
+-- Letter spacing
+-0.5px
+0.75px
 
 --- 02 Colors System
 
@@ -85,15 +89,37 @@ body {
   grid-template-columns: repeat(4, 1fr);
 }
 
-.heading-primary {
-  font-size: 5.2rem;
+.heading-primary,
+.heading-secondary {
   font-weight: 700;
-  line-height: 1.05;
   color: #333;
   letter-spacing: -0.5px;
+}
+.heading-primary {
+  font-size: 5.2rem;
+  line-height: 1.05;
   margin-bottom: 3.2rem;
 }
 
+.heading-secondary {
+  font-size: 4.4rem;
+  line-height: 1.2;
+  margin-bottom: 9.6rem;
+}
+
+.subheading {
+  display: block;
+  font-size: 1.6rem;
+  font-weight: 500;
+  color: #cf711f;
+  text-transform: uppercase;
+  margin-bottom: 1.6rem;
+  letter-spacing: 0.75px;
+}
+
+.heading-terrtiary {
+}
+
 .btn:link,
 .btn:visited {
   display: inline-block;
@@ -255,5 +281,8 @@ body {
 
 .section-how {
   padding: 9.6rem 0;
-  background-color: orangered;
+}
+
+.step-img {
+  width: 50%;
 }

starter/07-Omnifood-Desktop/index.html

@@ -68,11 +68,73 @@ <h1 class="heading-primary">
       </section>
 
       <section class="section-how">
+        <div class="container">
+          <span class="subheading">How it works</span>
+          <h2 class="heading-secondary">
+            Your daily dose of health in 3 simple steps
+          </h2>
+        </div>
+
         <div class="container grid grid--2-cols">
-          <div>Test 1</div>
-          <div>Test 2</div>
-          <div>Test 3</div>
-          <div>Test 4</div>
+          <!-- step 01 -->
+          <div class="step-text-box">
+            <p class="step-number">01</p>
+            <h3 class="heading-terrtiary">
+              Tell us what you like (and what not)
+            </h3>
+            <p class="step-description">
+              Never again waste time thinking about what to eat! Omnifood AI
+              will create a 100% personalized weekly meal plan just for you. It
+              makes sure you get all the nutrients and vitamins you need, no
+              matter what diet you follow!
+            </p>
+          </div>
+          <div class="step-img-box">
+            <img
+              src="img/app/app-screen-1.png"
+              class="step-img"
+              alt="iPhone app
+            preferences selection screen"
+            />
+          </div>
+
+          <!-- step 02 -->
+          <div class="step-img-box">
+            <img
+              src="img/app/app-screen-2.png"
+              class="step-img"
+              alt="iPhone app
+            meal approving plan screen"
+            />
+          </div>
+          <div class="step-text-box">
+            <p class="step-number">02</p>
+            <h3 class="heading-terrtiary">Approve your weekly meal plan</h3>
+            <p class="step-description">
+              Once per week, approve the meal plan generated for you by Omnifood
+              AI. You can change ingredients, swap entire meals, or even add
+              your own recipes.
+            </p>
+          </div>
+          <!-- step 03 -->
+
+          <div class="step-text-box">
+            <p class="step-number">03</p>
+            <h3 class="heading-terrtiary">Receive meals at convenient time</h3>
+            <p class="step-description">
+              Best chefs in town will cook your selected meal every day, and we
+              will deliver it to your door whenever works best for you. You can
+              change delivery schedule and address daily!
+            </p>
+          </div>
+          <div class="step-img-box">
+            <img
+              src="img/app/app-screen-3.png"
+              class="step-img"
+              alt="iPhone app
+            delivery screen"
+            />
+          </div>
         </div>
       </section>
     </main>