Sehun week2 task

recipe/recipe.css

@@ -149,27 +149,27 @@ hr{
 
 .nutrition-label {
     flex: 1 0 0;
-    color: var(--color-brown-800, #854632);
+    color: var(--color-stone-600, #5F564D);
     font-family: 'Outfit';
     font-size: var(--font-size-desktop-text-preset-4, 16px);
     font-style: normal;
-    font-weight: 700;
+    font-weight: 400;
     line-height: 150%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    align-self: stretch;
 }
 
 .nutrition-value {
     flex: 1 0 0;
-    color: var(--color-stone-600, #5F564D);
+    color: var(--color-brown-800, #854632);
     font-family: 'Outfit';
     font-size: var(--font-size-desktop-text-preset-4, 16px);
     font-style: normal;
-    font-weight: 400;
+    font-weight: 700;
     line-height: 150%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 12px;
-    align-self: stretch;
 }
 
 .iin_title1{
@@ -181,3 +181,6 @@ hr{
     font-weight: 700;
 }
 
+.text_color_instruction{
+    color: var(--color-stone-600, #5F564D);
+}

recipe/recipe.html

@@ -22,21 +22,21 @@
                 <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
                     <circle cx="2" cy="2" r="2" fill="#7A284E"/>
                 </svg>
-                <span><b>Total:</b> Approximately 10 minutes</span>
+                <span class = "text_color_instruction"><b>Total:</b> Approximately 10 minutes</span>
             </p>
 
             <p class="frame265">
                 <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
                     <circle cx="2" cy="2" r="2" fill="#7A284E"/>
                  </svg>
-                <span><b>Preparation:</b> 5 minutes</span>
+                <span class = "text_color_instruction"><b>Preparation:</b> 5 minutes</span>
             </p>
 
             <p class="frame265">
                 <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
                     <circle cx="2" cy="2" r="2" fill="#7A284E"/>
                 </svg>
-                <span><b>Cooking:</b> 5 minutes</span>
+                <span class = "text_color_instruction"><b>Cooking:</b> 5 minutes</span>
             </p>
         </div>
 
@@ -46,56 +46,56 @@
                 <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
                     <circle cx="2" cy="2" r="2" fill="#7A284E"/>
                 </svg>
-                <span>2-3 large eggs</span>
+                <span class = "text_color_instruction">2-3 large eggs</span>
             </p>
 
             <p class="frame265">
                 <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
                     <circle cx="2" cy="2" r="2" fill="#7A284E"/>
                 </svg>
-                <span>Salt, to taste</span>
+                <span class = "text_color_instruction">Salt, to taste</span>
             </p>
 
             <p class="frame265">
                 <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
                     <circle cx="2" cy="2" r="2" fill="#7A284E"/>
                 </svg>
-                <span>Pepper, to taste</span>
+                <span class = "text_color_instruction">Pepper, to taste</span>
             </p>
 
             <p class="frame265">
                 <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
                     <circle cx="2" cy="2" r="2" fill="#7A284E"/>
                 </svg>
-                <span>1 tablespoon of butter or oil</span>
+                <span class = "text_color_instruction">1 tablespoon of butter or oil</span>
             </p>
 
             <p class="frame265">
                 <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
                     <circle cx="2" cy="2" r="2" fill="#7A284E"/>
                 </svg>
-                <span>Optional fillings: cheese, diced vegetables, cooked meats, herbs</span>
+                <span class = "text_color_instruction">Optional fillings: cheese, diced vegetables, cooked meats, herbs</span>
             </p>
         </div>
 
         <div class="instructions">
             <p class="iin_title">Instructions</p>
             <p class="frame266">
-                <span class = "iin_title1">1.</span><span><b>Beat the eggs:</b> In a bowl, beat the eggs with a pinch of salt and pepper until they are well mixed. You can add a tablespoon of water or milk for a fluffier texture.</span>
+                <span class = "iin_title1">1.</span><span class = "text_color_instruction"><b>Beat the eggs:</b> In a bowl, beat the eggs with a pinch of salt and pepper until they are well mixed. You can add a tablespoon of water or milk for a fluffier texture.</span>
             </p>
             <p class="frame266">
-                <span class = "iin_title1">2.</span><span><b>Heat the pan:</b> Place a non-stick frying pan over medium heat and add butter or oil.</span>
+                <span class = "iin_title1">2.</span><span class = "text_color_instruction"><b>Heat the pan:</b> Place a non-stick frying pan over medium heat and add butter or oil.</span>
             <p class="frame266">
-                <span class = "iin_title1">3.</span><span><b>Cook the omelette:</b> Once the butter is melted and bubbling, pour in the eggs. Tilt the pan to ensure the eggs evenly coat the surface.</span>
+                <span class = "iin_title1">3.</span><span class = "text_color_instruction"><b>Cook the omelette:</b> Once the butter is melted and bubbling, pour in the eggs. Tilt the pan to ensure the eggs evenly coat the surface.</span>
             </p>
             <p class="frame266">
-            <span class = "iin_title1">4.</span><span><b>Add fillings (optional):</b> When the eggs begin to set at the edges but are still slightly runny in the middle, sprinkle your chosen fillings over one half of the omelette.</span>
+            <span class = "iin_title1">4.</span><span class = "text_color_instruction"><b>Add fillings (optional):</b> When the eggs begin to set at the edges but are still slightly runny in the middle, sprinkle your chosen fillings over one half of the omelette.</span>
             </p>
             <p class="frame266">
-                <span class = "iin_title1">5.</span><span><b>Fold and serve:</b> As the omelette continues to cook, carefully lift one edge and fold it over the fillings. Let it cook for another minute, then slide it onto a plate.</span>
+                <span class = "iin_title1">5.</span><span class = "text_color_instruction"><b>Fold and serve:</b> As the omelette continues to cook, carefully lift one edge and fold it over the fillings. Let it cook for another minute, then slide it onto a plate.</span>
             </p>
             <p class="frame266">
-                <span class = "iin_title1">6.</span><span><b>Enjoy:</b> Serve hot, with additional salt and pepper if needed.</span>
+                <span class = "iin_title1">6.</span><span class = "text_color_instruction"><b>Enjoy:</b> Serve hot, with additional salt and pepper if needed.</span>
             </p>
         </div>
         <hr/>