diff --git a/assets/css/style.css b/assets/css/style.css index 380dfd7..a2f726b 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -264,6 +264,17 @@ body.nav-active { overflow: hidden; } margin-inline: auto; } +/* Cart anchor styling */ +#cart-anchor { + display: flex; + align-items: center; + cursor: pointer; +} + +#cart-anchor:hover .span { + color: var(--gold-crayola); /* Similar hover effect as other items */ +} + .contact-number::after { bottom: -5px; } .text-center { text-align: center; } @@ -303,6 +314,11 @@ body.nav-active { overflow: hidden; } padding: 12px 45px; overflow: hidden; z-index: 1; + + +} +.menu-card .add-to-cart { + margin-left: 15px; /* Adds space between price and button */ } .btn::before { @@ -992,9 +1008,28 @@ body.nav-active { overflow: hidden; } .menu-card { display: flex; - align-items: flex-start; - gap: 20px; + /* align-items: flex-start; */ + /* gap: 20px; */ } +.menu-card { + display: grid; + grid-template-columns: 150px 500px 300px 300px; + grid-template-rows: auto; /* Two equal columns */ + /* height: 50px; */ + row-gap: 5px; + gap: 20px; /* Gap between the columns */ + align-items: center; /* Aligns buttons vertically */ +} + +/* .menu-card .btn { + width: 150px; + text-align: center; +} */ + +/* .menu-card .title-wrapper { + margin-bottom: 15px; +} */ + .hover\:card .card-banner { background-color: var(--gold-crayola); } @@ -2051,4 +2086,42 @@ textarea.input-field { left: 0; } -} \ No newline at end of file +} + +.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 6403e32..51985e6 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -23,6 +23,58 @@ const addEventOnElements = function (elements, eventType, callback) { } } +let youtube = "https://www.youtube.com"; +let instagram = "https://www.instagram.com"; +let twitter = "https://www.x.com"; +let maps = "https://maps.google.com"; +let facebook = 'https://www.facebook.com'; + +document.querySelector("#twt").setAttribute('href', twitter); +document.querySelector("#utube").setAttribute('href', youtube); +document.querySelector("#map").setAttribute('href', maps); +document.querySelector("#instagram").setAttribute('href', instagram); +document.querySelector("#facebook").setAttribute('href', facebook); + +// Select the cart anchor and elements +const cartAnchor = document.getElementById("cart-anchor"); +const addToCartButtons = document.querySelectorAll(".add-to-cart"); +const removeFromCartButtons = document.querySelectorAll(".remove"); + +let cartItemCount = 0; + +// Function to update cart text +const updateCartDisplay = () => { + if (cartItemCount > 99) { + cartAnchor.querySelector(".span").textContent = "Cart 99+"; + } else if (cartItemCount > 0) { + cartAnchor.querySelector(".span").textContent = `Cart ${cartItemCount}`; + } else { + cartAnchor.querySelector(".span").textContent = "Cart"; + } +}; + +// Add event listeners to "Add to Cart" buttons +addToCartButtons.forEach(button => { + button.addEventListener("click", () => { + cartItemCount += 1; + updateCartDisplay(); + }); +}); + +// Add event listeners to "Remove" buttons +removeFromCartButtons.forEach(button => { + button.addEventListener("click", () => { + if (cartItemCount > 0) { + cartItemCount -= 1; + updateCartDisplay(); + } + }); +}); + +// Initialize the cart display on page load +window.addEventListener("load", updateCartDisplay); + + /** @@ -51,7 +103,6 @@ const emailElements = document.querySelectorAll("[data-email]"); //click event now addEventOnElements(emailElements, "click", openMailClient); - /** * HERO SLIDER */ @@ -113,8 +164,7 @@ addEventOnElements([heroSliderNextBtn, heroSliderPrevBtn], "mouseover", function }); addEventOnElements([heroSliderNextBtn, heroSliderPrevBtn], "mouseout", autoSlide); - -window.addEventListener("load", autoSlide); +w.addEventListener("load", autoSlide); @@ -141,4 +191,5 @@ window.addEventListener("mousemove", function (event) { parallaxItems[i].style.transform = `translate3d(${x}px, ${y}px, 0px)`; } -}); \ No newline at end of file +}); + diff --git a/index.html b/index.html index e97ba51..9100696 100644 --- a/index.html +++ b/index.html @@ -87,10 +87,16 @@ Number + +
+ +
+ Cart +
- +
@@ -332,8 +338,8 @@

We Offer Top Notch

- Enjoy a premium dining experience with exceptional culinary artistry at Grilli. -

+ Get the best in class dining experience with the most articulate culinary craftsmanship at Grilli. Bon Apétit! +