From a0fcdcb8705549774cc59e914f3aeb867f921f00 Mon Sep 17 00:00:00 2001 From: Alejandra Rodriguez Date: Mon, 21 Jul 2025 16:02:26 +0200 Subject: [PATCH 1/2] finished version using flexbox --- apple-pie/index.html | 69 ++++++++++++--------- apple-pie/styles/style.css | 119 +++++++++++++++++++++++++++++++++++-- 2 files changed, 154 insertions(+), 34 deletions(-) diff --git a/apple-pie/index.html b/apple-pie/index.html index a019c8262..fc2aed423 100644 --- a/apple-pie/index.html +++ b/apple-pie/index.html @@ -4,36 +4,49 @@ Apple Pie Recipe - - - - 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 sugar - 8 Granny Smith apples - peeled, cored and sliced + +
+

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 firs place prizes in local competitions. I hope it become one of your favorites as well! +

- Directions + recipe info - 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. +
+

Ingredients

+
    +
  • 1 recipe pastry for a 9-inch double-crust pie hola hola2
    • +
  • 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
    • +
+
+ + cooking-info +
+ +
+

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. +
  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. +
  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.
    4. +
+
- 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. - - +
+ + \ No newline at end of file diff --git a/apple-pie/styles/style.css b/apple-pie/styles/style.css index 7a55b4df4..bf143c792 100644 --- a/apple-pie/styles/style.css +++ b/apple-pie/styles/style.css @@ -1,3 +1,6 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"); +/*@import url('https://fonts.googleapis.com/css2?family=Helvetica:wght@100..900&display=swap');*/ + /* CSS RESET - do not remove */ /* Reset default browser styles and provide a consistent starting point */ html { @@ -5,20 +8,124 @@ html { font-size: 16px; } -*, *:before, *:after { +*, +*:before, +*:after { box-sizing: inherit; } -body, h1, h2, h3, h4, h5, h6, p, ol, ul { +body, +h1, +h2, +h3, +h4, +h5, +h6, +p, +ol, +ul { margin: 0; padding: 0; font-weight: lighter; } -/* Set the font */ +/* STYLES */ +/* Write your CSS below */ + body { - font-family: "Helvetica", sans-serif; + font-family: Inter, sans-serif; + /* font-family: Helvetica, sans-serif; */ + color: black; } -/* STYLES */ -/* Write your CSS below */ \ No newline at end of file +h1 { + color: white; + font-size: 70px; + font-weight: 400; +} + +h2 { + color: black; + font-size: 22px; + font-weight: 400; + margin: 50px auto 30px; + /* border: 1px solid black; */ +} + +header { + background-image: url("../images/apple-pie.jpg"); + background-size: cover; + background-position: center -2cm; + height: 400px; + + display: flex; + align-items: center; + justify-content: center; +} + +#main-content-box { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 60px 10%; + /* border: 1px solid black; */ +} + +.intro-text { + text-align: justify; + font-size: 24px; + font-weight: 200; + /* border: 1px solid black; */ +} + +.image-multiple-info { + display: block; + align-items: center; + margin-top: 20px; + /* border: 1px solid black; */ +} + +.image-recipe-info { + height: 60px; + width: 400px; +} + +.image-cooking-info { + height: 75px; + width: 350px; +} + +hr { + width: 100%; + background-color: rgba(125, 125, 125, 0.729); + height: 2.5px; +} + +.list { + align-self: flex-start; + text-align: left; + padding-bottom: 10px; + /* border: 1px solid blue; */ +} + +.list ul, +ol { + font-size: 20px; + font-weight: 200; + list-style-position: inside; /* bullets go inside the box */ + /* border: 1px solid blue; */ +} + +.list ul { + list-style-type: "- "; +} + +.list ol li { + list-style-type: none; + counter-increment: listcounter; /* counter added to style li with parentheses instead of dot */ +} + +.list ol li::before { + content: counter(listcounter) ") "; /* Set the new style for the list markers*/ +} From d87216bbcd2a89297c1a7139eb85897e2ff2e933 Mon Sep 17 00:00:00 2001 From: Alejandra Rodriguez Date: Mon, 21 Jul 2025 16:23:13 +0200 Subject: [PATCH 2/2] reverted some formatting done by prettier and changed some properties in image-multiple-info class --- apple-pie/index.html | 1 + apple-pie/styles/style.css | 20 +++----------------- 2 files changed, 4 insertions(+), 17 deletions(-) diff --git a/apple-pie/index.html b/apple-pie/index.html index fc2aed423..bbee57eff 100644 --- a/apple-pie/index.html +++ b/apple-pie/index.html @@ -36,6 +36,7 @@

Ingredients

cooking-info +
diff --git a/apple-pie/styles/style.css b/apple-pie/styles/style.css index bf143c792..951c871a7 100644 --- a/apple-pie/styles/style.css +++ b/apple-pie/styles/style.css @@ -8,25 +8,13 @@ html { font-size: 16px; } -*, -*:before, -*:after { +*, *:before, *:after { box-sizing: inherit; } -body, -h1, -h2, -h3, -h4, -h5, -h6, -p, -ol, -ul { +body, h1, h2, h3, h4, h5, h6, p, ol, ul { margin: 0; padding: 0; - font-weight: lighter; } /* STYLES */ @@ -80,9 +68,7 @@ header { } .image-multiple-info { - display: block; - align-items: center; - margin-top: 20px; + margin: 20px auto 0 ; /* border: 1px solid black; */ }