Improve recipie pages

Improved the looks of the recipe pages prep time part by using the box modelling.
Meksandor · Sep 15, 2023 · daa7e46 · daa7e46
1 parent 665a15b
commit daa7e46
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>