Edit the positioning the images in recipe pages

I changed the way I position the iamges after the lessons of "The Box Model" and "Block and Inline".
Meksandor · Sep 14, 2023 · 429c304 · 429c304
1 parent d933b9f
commit 429c304
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 91 deletions.
diff --git a/recipes/asian_beef_slaw.html b/recipes/asian_beef_slaw.html
@@ -12,18 +12,16 @@
     <h1>Addictive Asian Beef Slaw</h1>
 
     <div class="row">
-        <div class="column">
-            <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fpublic-assets-ucg.meredithcorp.io%2Fccf50aab8cd6d8ebf291d09c4fde5bcd%2F3775205.jpg&q=60&c=sc&orient=true&poi=auto&h=512"
-                alt="food" style="width:100%">
-        </div>
-        <div class="column">
-            <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fimages.media-allrecipes.com%2Fuserphotos%2F8282516.jpg&q=60&c=sc&orient=true&poi=auto&h=512"
-                alt="food" style="width:100%">
-        </div>
-        <div class="column">
-            <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fimages.media-allrecipes.com%2Fuserphotos%2F3634119.jpg&q=60&c=sc&orient=true&poi=auto&h=512"
-                alt="food" style="width:100%">
-        </div>
+
+        <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fpublic-assets-ucg.meredithcorp.io%2Fccf50aab8cd6d8ebf291d09c4fde5bcd%2F3775205.jpg&q=60&c=sc&orient=true&poi=auto&h=512"
+            alt="food">
+
+        <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fimages.media-allrecipes.com%2Fuserphotos%2F8282516.jpg&q=60&c=sc&orient=true&poi=auto&h=512"
+            alt="food">
+
+        <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fimages.media-allrecipes.com%2Fuserphotos%2F3634119.jpg&q=60&c=sc&orient=true&poi=auto&h=512"
+            alt="food">
+
     </div>
 
     <div class="shortdesc">
@@ -43,7 +41,7 @@ <h5></h5>
         <p1>Servings: 4 servings</p1>
     </div>
 
-
+    <div id="ingre">
         <h3>Ingredients</h3>
         <ul>
             <li>1 tablespoon canola oil</li>
@@ -62,64 +60,64 @@ <h3>Ingredients</h3>
             <li>1 lime wedge</li>
 
         </ul>
-
+    </div>
 
-
-        <h3>Directions</h3>
 
-        <ol>
+    <h3>Directions</h3>
 
-            <li>
-                <h4>Step </h4>
-                <p1>Heat canola oil in a very large skillet or wok over medium heat. Add garlic and ginger; cook and
-                    stir
-                    until
-                    fragrant, 1 to 2 minutes. Add ground beef; cook and stir until browned and crumbly, 5 to 7 minutes.
-                </p1>
-            </li>
+    <ol>
 
+        <li>
+            <h4>Step </h4>
+            <p1>Heat canola oil in a very large skillet or wok over medium heat. Add garlic and ginger; cook and
+                stir
+                until
+                fragrant, 1 to 2 minutes. Add ground beef; cook and stir until browned and crumbly, 5 to 7 minutes.
+            </p1>
+        </li>
 
-            <li>
-                <h4>Step </h4>
-                <p1>Push ground beef to 1 side of skillet and add white cabbage, red cabbage, carrots, and red bell
-                    pepper.
-                    Mix
-                    vegetables with the beef and cook, stirring occasionally, until vegetables are just tender, 5 to 6
-                    minutes.</p1>
-            </li>
 
+        <li>
+            <h4>Step </h4>
+            <p1>Push ground beef to 1 side of skillet and add white cabbage, red cabbage, carrots, and red bell
+                pepper.
+                Mix
+                vegetables with the beef and cook, stirring occasionally, until vegetables are just tender, 5 to 6
+                minutes.</p1>
+        </li>
 
-            <li>
-                <h4>Step </h4>
-                <p1>Stir soy sauce, sesame oil, and hot sauce into beef-vegetable mixture until well mixed; season with
-                    salt
-                    and
-                    pepper. Serve slaw with fresh cilantro, lime wedge, and more hot sauce.</p1>
-            </li>
 
+        <li>
+            <h4>Step </h4>
+            <p1>Stir soy sauce, sesame oil, and hot sauce into beef-vegetable mixture until well mixed; season with
+                salt
+                and
+                pepper. Serve slaw with fresh cilantro, lime wedge, and more hot sauce.</p1>
+        </li>
 
