From ff7bb8720cd3615d8efecd79c9f3fec1d1de87f1 Mon Sep 17 00:00:00 2001
From: Aarav238 <aarav8090shukla@gmail.com>
Date: Wed, 12 Oct 2022 15:04:16 +0530
Subject: [PATCH] Issue resolved

---
 account.html       |  5 +++--
 allproducts.html   |  5 +++--
 cart.html          |  5 +++--
 contact.html       | 12 +++++++++++-
 index.html         |  5 +++--
 productdetail.html |  6 ++++--
 style.css          | 12 +++++++++++-
 7 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/account.html b/account.html
index 5a91c48..473648e 100644
--- a/account.html
+++ b/account.html
@@ -8,6 +8,7 @@
     <title>Account Details </title>
     <link rel="stylesheet" href="style.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
+    <script src="https://kit.fontawesome.com/f390425e8d.js" crossorigin="anonymous"></script>
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
         rel="stylesheet">
@@ -36,7 +37,7 @@
                 </ul>
             </nav>
             <a href="cart.html">
-                <img src="images/cart.png" width="30px" height="30px">
+                <i class="cartIcon fa-sharp fa-solid fa-bag-shopping"></i>
             </a>
             <div class="toggle">
                 <i class="fa-solid fa-moon toggle-icon"></i>
@@ -151,7 +152,7 @@ <h3>Follow Us</h3>
             Indicator.style.transform = "translateX(0px)";
         }
         const ball = document.querySelector(".toggle-ball");
