ShaharEli · HillelC · Aug 27, 2021 · Aug 27, 2021 · Aug 28, 2021 · Aug 28, 2021
diff --git a/Salted-Brownie-Cookies-3-copy.jpg b/Salted-Brownie-Cookies-3-copy.jpg
diff --git a/bundle.js b/bundle.js
diff --git a/index.html b/index.html
@@ -5,13 +5,135 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css"></link>
-    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js" defer></script>
+    <script src="bundle.js" defer></script>
     <title>Document</title>
 </head>
 <body>
     <div id="fcc_test_suite_wrapper" style="position: relative !important; z-index: 99999 !important;"></div>
-     <!-- 
-         your code here
-      -->
+
+    <nav id="navbar"> 
+        <header> Recipe for salted brownie cookies </header>
+        <ul>
+            <li><a class="nav-link" href="#Prep_ahead"> Prep ahead </a> </li>
+            <li><a class="nav-link" href="#Batter"> Batter </a> </li>
+            <li><a class="nav-link" href="#Bake"> Bake </a> </li>
+            <li><a class="nav-link" href="#Description"> Description </a> </li>
+            <li><a class="nav-link" href="#Ingredients"> Ingredients </a> </li>
+            <li><a class="nav-link" href="#Instructions"> Instructions </a> </li>
+            <li><a class="nav-link" href="#Note"> Note </a> </li>
+        </ul>
+    </nav>
+
+    <main id="main-doc">
+        <h1> Salted brownie cookies </h1>
+
+
+         <section class="main-section" id="Prep_ahead">
+             <header>
+                <h2>Prep ahead</h2>
+             </header>     
+             <p>
+             There’s no <code> chilling here </code>, but temperature and timing are key to successful cookies, 
+             so this method works best if you prep all the ingredients before you start.
+             </p>
+         </section>
+
+         <section class="main-section" id="Batter">
+             <header>
+                 <h2>Batter</h2>
+             </header>
+             <p>
+                Once the chopped chocolate and butter are completely melted and smooth, set aside to cool slightly while you proceed with the recipe.
+            </p>
+             <p>
+                 Your finished dough will resemble a <code> brownie batter </code>– the easiest way to portion out the dough is with a cookie scoop coated lightly with nonstick spray.
+             </p>
+         </section>
+
+         <section class="main-section" id="Bake">
+            <header>
+                <h2>Bake</h2>
+            </header>
+            <p>
+                Bake the cookies until the tops are <code> and crackly </code>, 12-14 minutes.
+            </p>
+            <p>
+                 Remove pans from the oven and sprinkle cookies with flaky salt. Let cookies cool on baking sheets for 10 minutes, then transfer to wire racks to cool completely.
+            </p>
+            <p>
+                 Enjoy!
+            </p>
+         </section>
+
+         <section class="main-section" id="Description">
+             <header>
+                <h2>Description</h2>
+             </header>
+             <p>
+                The BEST salted brownie cookies! With shiny, crackled tops and rich, fudgy centers, these are the ultimate brownie cookies for chocolate lovers.
+             </p>
+         </section>
+
+         <img id="brownie-cookies" src="Salted-Brownie-Cookies-3-copy.jpg" alt="salted brownie cookies">
+
+         <section class="main-section" id="Ingredients">
+            <header>
+             <h2>Ingredients</h2>
+            </header>
+            <p>
+                <ul>
+                <li> 2/3 cup (94 g) flour </li>
+                <li> 2 Tbsp (12 g) unsweetened cocoa powder, sifted </li>
+                <li> 1 tsp (4 g) baking powder </li>
+                <li> 1/4 tsp (1.5 g) salt </li>
+                <li> 8 ounces (226 g) semisweet chocolate, finely chopped (recommended: 70% chocolate) </li>
+                <li> 1/4 cup (57 g) unsalted butter, cubed </li>
+                <li> 2 large eggs (100 g), at room temperature </li>
+                <li> 1/2 cup (100 g) sugar </li>
+                <li> 1/2 cup (92 g) light brown sugar </li>
+                <li> 1 tsp (4 g)  vanilla extract </li>
+                <li> 1/2 cup (85 g) semisweet chocolate chips </li>
+                <li> flaky salt, for topping </li>
+                </ul>
+            </p>
+         </section>
+
+
+
+
+         <section class="main-section" id="Instructions">
+             <header>
+                <h2>Instructions</h2>
+             </header>
+             <p>
+                 <ol>
+                     <li> <code> oven </code> to 350°F and line two baking sheets with parchment paper. Whisk together flour, cocoa, baking powder, and salt in a medium bowl. Place chopped chocolate and butter in a double boiler or in a heat-proof bowl over a saucepan of gently simmering water. Slowly melt the chocolate, stirring occasionally until smooth. Remove from the heat and set aside to cool slightly. </li>
+
+                     <li> Combine eggs, sugars, and vanilla in a large mixer bowl fitted with a whisk attachment and whisk together on medium speed for 5 minutes. Reduce speed to low and beat in melted chocolate for 1 minute. Add flour mixture and mix on low speed for 20 seconds, just until combined.
+                     Fold in chocolate chips (dough will resemble a gooey brownie batter).</li>
+
+                     <li> Use a cookie scoop coated lightly with nonstick spray to form the cookies – invert the scoop just above the baking sheets, spacing cookies 3 inches apart. </li>
+
+                     <li> Bake, rotating pans halfway through, for 12 to 14 minutes, until tops are shiny and crackly. Remove from oven and sprinkle with flaky salt. Let cookies cool for 10 minutes on baking sheets, then transfer to a wire rack to cool completely. </li>
+
+                     <li> Store cookies in an <code> container </code> at room temperature for 1-2 days. </li>
+                 </ol>
+             </p>
+         </section>
+
+         <section class="main-section" id="Note">
+             <header>
+                 <h2>Note</h2>
+             </header>
+             <p>
+                Recipe adapted from Martha Stewart.
+             </p>
+
+         </section>
+
+
+
+     </main>
+
 </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,20 @@
+@media only screen and (min-width: 900px){
+    #navbar{
+        margin-top: 50px;
+        width: 15%;
+        height: 100%;
+        position: fixed;
+        background-color: gray;
+    }
+    #main-doc{
+
+        margin-left: 18%;
+    }
+    #brownie-cookies{
+        max-width: 200px;
+        float: right;
+
+    }
+}
+
+