From 0dd853a339b29b745ed0a21d0fd9b6b002deb99b Mon Sep 17 00:00:00 2001
From: Ansh Dwivedi <anshdhardwivediad@gmail.com>
Date: Sat, 5 Oct 2024 02:33:55 +0530
Subject: [PATCH] Footer is enhanced

---
 serv.html | 44 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/serv.html b/serv.html
index 860ca61..4c372b8 100644
--- a/serv.html
+++ b/serv.html
@@ -89,6 +89,50 @@ <h2>Special Occasions</h2>
     </main>
     <footer>
       <p>&copy; 2024 CabRental. All rights reserved.</p>
+      <style>
+        /* Styling the footer */
+        footer {
+            background-color: #ee6d6d;
+            color: white;
+            text-align: center;
+            padding: 5px;
+            display: flex;  /* Flexbox */
+            justify-content: center;  /* Center horizontally */
+            align-items: center; 
+            position: center;
+            bottom: 0;
+            width: 100%;
+            font-size: 14px;
+            height: 30px;
+            line-height: 30px;
+            transform: translateY(100%);  /* Initially hidden */
+            transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);  /* Smooth animation */
+        }
+
+
+        body {
+            margin: 0;
+            padding-bottom: 80px;  /* Space for the footer */
+        }
+    </style>
+      <script>
+       let lastScrollTop = 0;
+        const footer = document.querySelector("footer");
+
+        window.addEventListener("scroll", function() {
+            let currentScroll = window.pageYOffset || document.documentElement.scrollTop;
+
+            if (currentScroll > lastScrollTop) {
+                // Scrolling down - footer should appear smoothly
+                footer.style.transform = "translateY(0)";
+            } else {
+                // Scrolling up - hide the footer smoothly
+                footer.style.transform = "translateY(100%)";
+            }
+
+            lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
+        });
+    </script>
     </footer>
   </body>
 </html>