Merge pull request #1509 from samarsajad/tips

added nutrition page

Html-files/nutrition.js

@@ -0,0 +1,38 @@
+//Themechange icon toggling behaviour
+let themeToggleIcon = document.getElementById("theme-toggle-icon");
+
+themeToggleIcon.addEventListener("click", function () {
+  document.body.classList.toggle("dark-theme");
+  document.body.classList.toggle(":root")
+  if (document.body.classList.contains("dark-theme")) {
+    themeToggleIcon.src = "../Images/navbar/sun.png";
+  } else {
+    themeToggleIcon.src = "../Images/navbar/moon.png";
+  }
+});
+
+//Services dropdown
+
+const dropdownli = document.querySelector(".nav-item.dropdown");
+const navlinka = document.querySelector('.nav-link.services');
+const menu = document.querySelector('.dropdown .dropdown-menu');
+
+dropdownli.addEventListener("mouseenter", () => {
+    navlinka.classList.add("show");
+    menu.classList.add("show");
+    navlinka.setAttribute('aria-expanded', 'true');
+    menu.setAttribute("data-bs-popper", 'static');
+});
+
+menu.addEventListener("mouseleave", () => {
+    menu.classList.remove("show");
+    navlinka.classList.remove("show");
+    navlinka.setAttribute('aria-expanded', 'false');
+    menu.removeAttribute("data-bs-popper");
+    dropdownli.addEventListener("mouseleave", () => {
+        menu.classList.remove("show");
+        navlinka.classList.remove("show");
+        navlinka.setAttribute('aria-expanded', 'false');
+        menu.removeAttribute("data-bs-popper");
+    })
+});

index.html

@@ -149,6 +149,8 @@
                             <i class="fa-solid fa-star"></i> Rate Us
                         </a>
                     </li>
+
+
 
                 </ul>
             </div>
@@ -323,7 +325,60 @@ <h1 class="slider-title slider-reveal">
     <br>
     <br>
 
+    <button class="fixed-button" onclick="openNutrition()">Nutrition Tips</button>
+    <script>
+        function openNutrition() {
+            window.open('Html-files/nutrition.html', '_blank');
+        }
+    </script>
+     <style>
+
+        .fixed-button {
+            position: fixed;
+            margin-bottom: 25px;
+            margin-right: 100px;
+            bottom: 20px;
+            right: 20px;
+            width: 60px;
+            height: 60px;
+            font-size: 16px;
+            background-color: #CF2123;
+            color: white;
+            border: none;
+            border-radius: 50%;
+            cursor: pointer;
+            z-index: 1000; 
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            font-size: 12px; 
+            line-height: 1;
+            animation: bounce 1s infinite;
+        }
+        @keyframes bounce {
+            0%, 20%, 50%, 80%, 100% {
+                transform: translateY(0);
+            }
+            40% {
+                transform: translateY(-20px);
+            }
+            60% {
+                transform: translateY(-10px);
+            }
+        }
+
+        .fixed-button:hover {
+            background: linear-gradient(45deg, rgb(234, 16, 16), #f2a736);
+        }
 
+
+        .content {
+            height: 2000px;
+            background: linear-gradient(white, lightgray);
+
+        }
+    </style>
 
     <section class="about_us pt-5">
         <div class="hstack discount-rolling">
@@ -806,6 +861,7 @@ <h5 class="mb-3" style="margin-left: 70px;">See Also</h5>
                             <li class="nav-item">
                                 <a class="nav-link" href="./Html-files/cart.html">Cart</a>
                             </li>
+
                             <li class="nav-item">
                                 <a class="nav-link" href="/Html-files/contributor.html">Our Contributors</a>
                             </li>