From 80c009905af898d8e0ab9db4d1b8a9d0c8726429 Mon Sep 17 00:00:00 2001
From: Adarsh-Chaubey03 <adarsh03chaubey@gmail.com>
Date: Sun, 27 Oct 2024 20:03:36 +0530
Subject: [PATCH] updated footer

---
 aboutus.html | 280 ++++++++++++++++++++++++++++++---------------------
 index.html   |  17 +++-
 style.css    | 205 ++++++++++++-------------------------
 visi.js      |  19 ++++
 4 files changed, 260 insertions(+), 261 deletions(-)
 create mode 100644 visi.js

diff --git a/aboutus.html b/aboutus.html
index b172480..4d66473 100644
--- a/aboutus.html
+++ b/aboutus.html
@@ -7,7 +7,9 @@
     <title>About Us - GamingTools</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+        integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
 
     <link rel="stylesheet" href="style.css">
     <link rel="shortcut icon" href="images/logo.png" type="image/x-icon">
@@ -40,13 +42,13 @@
             padding: 40px 0;
         }
 
-        h2
-         {
+        h2 {
             color: #c7becf;
             text-align: center;
             margin-bottom: 40px;
         }
-        h1{
+
+        h1 {
             color: rgb(255, 255, 255);
             text-align: center;
             transition: transform 0.3s ease-in-out;
@@ -56,7 +58,7 @@
             transform: scale(1.2);
         }
 
-        h2{
+        h2 {
             color: #f4be0c;
             text-align: center;
             margin-bottom: 40px;
@@ -77,7 +79,7 @@
             text-align: center;
         }
 
-    
+
 
         .feature:hover {
             transform: translateX(-5px);
@@ -89,8 +91,8 @@
             margin-top: 20px;
         }
 
-        .feature p{
-            color:#8058ad;
+        .feature p {
+            color: #8058ad;
             font-weight: 600;
         }
 
@@ -121,6 +123,9 @@
             bottom: 0;
             animation: rocket 4s linear infinite;
         }
+        .footer h2{
+            text-align: left;
+        }
 
         @keyframes rocket {
             0% {
@@ -133,44 +138,58 @@
                 opacity: 1;
             }
         }
-        .head{
+
+        .head {
             text-align: center;
         }
+
         .h2 {
-    display: inline-block; /* Ensures the animation applies correctly */
-    overflow: hidden; /* Hides the text that is not yet visible */
-    white-space: nowrap; /* Prevents the text from wrapping */
-    border-right: 3px solid; /* Creates a cursor effect */
-    
-    animation: typing 2.5s steps(15), blink-caret 0.75s step-end infinite; /* Adjust steps based on characters */
-}
-
-/* Typing effect */
-@keyframes typing {
-    from {
-        width: 0; /* Start with no width */
-    }
-    to {
-        width: 15ch; /* End with width equal to the length of the text */
-    }
-}
-
-/* Blinking cursor effect */
-@keyframes blink-caret {
-    from, to {
-        border-color: transparent; /* No border */
-    }
-    50% {
-        border-color: black; /* Visible border */
-    }
-}
+            display: inline-block;
+            /* Ensures the animation applies correctly */
+            overflow: hidden;
+            /* Hides the text that is not yet visible */
+            white-space: nowrap;
+            /* Prevents the text from wrapping */
+            border-right: 3px solid;
+            /* Creates a cursor effect */
+
+            animation: typing 2.5s steps(15), blink-caret 0.75s step-end infinite;
+            /* Adjust steps based on characters */
+        }
 
+        /* Typing effect */
+        @keyframes typing {
+            from {
+                width: 0;
+                /* Start with no width */
+            }
+
+            to {
+                width: 15ch;
+                /* End with width equal to the length of the text */
+            }
+        }
+
+        /* Blinking cursor effect */
+        @keyframes blink-caret {
+
+            from,
+            to {
+                border-color: transparent;
+                /* No border */
+            }
+
+            50% {
+                border-color: black;
+                /* Visible border */
+            }
+        }
     </style>
 </head>
 
 <body>
-    
-      
+
+
     <div class="navbar">
         <div class="logo-outer">
             <a href="/"> <img src="images/logo.png" class="logo" alt="Logo"></a>
@@ -186,15 +205,15 @@
                 <li><a href="index.html">Others</a></li>
                 <li class="login"><a href="login/login.html">Login</a></li>
                 <li><label class="switch">
-                    <input type="checkbox" id="theme-toggle" onchange="toggleTheme()">
-                    <span class="slider"></span>
-                </label></li>
+                        <input type="checkbox" id="theme-toggle" onchange="toggleTheme()">
+                        <span class="slider"></span>
+                    </label></li>
                 <!-- Inside the navbar ul -->
-                
+
                 <a href="#" class="cart-button">
                     <img src="images/cart.png" alt="Cart Icon">
                     <span id="cart-count">0</span>
-                    </a>
+                </a>
 
             </ul>
 
@@ -220,13 +239,14 @@
 
     <div class="container main-content">
         <h1>About <span> GamingTools</h1>
-        <p class="intro typewriter">Welcome to GamingTools, your ultimate destination for premium gaming accessories. We're
+        <p class="intro typewriter">Welcome to GamingTools, your ultimate destination for premium gaming accessories.
+            We're
             passionate about providing gamers with the best tools to elevate their gaming experience to new heights.</p>
         <div class="head">
             <h2 class="h2">Why Choose Us?</h2>
         </div>
 
-        
+
         <div class="features-grid">
             <div class="feature" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="200">
                 <i class="fas fa-gamepad feature-icon"></i>
@@ -292,10 +312,10 @@ <h2 class="logo-text">Collect your GamingTools</h2>
                     Your one-stop shop for premium gaming accessories. Elevate your gaming experience with our
                     curated
                     selection of controllers, VR gear, and more.
-                </p>
+                </p><br>
                 <div class="contact">
                     <span><a href="tel:123-456-789" style="color: white; text-decoration: none;"><i
-                                class="fas fa-phone"></i> &nbsp; 123-456-789</a></span>
+                                class="fas fa-phone"></i> &nbsp; 123-456-789</a></span><br>
                     <span><a href="mailto:info@gamingtools.com" style="color: white; text-decoration: none;"><i
                                 class="fas fa-envelope"></i> &nbsp; info@gamingtools.com</a></span>
                 </div>
@@ -312,10 +332,10 @@ <h2 class="logo-text">Collect your GamingTools</h2>
                 <h2>Quick Links</h2>
                 <ul>
                     <li><a href="index.html">Home</a></li>
-                    <li><a href="index.html">Products</a></li>
+                    <li><a href="#">Products</a></li>
                     <li><a href="aboutus.html">About Us</a></li>
-                    <li><a href="index.html#contact">Contact</a></li>
-                    <li><a href="index.html#faq">FAQ</a></li>
+                    <li><a href="#contact">Contact</a></li>
+                    <li><a href="#faq">FAQ</a></li>
                     <li><a href="contributor/contributor.html">Contributors</a></li>
                 </ul>
             </div>
@@ -326,14 +346,27 @@ <h2>Legal Links</h2>
                     <li><a href="Policies/PrivacyPolicy/PrivacyPolicy.html">Privacy Policy</a></li>
                     <li><a href="#">Terms of Service </a></li>
                     <li><a href="#">Cookie Policy</a></li>
+
                     <li><a href="disclaimer/disclaimer.html">Disclaimer</a></li>
+
+
+
                     <li><a href="Policies/returnPolicy.html">Return Policy</a></li>
 
                     <li><a href="#">Copyright Notice</a></li>
                 </ul>
             </div>
 
-
+            <!-- New Feedback Section -->
+            <div class="footer-section feedback">
+                <h2>Feedback</h2>
+                <form action="#" method="post">
+                    <input type="text" name="name" placeholder="Your Name" required>
+                    <input type="email" name="email" placeholder="Your Email" required>
+                    <textarea name="message" placeholder="Your Feedback" required></textarea>
+                    <button type="submit">Submit</button>
+                </form>
+            </div>
         </div>
 
         <div class="visitor-counter">
@@ -349,75 +382,88 @@ <h2>Legal Links</h2>
         </div>
 
     </footer>
-
     <!-- SIDEBAR -->
 
-    <div class="social-sidebar">
-        <div class="close-btn" id="SideBar" onclick="toggleSidebar()" title="Close Sidebar">&times;</div>
-        <ul id="sidebar-content">
-            <li><a class="facebook" href="https://www.facebook.com/"><i class="fa-brands fa-meta"></i></a></li>
-            <li><a class="twitter" href="https://x.com/"><i class="fa-brands fa-x-twitter"></i></a></li>
-            <li><a class="instagram" href="https://www.instagram.com/"><i class="fa-brands fa-instagram"></i></a>
-            </li>
-            <li><a class="youtube" href="https://www.youtube.com/"><i class="fa-brands fa-youtube"></i></a></li>
-        </ul>
-    </div>
-    <div class="toggle-arrow" onclick="toggleSidebar()" title="Open Sidebar" style="display: none;">
-        <span>&#8249;</span>
-    </div>
-    <!-- Scroll to Top Button -->
-    <button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top">
-        <div class="scroll-top-icon">
-            <ion-icon name="arrow-up-outline"></ion-icon>
+        <div class="social-sidebar">
+            <div class="close-btn" id="SideBar" onclick="toggleSidebar()" title="Close Sidebar">&times;</div>
+            <ul id="sidebar-content">
+                <li><a class="facebook" href="https://www.facebook.com/"><i class="fa-brands fa-meta"></i></a></li>
+                <li><a class="twitter" href="https://x.com/"><i class="fa-brands fa-x-twitter"></i></a></li>
+                <li><a class="instagram" href="https://www.instagram.com/"><i class="fa-brands fa-instagram"></i></a>
+                </li>
+                <li><a class="youtube" href="https://www.youtube.com/"><i class="fa-brands fa-youtube"></i></a></li>
+            </ul>
         </div>
-        <svg class="progress-ring" width="60" height="60">
-            <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
-                cy="30"></circle>
-        </svg>
-    </button>
-
-    <script>
-        let cartItemCount = 0;
-
-        // Function to handle Add to Cart button click
-        document.getElementById('cart-btn').addEventListener('click', function () {
-            cartItemCount++; // Increment cart count
-            document.getElementById('cart-count').textContent = cartItemCount; // Update cart count display
-            alert('Item added to cart'); // Show alert
-        });
-
-    </script>
-
-    <!-- this script is for twitter icon  starts -->
-    <script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>
-    <!-- this script is for twitter icon  ends -->
-
-    <!-- Scripts -->
-    <script src="script.js"></script>
-    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
-    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
-
-    <script>
-        window.embeddedChatbotConfig = {
-            chatbotId: "awMKW3zFwW7jzUNsN4Q8O",
-            domain: "www.chatbase.co"
-        }
-    </script>
-    <script src="https://www.chatbase.co/embed.min.js" chatbotId="awMKW3zFwW7jzUNsN4Q8O" domain="www.chatbase.co" defer>
-    </script>
-    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
-    <script>
-        AOS.init();
-    </script>
-
-
-    <div class="gtranslate_wrapper"></div>
-    <script>window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }</script>
-    <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
-    <script>
-        AOS.init();
-      </script>
+        <div class="toggle-arrow" onclick="toggleSidebar()" title="Open Sidebar" style="display: none;">
+            <span>&#8249;</span>
+        </div>
+
+
+        <!-- Scroll to Top Button -->
+        <button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top">
+            <div class="scroll-top-icon">
+                <ion-icon name="arrow-up-outline"></ion-icon>
+            </div>
+            <svg class="progress-ring" width="60" height="60">
+                <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28"
+                    cx="30" cy="30"></circle>
+            </svg>
+        </button>
+
+        <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
+        <script>
+            var swiper = new Swiper('.swiper-container', {
+                slidesPerView: 1,
+                spaceBetween: 30,
+                loop: true,
+                pagination: {
+                    el: '.swiper-pagination',
+                    clickable: true,
+                },
+                navigation: {
+                    nextEl: '.swiper-button-next',
+                    prevEl: '.swiper-button-prev',
+                },
+            });
+
+        </script>
+
+        <!-- this script is for twitter icon  starts -->
+        <script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>
+        <!-- this script is for twitter icon  ends -->
+
+        <!-- Scripts -->
+        <!-- testimonial script -->
+        <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+
+        <script src="script.js"></script>
+        <script src="popup/popup.js"></script>
+        <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
+        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
+
+        <script>
+            window.embeddedChatbotConfig = {
+                chatbotId: "awMKW3zFwW7jzUNsN4Q8O",
+                domain: "www.chatbase.co"
+            }
+        </script>
+        <script src="https://www.chatbase.co/embed.min.js" chatbotId="awMKW3zFwW7jzUNsN4Q8O" domain="www.chatbase.co"
+            defer>
+            </script>
+        <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+        <script>
+            AOS.init();
+        </script>
+
+        <div class="gtranslate_wrapper"></div>
+        <script>window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }</script>
+        <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.6/lottie.min.js"></script>
+        <script src="./Loader/Loader.js"></script>
+
+        </script>
 </body>
 
 
-</html>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index e4e836b..32e96ac 100644
--- a/index.html
+++ b/index.html
@@ -609,10 +609,10 @@ <h2 class="logo-text">Collect your GamingTools</h2>
                         Your one-stop shop for premium gaming accessories. Elevate your gaming experience with our
                         curated
                         selection of controllers, VR gear, and more.
-                    </p>
+                    </p><br>
                     <div class="contact">
                         <span><a href="tel:123-456-789" style="color: white; text-decoration: none;"><i
-                                    class="fas fa-phone"></i> &nbsp; 123-456-789</a></span>
+                                    class="fas fa-phone"></i> &nbsp; 123-456-789</a></span><br>
                         <span><a href="mailto:info@gamingtools.com" style="color: white; text-decoration: none;"><i
                                     class="fas fa-envelope"></i> &nbsp; info@gamingtools.com</a></span>
                     </div>
@@ -653,8 +653,17 @@ <h2>Legal Links</h2>
                         <li><a href="#">Copyright Notice</a></li>
                     </ul>
                 </div>
-
-
+                
+            <!-- New Feedback Section -->
+            <div class="footer-section feedback">
+                <h2>Feedback</h2>
+                <form action="#" method="post">
+                    <input type="text" name="name" placeholder="Your Name" required>
+                    <input type="email" name="email" placeholder="Your Email" required>
+                    <textarea name="message" placeholder="Your Feedback" required></textarea>
+                    <button type="submit">Submit</button>
+                </form>
+            </div>
             </div>
 
             <div class="visitor-counter">
diff --git a/style.css b/style.css
index c3b0911..c0c8f25 100644
--- a/style.css
+++ b/style.css
@@ -825,181 +825,104 @@ button {
   font-weight: 600;
   line-height: 1;
 }
-
 .footer {
-  background: linear-gradient(to right, #e1306c, #28163e);
-  color: #ffffff;
-  width: 100%;
-  padding: 50px 0 0;
-  font-family: "Arial", sans-serif;
+    background: linear-gradient(to right, #e1306c, #28163e);
+    color: #ffffff;
+    width: 100%;
+    padding-top:40px;
+    font-family: "Arial", sans-serif;
 }
 
 .footer-content {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-around;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 20px;
-}
-
-.links-tag {
-  width: 100%;
-  display: flex;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    max-width: 100%;
+    margin: 0;
+    padding: 0 30px;
 }
 
 .footer-section {
-  flex: 1;
-  margin-bottom: 40px;
-  min-width: 300px;
-  padding: 0 20px;
-  /* margin-left: 20px; */
-
+    flex: 1;
+    margin: 0 15px; /* Uniform spacing between columns */
+    min-width: 250px;
 }
 
-.quick-links {
-  margin-left: -180px;
+.footer-section:first-child {
+    margin-left: -10px; /* Ensure the first column starts with max 30px margin */
 }
 
 .footer h2 {
-  color: white;
-  font-size: 1.3em;
-  margin-bottom: 20px;
-}
-
-.logo-container {
-  display: flex;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.footer-logo {
-  width: 60px;
-  height: auto;
-  margin-right: 15px;
-}
-
-.logo-outer {
-  display: flex;
-  align-items: center;
-}
-
-.logo-text {
-  font-size: 1.5em;
-  margin: 0;
-}
-
-.about-text {
-  line-height: 1.5;
-  margin-bottom: 20px;
-}
-
-.contact span {
-  display: block;
-  font-size: 1.1em;
-  margin-bottom: 8px;
+    color: white;
+    font-size: 1.2em;
+    margin-bottom: 15px;
 }
 
 .socials {
-  margin-top: 20px;
+    margin-top: 15px;
 }
 
 .socials a {
-  display: inline-block;
-  width: 40px;
-  height: 40px;
-  background: rgb(101, 53, 53);
-  margin-right: 10px;
-  text-align: center;
-  line-height: 40px;
-  border-radius: 50%;
-  color: #ffffff;
-  position: relative;
-  z-index: 1;
-  transition: all 0.3s ease, transform 0.3s ease, background 0.3s ease;
+    display: inline-block;
+    width: 35px;
+    height: 35px;
+    background: rgb(101, 53, 53);
+    margin-right: 8px;
+    text-align: center;
+    line-height: 35px;
+    border-radius: 50%;
+    color: #ffffff;
+    transition: all 0.3s ease;
 }
 
 .socials a:hover {
-  transform: scale(1.2) rotate(10deg);
-  /* Zoom and rotate effect */
-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
-  /* Add shadow on hover */
-}
-
-/* Hover zoom and color change effect for social icons */
-.socials .facebook:hover {
-  background: linear-gradient(to right, #e1306c, #f77737);
-  /* Gradient background */
-  color: white;
-}
-
-.socials .instagram:hover {
-  background: linear-gradient(to right, #e1306c, #f77737);
-  /* Instagram gradient */
-  color: white;
-}
-
-.socials .twitter:hover {
-  background: linear-gradient(to right, #e1306c, #f77737);
-  /* Gradient for X (Twitter) */
-  color: white;
+    transform: scale(1.15) rotate(10deg);
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
 }
 
-.socials .youtube:hover {
-  background: linear-gradient(to right, #e1306c, #f77737);
-  /* YouTube gradient */
-  color: white;
-}
-
-/* Links hover effect */
 .links ul {
-  list-style-type: none;
-  padding: 0;
+    list-style-type: none;
+    padding: 0;
 }
 
 .links ul a {
-  display: block;
-  margin-bottom: 10px;
-  font-size: 1.1em;
-  color: #d3d3d3;
-  text-decoration: none;
-  position: relative;
-  transition: all 0.3s ease;
+    display: block;
+    margin-bottom: 8px;
+    font-size: 1em;
+    color: #d3d3d3;
+    text-decoration: none;
+    position: relative;
+    transition: all 0.3s ease;
 }
 
-.links ul a::before {
-  content: "";
-  position: absolute;
-  width: 5px;
-  height: 100%;
-  background-color: white;
-  left: 0;
-  top: 0;
-  transform: scaleY(0);
-  transition: transform 0.3s ease;
-  transform-origin: top;
+.feedback form {
+    display: flex;
+    flex-direction: column;
 }
 
-.links ul a:hover {
-  color: #fbca60;
-  padding-left: 10px;
+.feedback input,
+.feedback textarea {
+    background: #28163e;
+    color: white;
+    border: none;
+    padding: 10px;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    width: 100%;
 }
 
-.links ul a:hover::before {
-  transform: scaleY(1);
-  /* Add a vertical line effect on hover */
+.feedback button {
+    background: #e1306c;
+    color: white;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+    transition: background 0.3s ease;
+    border-radius: 5px;
 }
 
-
-.contact-form .text-input {
-  background: #272727;
-  color: #bebdbd;
-  margin-bottom: 20px;
-  line-height: 1.5rem;
-  padding: 10px 15px;
-  border: none;
-  width: 100%;
-  border-radius: 5px;
+.feedback button:hover {
+    background: #f77737;
 }
 
 .footer-bottom {
@@ -1016,9 +939,11 @@ button {
   font-size: 14px;
   /* Font size */
   border-top: 1px solid #ff71aa;
+  margin-bottom: 0;
   /* Dull pink border on top */
 }
 
+
 .footer-bottom a {
   color: #e182d0;
   /* Dull pink for links */
diff --git a/visi.js b/visi.js
new file mode 100644
index 0000000..3d093d1
--- /dev/null
+++ b/visi.js
@@ -0,0 +1,19 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const counterElement = document.querySelector(".website-counter");
+
+    // Check if visitor count is already stored in localStorage
+    let visitorCount = localStorage.getItem("visitorCount");
+
+    if (visitorCount === null) {
+        // Initialize visitor count if not already set
+        visitorCount = 1;
+        localStorage.setItem("visitorCount", visitorCount);
+    } else {
+        // Increment the existing visitor count
+        visitorCount = parseInt(visitorCount) + 1;
+        localStorage.setItem("visitorCount", visitorCount);
+    }
+
+    // Display the visitor count in the designated element
+    counterElement.textContent = visitorCount;
+});