Fixed Issue #29: Added a Back-to-Top button.

assets/css/style.css

@@ -1340,6 +1340,38 @@ textarea.input-field {
 
 
 
+/*-----------------------------------*\
+  #BACK TO TOP
+\*-----------------------------------*/
+
+.back-top-btn {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: var(--gold-crayola);
+  color: var(--smoky-black-1);
+  font-size: 22px;
+  width: 50px;
+  height: 50px;
+  border-radius: var(--radius-circle);
+  display: grid;
+  place-items: center;
+  box-shadow: var(--shadow-1);
+  transition: var(--transition-1);
+  opacity: 0;
+  visibility: hidden;
+  z-index: 4;
+}
+
+.back-top-btn:is(:hover, :focus-visible) {
+  background-color: var(--white);
+  color: var(--gold-crayola);
+}
+
+.back-top-btn.active {
+  opacity: 1;
+  visibility: visible;
+}
 
 
 
@@ -1956,7 +1988,7 @@ textarea.input-field {
     margin-block-end: 55px;
   }
 
-
+  
 
   /**
    * TESTIMONIALS
@@ -2051,4 +2083,43 @@ textarea.input-field {
     left: 0;
   }
 
-}
+}
+/* CSS for footer-list hover effect */
+.footer-list .footer-link {
+  position: relative;
+  display: inline-block;
+  padding-bottom: 2px; 
+  transition: color 0.3s ease-in-out; 
+}
+
+.footer-list .footer-link::before,
+.footer-list .footer-link::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  width: 0; 
+  height: 2px;
+  background-color: #000;
+  transition: width 0.4s ease, left 0.4s ease, background-color 0.3s ease-in-out;
+}
+
+.footer-list .footer-link::before {
+  transform: translateY(-4px); 
+}
+
+.footer-list .footer-link::after {
+  transform: translateY(4px);
+}
+
+.footer-list .footer-link:hover::before,
+.footer-list .footer-link:hover::after {
+  width: 100%; 
+  left: 0; 
+  background-color: #e4c491; 
+}
+
+.footer-list .footer-link:hover {
+  color: #e4c491; 
+}
+

assets/js/script.js

@@ -41,6 +41,30 @@ const toggleNavbar = function () {
 }
 
 
+
+
+const header = document.querySelector("[data-header]");
+const backTopBtn = document.querySelector("[data-back-top-btn]");
+
+let lastScrollPos = 0;
+
+const hideHeader = function () {
+  const isScrollBottom = lastScrollPos < window.scrollX;
+
+  lastScrollPos = window.scrollX;
+}
+
+window.addEventListener("scroll", function () {
+  if (window.scrollY >= 50) {
+    //Do something
+  } else {
+
+    //Do something
+  }
+});
+
+
+
 /**
  * HERO SLIDER
  */

index.html

@@ -90,7 +90,7 @@
 
       <div class="separator"></div>
 
-      <a href="mailto:booking@restaurant.com" class="topbar-item link">
+      <a href="mailto:booking@restaurant.com"  class="topbar-item link">
         <div class="icon">
           <ion-icon name="mail-outline" aria-hidden="true"></ion-icon>
         </div>
@@ -332,8 +332,7 @@ <h1 class="display-1 hero-title slider-reveal">
           <h2 class="headline-1 section-title">We Offer Top Notch</h2>
 
           <p class="section-text">
-            Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the industrys
-            standard dummy text ever.
+            Get the best in class dining experience with the most articulate culinary craftsmanship at Grilli. Bon Apétit!
           </p>
 
           <ul class="grid-list">
@@ -432,12 +431,10 @@ <h3 class="title-4 card-title">
 
             <p class="label-2 section-subtitle" id="about-label">Our Story</p>
 
-            <h2 class="headline-1 section-title">Every Fla vor Tells a Story</h2>
+            <h2 class="headline-1 section-title">Where Every Flavor Tells a Story</h2>
 
             <p class="section-text">
-              Lorem Ipsum is simply dummy text of the printingand typesetting industry lorem Ipsum has been the
-              industrys standard dummy text ever since the when an unknown printer took a galley of type and scrambled
-              it to make a type specimen book It has survived not only five centuries, but also the leap into.
+              Every dish is prepared articulately with our chef's utmost skills. This has made us one of the few Michelin Star rated hotels across the world. Our finely blended wines are one of the most exquisite and have been featured at the wine spectator awards. Check them out from our drinks section!
             </p>
 
             <div class="contact-label">Book Through Call</div>
@@ -498,8 +495,7 @@ <h2 class="headline-1 section-title">Every Fla vor Tells a Story</h2>
             <h2 class="headline-1 section-title">Lobster Tortellini</h2>
 
             <p class="section-text">
-              Lorem Ipsum is simply dummy text of the printingand typesetting industry lorem Ipsum has been the
-              industrys standard dummy text ever since the when an unknown printer took a galley of type.
+              Lobster Tortellini features delicate pasta parcels filled with succulent lobster, served in a rich, velvety sauce infused with fresh herbs and a hint of citrus. This luxurious dish blends Italian craftsmanship with the finest seafood for an unforgettable dining experience.
             </p>
 
             <div class="wrapper">
@@ -615,7 +611,7 @@ <h3 class="title-3">
                   </div>
 
                   <p class="card-text label-1">
-                    Typesetting industry lorem Lorem Ipsum is simply dummy text of the priand.
+                    Butternut Squash, Olive Oil, Garlic, Thyme, Black Pepper
                   </p>
 
                 </div>
@@ -1187,6 +1183,18 @@ <h3 class="card-title title-2 text-center">
 
 
 
+  <!-- 
+    - #BACK TO TOP
+  -->
+
+  <a href="" class="back-top-btn active">
+    <ion-icon name="chevron-up" aria-hidden="true"></ion-icon>
+  </a>
+
+
+
+
+
   <!-- 
     - custom js link
   -->