ironhack-labs · paujorbaa · Sep 2, 2025 · Sep 2, 2025
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/apple-pie/index.html b/apple-pie/index.html
@@ -3,37 +3,76 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles/style.css" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
+      rel="stylesheet"
+    />
     <title>Apple Pie Recipe</title>
-    <!-- Remember to link your styles -->
   </head>
   <body>
-    Apple Pie
+    <div id="apple-pie">
+      <h1 id="apple-pie-title">Apple Pie</h1>
+    </div>
+    <div id="main-container">
+      <p id="recipe-text">
+        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!
+      </p>
 
-    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
+      <div>
+        <img
+          id="recipe-info"
+          src=".\images\recipe-info.png"
+          alt="cooking info"
+        />
+      </div>
 
-    Directions
+      <div class="division-line"></div>
 
-    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. 
+      <div>
+        <h2 class="ingredients-title">Ingredients</h2>
 
-    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.
+        <ul class="ingredients">
+          <li>1 recipe pastry for a 9 inch double crust pie</li>
+          <li>1/2 cup unsalted butter</li>
+          <li>3 tablespoons all-purpose flour</li>
+          <li>1/4 cup water</li>
+          <li>1/2 cup white sugar</li>
+          <li>1/2 cup packed brown sugar</li>
+          <li>8 Granny Smith apples - peeled, cored and sliced</li>
+        </ul>
+      </div>
+      <div>
+        <img
+          id="cooking-info"
+          src=".\images\cooking-info.png"
+          alt="cooking info"
+        />
+      </div>
 
-    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.
+      <div class="division-line"></div>
+
+      <h2>Directions</h2>
+
+      <ol>
+        <li>
+          Preheat oven to 425°F (220°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.
+        </li>
+        <li>
+          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.
+        </li>
+        <li>
+          Bake 15 minutes in the preheated oven. Reduce the temperature to 350°F
+          (175°C). Continue baking for 35 to 45 minutes, until apples are soft.
+        </li>
+      </ol>
+    </div>
   </body>
 </html>
diff --git a/apple-pie/styles/style.css b/apple-pie/styles/style.css
@@ -5,20 +5,103 @@ 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 */
 body {
-  font-family: "Helvetica", sans-serif;
+  font-family: "Open Sans", sans-serif;
 }
 
 /* STYLES */
-/* Write your CSS below */
+/* Write your CSS below */
+
+#apple-pie {
+  background-image: url("../images/apple-pie.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  height: 650px;
+}
+
+#apple-pie-title {
+  color: white;
+  text-align: center;
+  line-height: 650px;
+  font-size: 55px;
+}
+
+#main-container {
+  margin: 100px 115px;
+}
+
+#recipe-text {
+  font-size: 24px;
+  margin-bottom: 40px;
+}
+
+#recipe-info {
+  display: block;
+  margin: 0 auto;
+  width: 50%;
+}
+
+.division-line {
+  width: auto;
+  height: 2px;
+  background-color: gray;
+  margin-top: 40px;
+}
+
+h2 {
+  font-family: Arial, sans-serif;
+  font-size: 20px;
+  font-weight: normal;
+  margin: 50px 0 25px 0;
+}
+
+ul {
+  list-style-type: "-";
+  margin-left: 20px;
+}
+
+#cooking-info {
+  display: block;
+  margin: 0 auto;
+  padding: 25px 0 5px 0;
+  width: 50%;
+}
+
+ol {
+  list-style: none;
+}
+
+ol > li {
+  counter-increment: listcounter;
+}
+
+ol > li::before {
+  content: counter(listcounter) ")";
+}
+
+ol {
+  margin-left: 15px;
+}