done

ironhack-labs · Oct 21, 2024 · 55cfab0 · 55cfab0
1 parent 27d9932
commit 55cfab0
Show file tree

Hide file tree

Showing 4 changed files with 160 additions and 26 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/apple-pie/.DS_Store b/apple-pie/.DS_Store
diff --git a/apple-pie/index.html b/apple-pie/index.html
@@ -5,35 +5,68 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Apple Pie Recipe</title>
     <!-- Remember to link your styles -->
+    <link rel="stylesheet" href="styles/style.css">
   </head>
   <body>
-    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
-
-    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
+    <header>
+      <div class = "background">
+    <h1> Apple Pie </h1> 
+  </div>
+  </header>
+
+    <section class = "description"> 
+
+        <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! </p>
+
+<img src="images/recipe-info.png" alt="cookingInfo">
+
+
+  </section>
+
+
+
+  <hr class="solid"> </hr>
+
+
+    <section class="ingredients"> 
+    <h2>Ingredients</h2> 
+    <ul>
+    <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> 3 tablespoons all-purpose flour </li>
+   <li> 1/4 cup water 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>
+
+  <img src="images/cooking-info.png" alt="cookingInfo">
+
+  </section>
+
+  <hr class="solid"> </hr>
+
+  <section class="directions"> 
+
+   <h2> Directions</h2>
+
+   <ol type = "1">
+
+   <li> 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. </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.
+    that it does not run off. </li>
 
-    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.
+   <li>  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.</li>
+
+  </ol> 
+  </section>
   </body>
 </html>
diff --git a/apple-pie/styles/style.css b/apple-pie/styles/style.css
@@ -15,10 +15,111 @@ body, h1, h2, h3, h4, h5, h6, p, ol, ul {
   font-weight: lighter;
 }
 
+
 /*  Set the font */
 body {
   font-family: "Helvetica", sans-serif;
 }
 
+h1{
+  font-size: 75px;
+  color: aliceblue;
+  padding: 60px;
+}
+
+.background {
+  background-image: url(../images/apple-pie.jpg);
+  background-position: center;
+  background-size: cover;
+  height: 500px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+}
+
+.description {
+  text-align: center;
+}
+
+.description p{
+  padding: 20px;
+  background-color: white;
+  margin:50px;
+  font-size: large;
+}
+
+.description img{
+  height: auto;
+  width: 300px;
+}
+
+
+/* Solid border */
+hr.solid {
+  color: darkgrey;
+  width: 85%;
+margin: auto;}
+
+
+.ingredients {
+  padding: 20px;
+  margin-top: 20px;
+  margin-left: 40px;
+  font-size: medium;
+}
+
+.ingredients h2 {
+  margin-bottom: 30px;
+
+}
+
+.ingredients img{
+  margin-top: 40px;
+  height: auto;
+  width: 300px;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+ul {
+  list-style-type: none;
+  padding-left: 10px;
+}
+
+ul li::before {
+  content: '- '; 
+}
+
+.directions {
+  padding: 50px;
+  margin-top: 10px;
+  margin-left: 40px;
+  font-size: medium;
+}
+
+
+.directions h2 {
+  margin-bottom: 30px;
+
+}
+
+ol {
+  /* 1. Remove the default list style */  
+  list-style: none;
+}
+
+ol > li {
+  /* 2. Create a custom list counter */  
+  counter-increment: listcounter;
+}
+
+ol > li::before {
+  /*3. Set the new style for the list markers */
+  content: counter(listcounter) ")";
+}
+
+
 /* STYLES */
 /* Write your CSS below */