meals section p2

Author: zJiaJun

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

@@ -41,6 +41,7 @@ Paragraph default: 1.6
 --- 06 Border Radius
 
 Default: 9px
+Medium: 11px
 
 --- 07 Whitespace
 
@@ -172,3 +173,7 @@ body {
 .margin-right-sm {
   margin-right: 1.6rem !important;
 }
+
+strong {
+  font-weight: 500;
+}

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

@@ -206,6 +206,42 @@
   padding: 9.6rem 0;
 }
 
+.meal {
+  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
+  border-radius: 11px;
+  overflow: hidden;
+}
+
+.meal-content {
+  padding: 3.2rem 4.8rem 4.8rem 4.8rem;
+}
+
+.meal-tags {
+  margin-bottom: 1.2rem;
+  display: flex;
+  gap: 0.4rem;
+}
+.tag {
+  display: inline-block;
+  padding: 0.4rem 0.8rem;
+  font-size: 1.2rem;
+  text-transform: uppercase;
+  color: #333;
+  border-radius: 100px;
+  font-weight: 600;
+}
+
+.tag--vegetarian {
+  background-color: #51cf66;
+}
+
+.tag--vegan {
+  background-color: #94d82d;
+}
+
+.tag--paleo {
+  background-color: #ffd43b;
+}
 .meal-title {
   font-size: 2.4rem;
   color: #333;
@@ -222,6 +258,15 @@
 
 .meal-attribute {
   font-size: 1.8rem;
+  display: flex;
+  align-items: center;
+  gap: 1.6rem;
+}
+
+.meal-icon {
+  height: 2.4rem;
+  width: 2.4rem;
+  color: #e67e22;
 }
 
 .meal-img {

starter/07-Omnifood-Desktop/index.html

@@ -183,24 +183,62 @@ <h2 class="heading-secondary">
               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 class="meal-content">
+              <div class="meal-tags">
+                <span class="tag tag--vegetarian">Vegetarian</span>
+              </div>
+              <p class="meal-title">Japanese Gyozas</p>
+              <ul class="metal-attributes">
+                <li class="metal-attribute">
+                  <ion-icon class="meal-icon" name="flame-outline"></ion-icon>
+                  <span><strong>650</strong> calories</span>
+                </li>
+                <li class="metal-attribute">
+                  <ion-icon
+                    class="meal-icon"
+                    name="restaurant-outline"
+                  ></ion-icon>
+                  <span>NutriScore &reg; <strong>74</strong></span>
+                </li>
+                <li class="metal-attribute">
+                  <ion-icon class="meal-icon" name="star-outline"></ion-icon
+                  ><span><strong>4.9</strong> rating (537)</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div class="meal">
+            <img
+              src="img/meals/meal-2.jpg"
+              class="meal-img"
+              alt="Avocado Salad"
+            />
+            <div class="meal-content">
+              <div class="meal-tags">
+                <span class="tag tag--vegan">Vegan</span>
+                <span class="tag tag--paleo">Paleo</span>
+              </div>
+              <p class="meal-title">Avocado Salad</p>
+              <ul class="metal-attributes">
+                <li class="metal-attribute">
+                  <ion-icon class="meal-icon" name="flame-outline"></ion-icon>
+                  <span><strong>400</strong> calories</span>
+                </li>
+                <li class="metal-attribute">
+                  <ion-icon
+                    class="meal-icon"
+                    name="restaurant-outline"
+                  ></ion-icon>
+                  <span>NutriScore &reg; <strong>92</strong></span>
+                </li>
+                <li class="metal-attribute">
+                  <ion-icon class="meal-icon" name="star-outline"></ion-icon
+                  ><span><strong>4.9</strong> rating (441)</span>
+                </li>
+              </ul>
+            </div>
           </div>
-          <div class="meal">Meals</div>
           <div class="list">List of diets</div>
         </div>
       </section>