Merge pull request #182 from AnshDwivedi03/main

Done ui of footer #181
07sumit1002 · Oct 5, 2024 · 1b12486 · 1b12486
2 parents 08440f0 + 0dd853a
commit 1b12486
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 0 deletions.
diff --git 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>
diff --git a/style.css b/style.css
@@ -220,6 +220,20 @@ header nav .nav-right .header-btn > div input {
   background: rgb(231, 223, 223);
 }
 
+/*
+Added hover and color changes in footer 
+*/
+li a {
+  color: inherit;  /* Default color (will inherit the parent's color) */
+  text-decoration: none;  /* Removes underline from the link */
+  transition: color 0.3s ease;  /* Adds a smooth transition effect */
+}
+
+li a:hover {
+  color: rgb(182, 170, 170);  /* Changes the text color to black on hover */
+}
+
+
 
 
 .navbar {