From 0a85c182e83909ee4183887e6af84dd5cb7ec042 Mon Sep 17 00:00:00 2001
From: helenclx <helenclx@users.noreply.github.com>
Date: Wed, 10 Apr 2024 17:54:37 +0000
Subject: [PATCH] deploy: 5147a26909326fb5d360c2bc685bb8d72ed84797

---
 about/index.html                              | 50 ++++++++++++++++---
 assets/css/style.css                          | 16 ------
 blog/categories/about-this-blog/index.html    | 50 ++++++++++++++++---
 blog/categories/cassette-beasts/index.html    | 50 ++++++++++++++++---
 blog/categories/cbpickaxe/index.html          | 50 ++++++++++++++++---
 blog/categories/chingu/index.html             | 50 ++++++++++++++++---
 blog/categories/cs50/index.html               | 50 ++++++++++++++++---
 blog/categories/cs50x/index.html              | 50 ++++++++++++++++---
 blog/categories/css/index.html                | 50 ++++++++++++++++---
 blog/categories/github/index.html             | 50 ++++++++++++++++---
 blog/categories/html/index.html               | 50 ++++++++++++++++---
 blog/categories/index.html                    | 50 ++++++++++++++++---
 blog/categories/javascript/index.html         | 50 ++++++++++++++++---
 blog/categories/javascriptmas/index.html      | 50 ++++++++++++++++---
 blog/categories/python/index.html             | 50 ++++++++++++++++---
 blog/categories/scrimba/index.html            | 50 ++++++++++++++++---
 blog/categories/sql/index.html                | 50 ++++++++++++++++---
 blog/index.html                               | 50 ++++++++++++++++---
 .../index.html                                | 50 ++++++++++++++++---
 .../index.html                                | 50 ++++++++++++++++---
 .../index.html                                | 50 ++++++++++++++++---
 .../index.html                                | 50 ++++++++++++++++---
 .../index.html                                | 50 ++++++++++++++++---
 .../index.html                                | 50 ++++++++++++++++---
 .../index.html                                | 50 ++++++++++++++++---
 blog/posts/index.html                         | 50 ++++++++++++++++---
 contact/index.html                            | 50 ++++++++++++++++---
 index.html                                    | 50 ++++++++++++++++---
 projects/frontend-mentor/index.html           | 50 ++++++++++++++++---
 projects/index.html                           | 50 ++++++++++++++++---
 projects/quizzical/index.html                 | 50 ++++++++++++++++---
 projects/recipe-hub/index.html                | 50 ++++++++++++++++---
 projects/scrimba/index.html                   | 50 ++++++++++++++++---
 projects/tenzies/index.html                   | 50 ++++++++++++++++---
 34 files changed, 1452 insertions(+), 214 deletions(-)
diff --git a/about/index.html b/about/index.html
index 504e5b15..8aa6287e 100644
--- a/about/index.html
+++ b/about/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> About |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <article class="bio prose">
@@ -227,6 +264,7 @@ <h3>My Certificates:</h3>
 </article>
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/assets/css/style.css b/assets/css/style.css
index 914712d8..f45cfcbf 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -161,22 +161,6 @@ button:hover {
     outline-offset: 0;
 }
 
