From ee8dbf49373f5e089d6c2e2e73b29de21371b53f Mon Sep 17 00:00:00 2001 From: Gengsu07 Date: Sat, 16 Nov 2024 22:21:58 +0700 Subject: [PATCH 1/2] solved lab-css-recipe-apple-pie webpage by sugeng wahyudi --- apple-pie/index.html | 72 +++++++++++++++++++++++++++++----- apple-pie/styles/style.css | 80 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 142 insertions(+), 10 deletions(-) diff --git a/apple-pie/index.html b/apple-pie/index.html index 970b1de..dba69c2 100644 --- a/apple-pie/index.html +++ b/apple-pie/index.html @@ -5,17 +5,69 @@ Apple Pie Recipe + - Apple Pies This was my grandmother's apple pie recipe. I have never seen another one quite like it. It will always - be my favorite and has won me several first place prizes in local competitions. I hope it becomes one of your - favorites as well! Ingredients 1 recipe pastry for a 9 inch double crust pie 1/2 cup unsalted butter 3 tablespoons - all-purpose flour 1/4 cup water 3 tablespoons all-purpose flour 1/4 cup water 1/2 cup white sugar 1/2 cup packed - brown sugar 8 Granny Smith apples - peeled, cored and sliced Directions Preheat oven to 425 degrees F (220 degrees - C). Melt the butter in a saucepan. Stir in flour to form a paste. Add water, white sugar and brown sugar, and bring - to a boil. Reduce temperature and let simmer. Place the bottom crust in your pan. Fill with apples, mounded - slightly. Cover with a lattice work crust. Gently pour the sugar and butter liquid over the crust. Pour slowly so - that it does not run off. Bake 15 minutes in the preheated oven. Reduce the temperature to 350 degrees F (175 - degrees C). Continue baking for 35 to 45 minutes, until apples are soft. +
+ +

Apple Pie

+
+
+
+

+ This was my grandmother's apple pie recipe. I have never seen another + one quite like it. It will always be my favorite and has won me + several first place prizes in local competitions. I hope it becomes + one of your favorites as well! +

+ +
+
+
+

Ingredients

+
    +
  • 1 recipe pastry for a 9 inch double crust pie
    • +
  • 1/2 cup
    • +
  • unsalted butter 3 tablespoons all-purpose flour
    • +
  • 1/4 cup water 3 tablespoons
    • +
  • all-purpose flour 1/4 cup water 1/2 cup white sugar
    • +
  • 1/2 cup packed brown ugar
    • +
  • 8 Granny Smith apples - peeled, cored and sliced
    • +
+ +
+ +
+
+

Directions

+
+
+

+ 1) Preheat oven to 425 degrees F (220 degrees C). Melt the butter in a + saucepan. Stir in flour to form a paste. Add water, white sugar and + brown sugar, and bring to a boil. Reduce temperature and let simmer. +

+

+ 2) Place the bottom crust in your pan. Fill with apples, mounded + slightly. Cover with a lattice work crust. Gently pour the sugar and + butter liquid over the crust. Pour slowly so that it does not run off. +

+

+ 3) Bake 15 minutes in the preheated oven. Reduce the temperature to + 350 degrees F (175 degrees C). Continue baking for 35 to 45 minutes, + until apples are soft. +

+
+
diff --git a/apple-pie/styles/style.css b/apple-pie/styles/style.css index e69de29..57eb1c4 100644 --- a/apple-pie/styles/style.css +++ b/apple-pie/styles/style.css @@ -0,0 +1,80 @@ +* { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-size: medium; + letter-spacing: 1px; + font-weight: 100; + margin: 0px; +} +.header { + position: relative; +} +.menu-img { + max-height: 45vh; + object-fit: cover; +} + +.menu-title { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + text-align: center; + font-size: 48px; + font-weight: 200; + color: #ffffff; + z-index: 1; +} + +.content { + margin: 50px; + padding: 20px; + text-align: justify; +} +.menu-description { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 30px; +} +.img-recipe, +.img-cookinginfo { + max-width: 50vw; +} + +.menu-separator { + border: 1px solid #aba2a2; + margin: 30px 0px; +} + +h3 { + font-size: 16px; + font-weight: 500; + margin-bottom: 20px; +} +ul { + list-style: none; + padding-left: 5px; +} +ul li::before { + content: "- "; + margin-right: 2px; +} +ul li { + margin: 7px 0px; +} +.menu-ingredients { +} +.img-cookinginfo { + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%); + margin-top: 30px; +} + +.directions-content p { + margin: 10px 0px; +} From 93759efce6dc9b2bbb92b685412ca30aa4e866a5 Mon Sep 17 00:00:00 2001 From: Gengsu07 Date: Sat, 16 Nov 2024 23:42:27 +0700 Subject: [PATCH 2/2] add max width for container, so if screen =>1024 will be centered with margin left right auto --- apple-pie/index.html | 19 +++++++----- apple-pie/styles/style.css | 63 ++++++++++++++++++++++++++++++++++++-- 2 files changed, 71 insertions(+), 11 deletions(-) diff --git a/apple-pie/index.html b/apple-pie/index.html index dba69c2..6bb12c7 100644 --- a/apple-pie/index.html +++ b/apple-pie/index.html @@ -21,7 +21,7 @@

Apple Pie

one of your favorites as well!

Ingredients
  • 1/2 cup packed brown ugar
  • 8 Granny Smith apples - peeled, cored and sliced
    • - + +
    + +
    -
    +

    Directions

    diff --git a/apple-pie/styles/style.css b/apple-pie/styles/style.css index 57eb1c4..0e7aa98 100644 --- a/apple-pie/styles/style.css +++ b/apple-pie/styles/style.css @@ -12,6 +12,8 @@ .menu-img { max-height: 45vh; object-fit: cover; + width: 100%; + height: auto; } .menu-title { @@ -30,6 +32,8 @@ .content { margin: 50px; padding: 20px; +} +.content p { text-align: justify; } .menu-description { @@ -39,9 +43,8 @@ align-items: center; gap: 30px; } -.img-recipe, -.img-cookinginfo { - max-width: 50vw; +.img-recipe { + max-width: 30vw; } .menu-separator { @@ -53,6 +56,7 @@ h3 { font-size: 16px; font-weight: 500; margin-bottom: 20px; + text-align: left; } ul { list-style: none; @@ -73,8 +77,61 @@ ul li { top: 50%; transform: translate(-50%); margin-top: 30px; + max-width: 30vw; } .directions-content p { margin: 10px 0px; } +@media (min-width: 1024px) { + .content { + max-width: 1024px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 0 auto; + } + .menu-img { + width: 100%; + object-fit: cover; + } + .menu-ingredients { + align-self: flex-start; + width: 100%; + } + .cooking-info { + display: flex; + justify-content: center; + align-items: center; + margin: 0 auto; + width: 100%; + } + .img-cookinginfo { + position: static; + transform: none; + max-width: 30vw; + min-width: 20vw; + margin-top: 30px; + } + + .menu-separator { + border: 1px solid #aba2a2; + margin: 30px 0px; + width: 100%; + } + + .directions { + align-self: flex-start; + } +} + +@media (max-width: 425px) { + .menu-description .menu-ingredients { + width: 100%; + } + + .img-recipe .img-cookinginfo { + width: 100%; + } +}