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 @@
- +- 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!
Our Story
-- 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!
- 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.
- Typesetting industry lorem Lorem Ipsum is simply dummy text of the priand. + Butternut Squash, Olive Oil, Garlic, Thyme, Black Pepper
@@ -1187,6 +1183,18 @@