-/* Scrool to Top Button */
-.top-btn {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    z-index: 999;
-    border: none;
-    background-color: var(--clr-top-btn);
-    border-radius: 50em;
-    padding: 0.5em;
-}
-
-.top-btn img {
-    width: 2rem;
-}
-
 /* Footer Style */
 
 .footer {
diff --git a/blog/categories/about-this-blog/index.html b/blog/categories/about-this-blog/index.html
index fde50ccf..f7ae5c9b 100644
--- a/blog/categories/about-this-blog/index.html
+++ b/blog/categories/about-this-blog/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Blog Post Category: &quot;about this blog&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <nav class="blog__nav">
@@ -237,6 +274,7 @@ <h3>
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/blog/categories/cassette-beasts/index.html b/blog/categories/cassette-beasts/index.html
index bccb52f9..808ef8e2 100644
--- a/blog/categories/cassette-beasts/index.html
+++ b/blog/categories/cassette-beasts/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Blog Post Category: &quot;cassette beasts&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <nav class="blog__nav">
@@ -237,6 +274,7 @@ <h3>
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/blog/categories/cbpickaxe/index.html b/blog/categories/cbpickaxe/index.html
index d10f4320..a9bb2f40 100644
--- a/blog/categories/cbpickaxe/index.html
+++ b/blog/categories/cbpickaxe/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Blog Post Category: &quot;cbpickaxe&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <nav class="blog__nav">
@@ -237,6 +274,7 @@ <h3>
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/blog/categories/chingu/index.html b/blog/categories/chingu/index.html
index 6855fc75..df0a05fd 100644
--- a/blog/categories/chingu/index.html
+++ b/blog/categories/chingu/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Blog Post Category: &quot;chingu&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <nav class="blog__nav">
@@ -247,6 +284,7 @@ <h3>
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/blog/categories/cs50/index.html b/blog/categories/cs50/index.html
index 4d576dcc..179da71d 100644
--- a/blog/categories/cs50/index.html
+++ b/blog/categories/cs50/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Blog Post Category: &quot;cs50&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <nav class="blog__nav">
@@ -247,6 +284,7 @@ <h3>
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/blog/categories/cs50x/index.html b/blog/categories/cs50x/index.html
index e712091a..1a903f88 100644
--- a/blog/categories/cs50x/index.html
+++ b/blog/categories/cs50x/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Blog Post Category: &quot;cs50x&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <nav class="blog__nav">
@@ -247,6 +284,7 @@ <h3>
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/blog/categories/css/index.html b/blog/categories/css/index.html
index f238506f..494288f5 100644
--- a/blog/categories/css/index.html
+++ b/blog/categories/css/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Blog Post Category: &quot;css&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <nav class="blog__nav">
@@ -237,6 +274,7 @@ <h3>
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/blog/categories/github/index.html b/blog/categories/github/index.html
index 4789d8c4..6503b93b 100644
--- a/blog/categories/github/index.html
+++ b/blog/categories/github/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Blog Post Category: &quot;github&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <nav class="blog__nav">
@@ -237,6 +274,7 @@ <h3>
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/blog/categories/html/index.html b/blog/categories/html/index.html
index 2c1c0677..a2af490f 100644
--- a/blog/categories/html/index.html
+++ b/blog/categories/html/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Blog Post Category: &quot;html&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <nav class="blog__nav">
@@ -237,6 +274,7 @@ <h3>
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/blog/categories/index.html b/blog/categories/index.html
index 34396381..e16b9f61 100644
--- a/blog/categories/index.html
+++ b/blog/categories/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Blog Post Categories |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <nav class="blog__nav">
@@ -281,6 +318,7 @@ <h2 class="heading--main">Blog Post Categories</h2>
 <p>See all blog posts in the <a href="/blog/posts/">archive</a>.</p>
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/blog/categories/javascript/index.html b/blog/categories/javascript/index.html
index 252e0b4d..6d773000 100644
--- a/blog/categories/javascript/index.html
+++ b/blog/categories/javascript/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Blog Post Category: &quot;javascript&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <nav class="blog__nav">
@@ -237,6 +274,7 @@ <h3>
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/blog/categories/javascriptmas/index.html b/blog/categories/javascriptmas/index.html
index 2cec8939..bbd8323e 100644
--- a/blog/categories/javascriptmas/index.html
+++ b/blog/categories/javascriptmas/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Blog Post Category: &quot;javascriptmas&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <nav class="blog__nav">
@@ -237,6 +274,7 @@ <h3>
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/blog/categories/python/index.html b/blog/categories/python/index.html
index 3f63dc25..c3696850 100644
--- a/blog/categories/python/index.html
+++ b/blog/categories/python/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Blog Post Category: &quot;python&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <nav class="blog__nav">
@@ -237,6 +274,7 @@ <h3>
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/blog/categories/scrimba/index.html b/blog/categories/scrimba/index.html
index a499506f..b96d128e 100644
--- a/blog/categories/scrimba/index.html
+++ b/blog/categories/scrimba/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Blog Post Category: &quot;scrimba&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <nav class="blog__nav">
@@ -237,6 +274,7 @@ <h3>
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/blog/categories/sql/index.html b/blog/categories/sql/index.html
index 454b5972..a0be8618 100644
--- a/blog/categories/sql/index.html
+++ b/blog/categories/sql/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Blog Post Category: &quot;sql&quot; |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <nav class="blog__nav">
@@ -237,6 +274,7 @@ <h3>
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/blog/index.html b/blog/index.html
index 2c26c475..5e6e58e2 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Helen Codes |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <nav class="blog__nav">
@@ -250,6 +287,7 @@ <h3><a href="/blog/posts/2023-11-13-My-First-PR-in-Python/">cbpickaxe and My Fir
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/blog/posts/2023-08-21-Welcome-to-Helen-Codes/index.html b/blog/posts/2023-08-21-Welcome-to-Helen-Codes/index.html
index 32b1d8e6..74ad6488 100644
--- a/blog/posts/2023-08-21-Welcome-to-Helen-Codes/index.html
+++ b/blog/posts/2023-08-21-Welcome-to-Helen-Codes/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Welcome to Helen Codes |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <nav class="blog__nav">
@@ -252,6 +289,7 @@ <h2 class="heading--main">Welcome to Helen Codes</h2>
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/index.html b/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/index.html
index 9a1ab8c2..9becc4b6 100644
--- a/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/index.html
+++ b/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Built A TickyBot Clone for Chingu&#39;s Solo Projects |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <nav class="blog__nav">
@@ -253,6 +290,7 @@ <h2 class="heading--main">Built A TickyBot Clone for Chingu&#39;s Solo Projects<
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/blog/posts/2023-09-10-CS50x-Week-7-Completed/index.html b/blog/posts/2023-09-10-CS50x-Week-7-Completed/index.html
index ceb55080..e6fd4fc0 100644
--- a/blog/posts/2023-09-10-CS50x-Week-7-Completed/index.html
+++ b/blog/posts/2023-09-10-CS50x-Week-7-Completed/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> CS50x Week 7 Completed |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <nav class="blog__nav">
@@ -256,6 +293,7 @@ <h2 class="heading--main">CS50x Week 7 Completed</h2>
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/index.html b/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/index.html
index 119321d6..161e5fd2 100644
--- a/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/index.html
+++ b/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> CS50x Week 8 Assignments Completed |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <nav class="blog__nav">
@@ -259,6 +296,7 @@ <h2 class="heading--main">CS50x Week 8 Assignments Completed</h2>
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/blog/posts/2023-11-13-My-First-PR-in-Python/index.html b/blog/posts/2023-11-13-My-First-PR-in-Python/index.html
index 6ca1fe57..8b54962c 100644
--- a/blog/posts/2023-11-13-My-First-PR-in-Python/index.html
+++ b/blog/posts/2023-11-13-My-First-PR-in-Python/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> cbpickaxe and My First (Merged) Pull Request in Python |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <nav class="blog__nav">
@@ -268,6 +305,7 @@ <h2 class="heading--main">cbpickaxe and My First (Merged) Pull Request in Python
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/index.html b/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/index.html
index b270dc3c..239f5121 100644
--- a/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/index.html
+++ b/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Chingu Voyage 46 Completed |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <nav class="blog__nav">
@@ -255,6 +292,7 @@ <h2 class="heading--main">Chingu Voyage 46 Completed</h2>
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/index.html b/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/index.html
index 2e53ea54..441e785e 100644
--- a/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/index.html
+++ b/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> JavaScriptmas 2023 Challenge Completed — and Won |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <nav class="blog__nav">
@@ -255,6 +292,7 @@ <h2 class="heading--main">JavaScriptmas 2023 Challenge Completed — and Won</h2
 
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/blog/posts/index.html b/blog/posts/index.html
index 40c46b83..9938f38d 100644
--- a/blog/posts/index.html
+++ b/blog/posts/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Blog Archive |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <nav class="blog__nav">
@@ -303,6 +340,7 @@ <h3>
 </p>
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/contact/index.html b/contact/index.html
index 8feca501..76816f96 100644
--- a/contact/index.html
+++ b/contact/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Contact |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <h2 class="heading--main text-center">Want to get in touch?</h2>
@@ -225,6 +262,7 @@ <h2 class="heading--main text-center">Want to get in touch?</h2>
 </form>
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/index.html b/index.html
index 970ddace..28ef56dc 100644
--- a/index.html
+++ b/index.html
@@ -41,15 +41,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -206,6 +242,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <section class="profile">
@@ -440,6 +477,7 @@ <h3 class="project-card__title">Tenzies Game</h3>
 </section>
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/projects/frontend-mentor/index.html b/projects/frontend-mentor/index.html
index 0e08d786..d0f71b75 100644
--- a/projects/frontend-mentor/index.html
+++ b/projects/frontend-mentor/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Frontend Mentor Challenge Solutions |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <meta charset="utf-8">
@@ -246,6 +283,7 @@ <h3>Lessons Learned</h3>
 </article>
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/projects/index.html b/projects/index.html
index 3d3823f7..e538233e 100644
--- a/projects/index.html
+++ b/projects/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Projects |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <h2 class="projects__heading">Featured Projects</h2>
@@ -341,6 +378,7 @@ <h3 class="project-card__title">Tenzies Game</h3>
 </div>
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/projects/quizzical/index.html b/projects/quizzical/index.html
index d1431582..3b230426 100644
--- a/projects/quizzical/index.html
+++ b/projects/quizzical/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Quizzical |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <meta charset="utf-8">
@@ -245,6 +282,7 @@ <h3>Technologies Used</h3>
 </article>
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/projects/recipe-hub/index.html b/projects/recipe-hub/index.html
index 6ae109f4..1dbe09ca 100644
--- a/projects/recipe-hub/index.html
+++ b/projects/recipe-hub/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Recipe Hub |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <meta charset="utf-8">
@@ -243,6 +280,7 @@ <h3>Lessons Learned</h3>
 </article>
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/projects/scrimba/index.html b/projects/scrimba/index.html
index 51e89cea..bedfc977 100644
--- a/projects/scrimba/index.html
+++ b/projects/scrimba/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Scrimba Frontend Path Solo Projects |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <meta charset="utf-8">
@@ -245,6 +282,7 @@ <h3>Technologies Used</h3>
 </article>
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
diff --git a/projects/tenzies/index.html b/projects/tenzies/index.html
index 9df633e2..5c7a0d4b 100644
--- a/projects/tenzies/index.html
+++ b/projects/tenzies/index.html
@@ -38,15 +38,51 @@
         
         <link rel="stylesheet" href="/assets/css/style.css">
 
-        
-        <script src="/assets/js/scroll.js" defer></script>
-
         <title> Tenzies Game |  Helen Chong | Front-End Web Developer</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/icons/top.svg" alt="">
-        </button>
+        <top-btn><button aria-label="Scroll to top" class="top-btn hidden">
+    <img src="/assets/icons/top.svg" alt>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script></top-btn>
+        
+
         <div class="content">
             <header-main><header class="header">
     <h1 class="header__title">
@@ -203,6 +239,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
     });
 </script></header-main>
             
+
             <main class="main container">
                 
 <meta charset="utf-8">
@@ -243,6 +280,7 @@ <h3>Lessons Learned</h3>
 </article>
             </main>
         </div>
+
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
