Ankit-11525 · helloArnab · Oct 15, 2022 · Oct 15, 2022 · Oct 15, 2022 · Oct 16, 2022
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
     "liveServer.settings.port": 5501
-}
+}
diff --git a/account.html b/account.html
@@ -17,6 +17,13 @@
     <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" />
 
+    <link rel="icon" type="image/x-icon" href="images/logo-white.png" />
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
+    <script src="theme.js"></script>
+
 </head>
 
 <body>
@@ -25,7 +32,7 @@
         <div class="navbar">
             <div class="logo">
                 <a href="index.html">
-                    <img src="images/logo.png" width="125px">
+                    <img src="images/logo.png" width="125px" class="icon">
                 </a>
             </div>
             <nav>
@@ -36,15 +43,24 @@
                     <li><a href="contact.html">Contact</a></li>
                     <li><a href="account.html">Account</a></li>
                 </ul>
+
+                <input type="checkbox" id="light" class="checkbox" style="margin: 3px 50px;">
+                <label for="checkbox" class="label" style="margin: 3px 50px;">
+                    <i class="fa-solid fa-sun"></i>
+                    <i class='fa-solid fa-moon'></i>
+                    <div class='ball'>
+                </label>
             </nav>
             <a href="cart.html">
-                <img class="cart-image" src="images/cart.png" width="30px" height="30px">
+                <img class="cart-image" src="images/cart.png" width="30px" height="30px" class="cart">
             </a>
+
             <div class="toggle">
                 <i class="fa-solid fa-moon toggle-icon"></i>
                 <i class="fa-solid fa-sun toggle-icon"></i>
                 <div class="toggle-ball"></div>
             </div>
+
             <img src="images/menu.png" class="menu-icon" onclick="menutoggle()">
 
         </div>
@@ -173,10 +189,21 @@ <h3>Follow Us</h3>
             cartImage.classList.toggle("bgm-change")
         })
     </script>
+
+        <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+        <script>
+            AOS.init();
+          </script>
+
+    <script src="theme.js"></script>
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+
     <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
     <script>
         AOS.init();
     </script>
+
 </body>
 
 </html>
diff --git a/allproducts.html b/allproducts.html
@@ -17,6 +17,13 @@
     <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" />
 
+    <link rel="icon" type="image/x-icon" href="images/logo-white.png" />
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
+    <script src="theme.js"></script>
+
 
 </head>
 
@@ -26,7 +33,7 @@
         <div class="navbar">
             <div class="logo">
                 <a href="index.html">
-                    <img src="images/logo.png" width="125px">
+                    <img src="images/logo.png" width="125px" class="icon">
                 </a>
             </div>
             <nav>
@@ -37,15 +44,18 @@
                     <li><a href="contact.html">Contact</a></li>
                     <li><a href="account.html">Account</a></li>
                 </ul>
+
+                <input type="checkbox" id="light" class="checkbox" style="margin: 3px 50px;">
+                <label for="checkbox" class="label" style="margin: 3px 50px;">
+                    <i class="fa-solid fa-sun"></i>
+                    <i class='fa-solid fa-moon'></i>
+                    <div class='ball'>
+                </label>
             </nav>
             <a href="cart.html">
-                <img class="cart-image" src="images/cart.png" width="30px" height="30px">
+                <img class="cart-image" src="images/cart.png" width="30px" height="30px" class="cart">
             </a>
-            <div class="toggle">
-                <i class="fa-solid fa-moon toggle-icon"></i>
-                <i class="fa-solid fa-sun toggle-icon"></i>
-                <div class="toggle-ball"></div>
-            </div>
+
             <img src="images/menu.png" class="menu-icon" onclick="menutoggle()">
 
         </div>
@@ -54,7 +64,7 @@
 
     <div class="small-container">
         <div class="row row-2" data-aos="fade-up">
-            <h2>Our Products</h2>
+            <h2 class="heading">Our Products</h2>
             <select>
                 <option>Default Sorting</option>
                 <option>Sort By Price</option>
