diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/recipe.html b/recipe.html new file mode 100644 index 0000000..57cee22 --- /dev/null +++ b/recipe.html @@ -0,0 +1,65 @@ + + + + + + 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 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

+ +
+
    +
  1. Preheat oven to 425 degrees F (200 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. Reduce the temperature to 350 degrees F (175 degrees C). Continue baking for 35 to 45 minutes, until apples are soft.
    4. +
+
+ +
+ +
+ + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..03a778a --- /dev/null +++ b/styles.css @@ -0,0 +1,143 @@ +* {box-sizing: border-box;} + +body { + margin: 0; + display: flex; + justify-content: center; +} + +.box { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + width: 600px; + height: 600px; + + border: none 10px white; + + text-align: center; + + padding: 20px; + padding-top: 20px; + padding-bottom: 20px; + padding-left: 20px; + padding-right: 20px; + + margin: 40px; + margin-top:40px; + margin-bottom:40px; + margin-left:40px; + margin-right:40px; + + h1 { + color: aliceblue; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + font-size: 3rem; + } + +} + +.box1 { + + background-image: url(https://github.com/ironhack-labs/lab-css-recipes-clone-es/blob/master/apple-pie/images/apple-pie.jpg?raw=true); + background-size: cover; + width: 600px; + height: 600px; +} + +.box3 { + background-color: white; + width: 600px; + height: 300px; + justify-content: left; + align-items: left; + text-align: left; + margin-top: 0; + padding-top: 0; + + .h2{ + color: black; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + font-size: 1rem; + justify-content: left; + + .directions-list{ + color: black; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + font-size: 1rem; + justify-content: left; + } + } +} + +.container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.box2 { + background-color: white; + width: 600px; + height: 400px; + justify-content: left; + align-items: left; + text-align: left; + margin-bottom:0; + padding-bottom: 0; + + .h2{ + color: black; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + font-size: 1rem; + justify-content: left; + } + + .ingredient-list{ + color: black; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + font-size: 0.9rem; + justify-content: left; + } +} + +.inline { + height: 150px; + width: 550px; + background-color: none; + padding: 20px; + margin top: 0; + + .text { + color: black; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + font-size: 1rem; + justify-content: left; + } +} + +.general-info { + width: 500px; + height: 70px; + background-image: url(https://github.com/ironhack-labs/lab-css-recipes-clone-es/blob/master/apple-pie/images/recipe-info.png?raw=true); + background-size: cover; + align-items: center; + } + +.cook-time { + width: 400px; + height: 70px; + background-image: url(https://github.com/ironhack-labs/lab-css-recipes-clone-es/blob/master/apple-pie/images/cooking-info.png?raw=true); + background-size: cover; + align-items: center; + } + +.directions-list{ + color: black; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + font-size: 0.9rem; + justify-content: left; +} \ No newline at end of file