-        </ol>
-
 
-
-        <h3>Nutrition Facts</h3>
-        <p1>Per Serving:</p1>
-        <ul>
-            <li>451 calories</li>
-            <li>total fat 29g</li>
-            <li>saturated fat 8g</li>
-            <li>cholesterol 70mg</li>
-            <li>sodium 1254mg </li>
-            <li>total carbohydrate 27g</li>
-            <li>dietary fiber 9g</li>
-            <li>total sugars 13g </li>
-            <li>protein 25g </li>
-            <li>vitamin c 150mg</li>
-            <li>calcium 153mg</li>
-            <li>iron 4mg</li>
-            <li>potassium 999mg</li>
-        </ul>
-
+    </ol>
+
+
+
+    <h3>Nutrition Facts</h3>
+    <p1>Per Serving:</p1>
+    <ul>
+        <li>451 calories</li>
+        <li>total fat 29g</li>
+        <li>saturated fat 8g</li>
+        <li>cholesterol 70mg</li>
+        <li>sodium 1254mg </li>
+        <li>total carbohydrate 27g</li>
+        <li>dietary fiber 9g</li>
+        <li>total sugars 13g </li>
+        <li>protein 25g </li>
+        <li>vitamin c 150mg</li>
+        <li>calcium 153mg</li>
+        <li>iron 4mg</li>
+        <li>potassium 999mg</li>
+    </ul>
+
 
 </body>
 

diff --git a/recipes/oyakodon.html b/recipes/oyakodon.html
@@ -11,14 +11,16 @@
 
     <h1>Oyakodon (Japanese Chicken and Egg Rice Bowl)</h1>
 
-    <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fpublic-assets-ucg.meredithcorp.io%2Fbfa3c8d2e08f9b14b3792117668adc9c%2F6502146.jpg&q=60&c=sc&orient=true&poi=auto&h=512"
-        height="183">
-    <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fimages.media-allrecipes.com%2Fuserphotos%2F5645558.jpg&q=60&c=sc&orient=true&poi=auto&h=512"
-        height="183">
-    <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fpublic-assets-ucg.meredithcorp.io%2F8c872874bdbe675afb33a3cfb49ab5b2%2F3963616.jpg&q=60&c=sc&orient=true&poi=auto&h=512"
-        height="183">
-    <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fpublic-assets-ucg.meredithcorp.io%2F024b7f9dd0fd8891e255d71fefb32730%2F3760598.jpg&q=60&c=sc&orient=true&poi=auto&h=512"
-        height="183">
+    <div class="row">
+        <img
+            src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fpublic-assets-ucg.meredithcorp.io%2Fbfa3c8d2e08f9b14b3792117668adc9c%2F6502146.jpg&q=60&c=sc&orient=true&poi=auto&h=512">
+        <img
+            src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fimages.media-allrecipes.com%2Fuserphotos%2F5645558.jpg&q=60&c=sc&orient=true&poi=auto&h=512">
+        <img
+            src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fpublic-assets-ucg.meredithcorp.io%2F8c872874bdbe675afb33a3cfb49ab5b2%2F3963616.jpg&q=60&c=sc&orient=true&poi=auto&h=512">
+        <img
+            src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fpublic-assets-ucg.meredithcorp.io%2F024b7f9dd0fd8891e255d71fefb32730%2F3760598.jpg&q=60&c=sc&orient=true&poi=auto&h=512">
+    </div>
 
     <h5></h5>
     <p1>Oyakodon is a delicious traditional Japanese meal consisting of chicken sautéed and then cooked in a Japanese
@@ -53,21 +55,24 @@ <h3>Directions</h3>
 
         <li>
             <h4>Step </h4>
-            <p1>Heat oil in a large skillet over medium heat. Add chicken and cook until beginning to brown, about 5 minutes. Add onion; cook and stir until onion is translucent, about 5 minutes.</p1>
+            <p1>Heat oil in a large skillet over medium heat. Add chicken and cook until beginning to brown, about 5
+                minutes. Add onion; cook and stir until onion is translucent, about 5 minutes.</p1>
         </li>
 
 
         <li>
             <h4>Step </h4>