@@ -312,10 +322,21 @@ <h3>Follow Us</h3>
             cartImage.classList.toggle("bgm-change")
         })
     </script>
+
+        <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+        <script>
+            AOS.init();
+          </script>
+
+    <script src="theme.js"></script>
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+
     <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
     <script>
         AOS.init();
     </script>
+
 </body>
 
 </html>
diff --git a/cart.html b/cart.html
@@ -13,14 +13,22 @@
     <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
     <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" />
+
+    <script src="https://kit.fontawesome.com/f390425e8d.js" crossorigin="anonymous"></script>
+    <link rel="icon" type="image/x-icon" href="images/logo-white.png" />
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
+    <script src="theme.js"></script>
 </head>
 
 <body>
     <div class="container">
         <div class="navbar">
             <div class="logo">
                 <a href="index.html">
-                    <img src="images/logo.png" width="125px" />
+                    <img src="images/logo.png" width="125px" class="icon" />
                 </a>
             </div>
             <nav>
@@ -31,15 +39,17 @@
                     <li><a href="">Contact</a></li>
                     <li><a href="account.html">Account</a></li>
                 </ul>
+                <input type="checkbox" id="light" class="checkbox" style="margin: 3px 50px;">
+                <label for="checkbox" class="label" style="margin: 3px 50px;">
+                    <i class="fa-solid fa-sun"></i>
+                    <i class='fa-solid fa-moon'></i>
+                    <div class='ball'>
+                </label>
             </nav>
             <a href="cart.html">
-                <img src="images/cart.png" width="30px" height="30px" />
+                <img src="images/cart.png" width="30px" height="30px" class="cart-image"/>
             </a>
-            <div class="toggle">
-                <i class="fa-solid fa-moon toggle-icon"></i>
-                <i class="fa-solid fa-sun toggle-icon"></i>
-                <div class="toggle-ball"></div>
-            </div>
+
             <img src="images/menu.png" class="menu-icon" onclick="menutoggle()" />
         </div>
     </div>
@@ -238,6 +248,10 @@ <h3>Follow Us</h3>
         }
         checkForItemsInCart();
     </script>
+
+    <script src="theme.js"></script>
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 </body>
 
 </html>
diff --git a/contact.html b/contact.html
@@ -15,7 +15,22 @@
     <link 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
+      type="text/css"
+      rel="stylesheet"
+      href="path-to-fontawesome/font-awesome.css"
+    />
+
+    <link rel="icon" type="image/x-icon" href="images/logo-white.png" />
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
+    <script src="theme.js"></script>
+
     <link type="text/css" rel="stylesheet" href="path-to-fontawesome/font-awesome.css" />
+
 </head>
 
 <body>
@@ -24,7 +39,7 @@
         <div class="navbar">
             <div class="logo">
                 <a href="index.html">
-                    <img src="images/logo.png" width="125px">
+                    <img src="images/logo.png" width="125px" class="icon">
                 </a>
             </div>
             <nav>
@@ -35,35 +50,44 @@
                     <li><a href="contact.html">Contact</a></li>
                     <li><a href="account.html">Account</a></li>
                 </ul>
+
+                <input type="checkbox" id="light" class="checkbox" style="margin: 3px 50px;">
+                <label for="checkbox" class="label" style="margin: 3px 50px;">
+                    <i class="fa-solid fa-sun"></i>
+                    <i class='fa-solid fa-moon'></i>
+                    <div class='ball'>
+                </label>
             </nav>
             <a href="cart.html">
-                <img class="cart-image" src="images/cart.png" width="30px" height="30px">
+                <img class="cart-image" src="images/cart.png" width="30px" height="30px" class="cart">
             </a>
+
             <div class="toggle">
                 <i class="fa-solid fa-moon toggle-icon"></i>
                 <i class="fa-solid fa-sun toggle-icon"></i>
                 <div class="toggle-ball"></div>
             </div>
 
