diff --git a/assets/css/style.css b/assets/css/style.css index 380dfd7..35bedcf 100644 --- a/assets/css/style.css +++ b/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; } -} \ No newline at end of file +} +/* 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; +} + diff --git a/assets/js/script.js b/assets/js/script.js index 39208c6..8e942b8 100644 --- a/assets/js/script.js +++ b/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 */ diff --git a/index.html b/index.html index c8b6708..ebdf257 100644 --- a/index.html +++ b/index.html @@ -90,7 +90,7 @@
- +
@@ -332,8 +332,7 @@

We Offer Top Notch

- 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!