-            <p1>Pour in stock, then whisk in soy sauce, mirin, and brown sugar; stir until sugar dissolves. Bring to a boil, then lower heat and simmer until slightly reduced, about 10 minutes.
+            <p1>Pour in stock, then whisk in soy sauce, mirin, and brown sugar; stir until sugar dissolves. Bring to a
+                boil, then lower heat and simmer until slightly reduced, about 10 minutes.
 
             </p1>
         </li>
 
 
         <li>
             <h4>Step </h4>
-            <p1>Whisk eggs in a bowl until well-beaten, then pour into the hot stock mixture. Cover the skillet, reduce the heat, and steam until egg is cooked, about 5 minutes. Remove from the heat.</p1>
+            <p1>Whisk eggs in a bowl until well-beaten, then pour into the hot stock mixture. Cover the skillet, reduce
+                the heat, and steam until egg is cooked, about 5 minutes. Remove from the heat.</p1>
         </li>
 
         <li>

diff --git a/recipes/style1.css b/recipes/style1.css
@@ -10,14 +10,9 @@ h1 {
     font-family: Verdana, Geneva, Tahoma, sans-serif;
 }
 
-.row {
-    display: flex;
-}
-
-.column {
-    /*Align Images Side By Side*/
-    flex: 33.33%;
-    padding: 5px;
+.row, img{
+    display: inline;
+    width: 32%;
 }
 
 .timereq {
@@ -26,5 +21,5 @@ h1 {
 
 ul, ol {
     text-align: center;
-list-style-type: none;
+    list-style-type: none;
 }
diff --git a/recipes/style2.css b/recipes/style2.css
@@ -13,7 +13,10 @@ h1 {
     font-family: Verdana, Geneva, Tahoma, sans-serif;
 }
 
-
+.row , img{
+    display: inline;
+    width: 24%;
+}
 
 
 

diff --git a/recipes/style3.css b/recipes/style3.css
@@ -14,7 +14,10 @@ h1 {
 }
 
 
-
+.row,img {
+    display: inline;
+    width: 24%;
+}
 
 
 

diff --git a/recipes/summer_fruit_salad.html b/recipes/summer_fruit_salad.html
@@ -11,14 +11,16 @@
 
     <h1>Perfect Summer Fruit Salad</h1>
 
-    <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fpublic-assets.meredithcorp.io%2F6e71582561acb8d131eec829b05d657f%2F164531386120220219_113205_HDR.jpg&q=60&c=sc&orient=true&poi=auto&h=512"
-        height="153">
-    <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fimages.media-allrecipes.com%2Fuserphotos%2F8323556.jpg&q=60&c=sc&orient=true&poi=auto&h=512"
-        height="153">
-    <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fpublic-assets.meredithcorp.io%2F94aba1095e5bf4ca757db483c3914887%2F1690413524912IMG_20230704_073524.jpg&q=60&c=sc&orient=true&poi=auto&h=512"
-        height="153">
-    <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fimages.media-allrecipes.com%2Fuserphotos%2F8812266.jpg&q=60&c=sc&orient=true&poi=auto&h=512"
-        height="153">
+    <div class="row">
+        <img
+            src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fpublic-assets.meredithcorp.io%2F6e71582561acb8d131eec829b05d657f%2F164531386120220219_113205_HDR.jpg&q=60&c=sc&orient=true&poi=auto&h=512">
+        <img
+            src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fimages.media-allrecipes.com%2Fuserphotos%2F8323556.jpg&q=60&c=sc&orient=true&poi=auto&h=512">
+        <img
+            src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fpublic-assets.meredithcorp.io%2F94aba1095e5bf4ca757db483c3914887%2F1690413524912IMG_20230704_073524.jpg&q=60&c=sc&orient=true&poi=auto&h=512">
+        <img
+            src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fimages.media-allrecipes.com%2Fuserphotos%2F8812266.jpg&q=60&c=sc&orient=true&poi=auto&h=512">
+    </div>
 
     <h5></h5>
     <p1>This fruit salad is perfect for a backyard bbq or any occasion. There are never leftovers! This is one of my

diff --git a/style.css b/style.css
@@ -21,4 +21,8 @@ ul {
     text-align: center;
     font-size: 20px;
     font-family: Arial, Helvetica, sans-serif;
+}
+
+li {
+    margin: 20px;
 }