From daa7e46900c4bb0e5172560d786bb8665c6a4f6b Mon Sep 17 00:00:00 2001
From: Meksandor <84075199+Meksandor@users.noreply.github.com>
Date: Fri, 15 Sep 2023 15:20:58 +0300
Subject: [PATCH] Improve recipie pages

Improved the looks of the recipe pages prep time part by using the box modelling.
---
 recipes/asian_beef_slaw.html    | 16 ++++++++--------
 recipes/oyakodon.html           | 18 ++++++++++--------
 recipes/style1.css              | 12 ++++++++++++
 recipes/style2.css              | 12 ++++++++++++
 recipes/style3.css              | 12 ++++++++++++
 recipes/summer_fruit_salad.html | 22 ++++++++++++----------
 6 files changed, 66 insertions(+), 26 deletions(-)

diff --git a/recipes/asian_beef_slaw.html b/recipes/asian_beef_slaw.html
index 9275cf8..18ab50b 100644
--- a/recipes/asian_beef_slaw.html
+++ b/recipes/asian_beef_slaw.html
@@ -33,14 +33,14 @@ <h1>Addictive Asian Beef Slaw</h1>
         </div>
 
         <div class="timereq">
-            <h5></h5>
-            <p1>Prep Time: 20 mins</p1>
-            <h5></h5>
-            <p1>Cook Time: 11 mins</p1>
-            <h5></h5>
-            <p1>Total Time: 31 mins</p1>
-            <h5></h5>
-            <p1>Servings: 4 servings</p1>
+
+            <p1><span class="timename">Prep Time</span> 20 mins</p1>
+
+            <p1><span class="timename">Cook Time</span> 11 mins</p1>
+
+            <p1><span class="timename">Total Time</span> 31 mins</p1>
+
+            <p1><span class="timename">Servings</span> 4 servings</p1>
         </div>
 
         <div id="ingre">
diff --git a/recipes/oyakodon.html b/recipes/oyakodon.html
index 1432ae5..4498358 100644
--- a/recipes/oyakodon.html
+++ b/recipes/oyakodon.html
@@ -28,14 +28,16 @@ <h5></h5>
         broth, and then finished with egg and served over rice. It's really easy, filling, and delicious.</p1>
 
 
-    <h5></h5>
-    <p1>Prep Time: 10 mins</p1>
-    <h5></h5>
-    <p1>Cook Time: 30 mins</p1>
-    <h5></h5>
-    <p1>Total Time: 40 mins</p1>
-    <h5></h5>
-    <p1>Servings: 4 servings</p1>
+        <div class="timereq">
+
+            <p1><span class="timename">Prep Time</span> 10 mins</p1>
+
+            <p1><span class="timename">Cook Time</span> 30 mins</p1>
+
+            <p1><span class="timename">Total Time</span> 40 mins</p1>
+
+            <p1><span class="timename">Servings</span> 4 servings</p1>
+        </div>
 
     <h3>Ingredients</h3>
     <ul>
diff --git a/recipes/style1.css b/recipes/style1.css
index d7293db..785fae7 100644
--- a/recipes/style1.css
+++ b/recipes/style1.css
@@ -34,6 +34,18 @@ ol {
     list-style-type: none;
 }
 
+.timereq p1 {
+    display: inline-block;
+    margin: 10px auto 0px auto;
+    padding: 0px 10px 10px 10px;
+    background-color: #DAC0A3;
+}
+
+.timereq .timename {
+    display: block;
+    margin: 10px auto;
+}
+
 .nutri li {
     display: inline-block;
     background-color: aliceblue;
diff --git a/recipes/style2.css b/recipes/style2.css
index 5b16919..11743a5 100644
--- a/recipes/style2.css
+++ b/recipes/style2.css
@@ -17,6 +17,18 @@ the whole body there is no extra code required*/
     margin: 20px;
 }
 
+.timereq p1 {
+    display: inline-block;
+    margin: 10px auto 0px auto;
+    padding: 0px 10px 10px 10px;
+    background-color: #DAC0A3;
+}
+
+.timereq .timename {
+    display: block;
+    margin: 10px auto;
+}
+
 h1 {
     font-family: Verdana, Geneva, Tahoma, sans-serif;
 }
diff --git a/recipes/style3.css b/recipes/style3.css
index 282ae50..ed29009 100644
--- a/recipes/style3.css
+++ b/recipes/style3.css
@@ -17,6 +17,18 @@ the whole body there is no extra code required*/
     margin: 20px;
 }
 
+.timereq p1 {
+    display: inline-block;
+    margin: 10px auto 0px auto;
+    padding: 0px 10px 10px 10px;
+    background-color: #DAC0A3;
+}
+
+.timereq .timename {
+    display: block;
+    margin: 10px auto;
+}
+
 h1 {
     text-align: center;
     font-family: Verdana, Geneva, Tahoma, sans-serif;
diff --git a/recipes/summer_fruit_salad.html b/recipes/summer_fruit_salad.html
index 4c48dd2..d5b284c 100644
--- a/recipes/summer_fruit_salad.html
+++ b/recipes/summer_fruit_salad.html
@@ -30,16 +30,18 @@ <h5></h5>
             can let it soak in its juices. I prefer 3 to 4 hours in the refrigerator before I serve it.</p1>
 
 
-        <h5></h5>
-        <p1>Prep Time: 25 mins</p1>
-        <h5></h5>
-        <p1>Cook Time: 5 mins</p1>
-        <h5></h5>
-        <p1>Additional Time: 3 hrs</p1>
-        <h5></h5>
-        <p1>Total Time: 3 hrs 30 mins</p1>
-        <h5></h5>
-        <p1>Servings: 10 servings</p1>
+        <div class="timereq">
+
+            <p1><span class="timename">Prep Time</span> 25 mins</p1>
+
+            <p1><span class="timename">Cook Time</span> 5 mins</p1>
+
+            <p1><span class="timename">Total Time</span> 3 hrs 30 mins</p1>
+
+            <p1><span class="timename">Total Time</span> 3 hrs 30 mins</p1>
+
+            <p1><span class="timename">Servings</span> 10 servings</p1>
+        </div>
 
         <h3>Ingredients</h3>