+
             <img src="images/menu.png" class="menu-icon" onclick="menutoggle()">
 
         </div>
 
     </div>
 
     <div class="contact-form-container">
-        <h1 class="form-title">Contact Us</h1>
+        <h1 class="form-title heading">Contact Us</h1>
         <form action="#" class="contact-form">
             <div class="form-item">
-                <input type="email" id="email" name="email" placeholder="Email address">
+                <input class="input-field" type="email" id="email" name="email" placeholder="Email address">
             </div>
 
             <div class="form-item">
-                <input type="number" id="phone" name="phone" placeholder="Phone Number">
+                <input class="input-field" type="number" id="phone" name="phone" placeholder="Phone Number">
             </div>
 
             <div class="form-item textarea-container">
-                <textarea name="feedback" id="feedback" placeholder="Your Feedback"></textarea>
+                <textarea class="input-field" name="feedback" id="feedback" placeholder="Your Feedback"></textarea>
             </div>
 
             <div class="submit-btn">
@@ -101,6 +125,10 @@ <h1 class="form-title">Contact Us</h1>
         })
     </script>
 
+    <script src="theme.js"></script>
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+
 </body>
 
 </html>
diff --git a/index.html b/index.html
@@ -25,6 +25,13 @@
       rel="stylesheet"
       href="path-to-fontawesome/font-awesome.css"
     />
+
+    <link rel="icon" type="image/x-icon" href="images/logo-white.png" />
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
+    <script src="theme.js"></script>
   </head>
 
   <body onload="myFunction()" style="margin:0;">
@@ -40,7 +47,7 @@
         <div class="navbar">
           <div class="logo">
             <a href="index.html">
-              <img src="images/logo.png" width="125px" />
+              <img src="images/logo.png" width="125px" class="icon"/>
             </a>
           </div>
           <nav>
@@ -51,21 +58,23 @@
               <li><a href="contact.html">Contact</a></li>
               <li><a href="account.html">Account</a></li>
             </ul>
+            <input type="checkbox" id="light" class="checkbox" style="margin: 3px 50px;">
+            <label for="checkbox" class="label" style="margin: 3px 50px;">
+                <i class="fa-solid fa-sun"></i>
+                <i class='fa-solid fa-moon'></i>
+                <div class='ball'>
+            </label>
           </nav>
           <a href="cart.html" class="cart-hover">
             <img class="cart-image" src="images/cart.png" width="30px" height="30px" />
           </a>
-          <div class="toggle">
-            <i class="fa-solid fa-moon toggle-icon"></i>
-            <i class="fa-solid fa-sun toggle-icon"></i>
-            <div class="toggle-ball"></div>
-         </div>
+
 
           <img src="images/menu.png" class="menu-icon" onclick="menutoggle()" />
         </div>
         <div class="row">
           <div class="col-2">
-            <h1 data-aos="fade-up">
+            <h1 data-aos="fade-up" class="heading">
               Give Your Workout<br />
               A New Style!
             </h1>
@@ -300,14 +309,14 @@ <h4>Black jogger Puma</h4>
 
     <!---offer-->
     <div class="offer">
-      <div class="container-fluid" data-aos="fade-up">
+      <div class="small-container" data-aos="fade-up">
         <div class="row">
           <div class="col-2">
             <img src="images/exclusive.png" class="offer-img" />
           </div>
           <div class="col-2">
             <p>Exclusively Available on RedStore</p>
-            <h1>Smart Band 4</h1>
+            <h1 class="offer-title">Smart Band 4</h1>
             <small
               >The Mi Smart Band 4 feature a 39.9% larger(than Mi Band 3) AMOLCD
               color full touch display with adjustable brightness ,so everything
@@ -552,5 +561,9 @@ <h3>Follow Us</h3>
   document.getElementById("myDiv").style.display = "block";
   }
 </script>
+
+    <script src="theme.js"></script>
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
   </body>
 </html>