meals section p1

zJiaJun · zJiaJun · commit 3752069a9c82 · 2024-12-30T11:23:56.000+08:00
diff --git a/starter/07-Omnifood-Desktop/css/style.css b/starter/07-Omnifood-Desktop/css/style.css
@@ -197,3 +197,33 @@
 .step-img {
   width: 35%;
 }
+
+/**************************/
+/* Meals Section */
+/**************************/
+
+.section-meals {
+  padding: 9.6rem 0;
+}
+
+.meal-title {
+  font-size: 2.4rem;
+  color: #333;
+  font-weight: 600;
+  margin-bottom: 3.2rem;
+}
+
+.meal-attributes {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.meal-attribute {
+  font-size: 1.8rem;
+}
+
+.meal-img {
+  width: 100%;
+}
diff --git a/starter/07-Omnifood-Desktop/index.html b/starter/07-Omnifood-Desktop/index.html
@@ -12,6 +12,16 @@
       href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
       rel="stylesheet"
     />
+
+    <script
+      type="module"
+      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
+    ></script>
+    <script
+      nomodule
+      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"
+    ></script>
+
     <title>Omnifood</title>
   </head>
   <body>
@@ -157,6 +167,43 @@ <h3 class="heading-terrtiary">Receive meals at convenient time</h3>
           </div>
         </div>
       </section>
+
+      <section class="section-meals">
+        <div class="container">
+          <span class="subheading">Meals</span>
+          <h2 class="heading-secondary">
+            Omnifood AI chooses from 5,000+ recipes
+          </h2>
+        </div>
+
+        <div class="container grid grid--3-cols">
+          <div class="meal">
+            <img
+              src="img/meals/meal-1.jpg"
+              class="meal-img"
+              alt="Japanese Gyozas"
+            />
+            <span class="tag">Vegetarian</span>
+            <p class=" ">Japanese Gyozas</p>
+            <ul class="metal-attributes">
+              <li class="metal-attribute">
+                <ion-icon name="flame-outline"></ion-icon>
+                <span>650 calories</span>
+              </li>
+              <li class="metal-attribute">
+                <ion-icon name="restaurant-outline"></ion-icon>
+                <span>NutriScore &reg; 74</span>
+              </li>
+              <li class="metal-attribute">
+                <ion-icon name="star-outline"></ion-icon
+                ><span>4.9 rating (537)</span>
+              </li>
+            </ul>
+          </div>
+          <div class="meal">Meals</div>
+          <div class="list">List of diets</div>
+        </div>
+      </section>
     </main>
   </body>
 </html>