-        const items = document.querySelectorAll(".row,body,.container,.menu-icon,.navbar,.header,.toggle");
+        const items = document.querySelectorAll(".row,body,.cartIcon,.container,.menu-icon,.navbar,.header,.toggle");
         ball.addEventListener("click",()=>{
 
             items.forEach(item=>{
diff --git a/allproducts.html b/allproducts.html
index d206d29..9d90107 100644
--- a/allproducts.html
+++ b/allproducts.html
@@ -14,6 +14,7 @@
         <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 
     <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://kit.fontawesome.com/f390425e8d.js" crossorigin="anonymous"></script>
     
     <link rel="icon" type="image/x-icon" href="images/logo-white.png">
 
@@ -39,7 +40,7 @@
                 </ul>
             </nav>
             <a href="cart.html">
-                <img src="images/cart.png" width="30px" height="30px">
+                <i class="cartIcon fa-sharp fa-solid fa-bag-shopping"></i>
             </a>
             <div class="toggle">
                 <i class="fa-solid fa-moon toggle-icon"></i>
@@ -294,7 +295,7 @@ <h3>Follow Us</h3>
             }
         }
         const ball = document.querySelector(".toggle-ball");
-        const items = document.querySelectorAll(".row,body,.menu-icon,.container,.navbar,.header,.toggle");
+        const items = document.querySelectorAll(".row,body,.cartIcon,.page-btn,.menu-icon,.container,.navbar,.header,.toggle");
         ball.addEventListener("click",()=>{
 
             items.forEach(item=>{
diff --git a/cart.html b/cart.html
index 4bcac87..8867d79 100644
--- a/cart.html
+++ b/cart.html
@@ -12,6 +12,7 @@
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
+    <script src="https://kit.fontawesome.com/f390425e8d.js" crossorigin="anonymous"></script>
     <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
     <link
       rel="stylesheet"
@@ -38,7 +39,7 @@
           </ul>
         </nav>
         <a href="cart.html">
-          <img src="images/cart.png" width="30px" height="30px" />
+          <i class="cartIcon fa-sharp fa-solid fa-bag-shopping"></i>
         </a>
         <div class="toggle">
           <i class="fa-solid fa-moon toggle-icon"></i>
@@ -250,7 +251,7 @@ <h3>Follow Us</h3>
       renderItemsAndCosts();
     }
     const ball = document.querySelector(".toggle-ball");
-        const items = document.querySelectorAll(".row,body,.menu-icon,.container,.navbar,.header,.toggle");
+        const items = document.querySelectorAll(".row,body,.cartIcon,.menu-icon,.container,.navbar,.header,.toggle");
         ball.addEventListener("click",()=>{
 
             items.forEach(item=>{
diff --git a/contact.html b/contact.html
index c597a6b..bda0b02 100644
--- a/contact.html
+++ b/contact.html
@@ -12,6 +12,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
         rel="stylesheet">
     <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://kit.fontawesome.com/f390425e8d.js" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="icon" type="image/x-icon" href="images/logo-white.png">
     <link type="text/css" rel="stylesheet" href="path-to-fontawesome/font-awesome.css">
@@ -36,7 +37,7 @@
                 </ul>
             </nav>
             <a href="cart.html">
-                <img src="images/cart.png" width="30px" height="30px">
+                <i class="cartIcon fa-sharp fa-solid fa-bag-shopping"></i>
             </a>
             <img src="images/menu.png" class="menu-icon" onclick="menutoggle()">
 
@@ -77,6 +78,15 @@ <h1 class="form-title">Contact Us</h1>
                 MenuItems.style.maxHeight = "0px";
             }
         }
+        const ball = document.querySelector(".toggle-ball");
+        const items = document.querySelectorAll(".row,body,.cartIcon,.menu-icon,.container,.navbar,.header,.toggle");
+        ball.addEventListener("click",()=>{
+
+            items.forEach(item=>{
+                item.classList.toggle("active")
+            })
+            ball.classList.toggle("active")
+        })
     </script>
 
 </body>
diff --git a/index.html b/index.html
index ef48e47..3383f8a 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,7 @@
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
     />
+
     <script src="https://kit.fontawesome.com/f390425e8d.js" crossorigin="anonymous"></script>
     <link rel="icon" type="image/x-icon" href="images/logo-white.png" />
     <link
@@ -49,7 +50,7 @@
             </ul>
           </nav>
           <a href="cart.html" class="cart-hover">
-            <img src="images/cart.png" width="30px" height="30px" />
+            <i class="cartIcon fa-sharp fa-solid fa-bag-shopping"></i>
           </a>
           <div class="toggle">
             <i class="fa-solid fa-moon toggle-icon"></i>
@@ -505,7 +506,7 @@ <h3>Follow Us</h3>
 
 
       const ball = document.querySelector(".toggle-ball");
-        const items = document.querySelectorAll(".row,body,.menu-icon,.container,.navbar,.header,.toggle");
+        const items = document.querySelectorAll(".row,body,.cartIcon,.menu-icon,.container,.navbar,.header,.toggle");
         ball.addEventListener("click",()=>{
 
             items.forEach(item=>{
diff --git a/productdetail.html b/productdetail.html
index a517f9f..b3a65d2 100644
--- a/productdetail.html
+++ b/productdetail.html
@@ -7,12 +7,14 @@
     <title>Product Details</title>
     <link rel="stylesheet" href="style.css" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <script src="https://kit.fontawesome.com/f390425e8d.js" crossorigin="anonymous"></script>
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
+    <script src="https://kit.fontawesome.com/f390425e8d.js" crossorigin="anonymous"></script>
     <link
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
@@ -38,7 +40,7 @@
           </ul>
         </nav>
         <a href="cart.html">
-          <img src="images/cart.png" width="30px" height="30px" />
+          <i class="cartIcon fa-sharp fa-solid fa-bag-shopping"></i>
         </a>
         <div class="toggle">
           <i class="fa-solid fa-moon toggle-icon"></i>
@@ -297,7 +299,7 @@ <h3>Follow Us</h3>
       };
 
       const ball = document.querySelector(".toggle-ball");
-        const items = document.querySelectorAll(".row,body,.menu-icon,.container,.navbar,.header,.toggle");
+        const items = document.querySelectorAll(".row,body,.cartIcon,.menu-icon,.container,.navbar,.header,.toggle");
         ball.addEventListener("click",()=>{
 
             items.forEach(item=>{
diff --git a/style.css b/style.css
index e0dd9eb..88f6676 100644
--- a/style.css
+++ b/style.css
@@ -897,6 +897,7 @@ form a {
   transform: scaleX(1);
 }
 
+
 /* HOVER ANIMATION */
 
 /* #box:hover {
@@ -1044,6 +1045,15 @@ body.active{
   transform: translateX(-20px);
 
 
+
+
+}
+
+.cartIcon.active{
+  color: white;
+}
+.page-btn.active{
+  color: white;
 }
 
 /*footer image mouse style to pointer*/
@@ -1058,4 +1068,4 @@ body.active{
 .useful-links,.socialbtns{
   color:#D3D3D3;
 }
-  
+