Merge pull request #789 from Peart-Guy/main

Added the visitor Counter

index.html

@@ -599,6 +599,35 @@ <h1>Contact Us</h1>
             </ul>
         </div>
 
+        <div class="visitor-counter">
+            <span class="icon">👁️</span> <!-- You can replace this with an eye icon image if you prefer -->
+            <span id="visitorCount">Visitors Count:</span>
+            <span class="website-counter">0</span>
+        </div>
+    <script>
+          // Function to get the count from localStorage or initialize it
+    function getVisitorCount() {
+    return localStorage.getItem('visitorCount') || 0;
+    }
+
+    // Function to increment and save the count
+    function incrementVisitorCount() {
+    let count = parseInt(getVisitorCount()) + 1;
+    localStorage.setItem('visitorCount', count);
+    return count;
+    }
+
+    // Function to display the count
+    function displayVisitorCount() {
+    const counterElement = document.querySelector('.website-counter');
+    const count = incrementVisitorCount();
+    counterElement.textContent = count;
+    }
+
+    // Call the display function when the page loads
+    document.addEventListener('DOMContentLoaded', displayVisitorCount);
+    </script>
+
         <div class=" footer-section quick-links ">
             <h1>Quick Links</h1>
             <ul class="footer-list">

style.css

@@ -844,6 +844,30 @@ html {
   background-color: #14171a;
 }
 
+
+.visitor-counter {
+  position: absolute;
+  background-color: #000000;
+  color: rgb(255, 255, 255);
+  top: 3618px;
+  padding: 10px 20px;
+  border-radius: 19px;
+  display: inline-flex;
+  align-items: center;
+  font-family: Arial, sans-serif;
+  margin-left: 0px;
+  z-index: 10; /* Ensure it stays on top of the border */
+}  
+
+.visitor-counter .icon {
+  margin-right: 10px;
+}
+
+
+
+
+
+
 .quick-links .footer-list a {
     position: relative; 
 }
@@ -1318,7 +1342,7 @@ input {
   width: 200px;
 
   height: 270px;
-=======
+
   height: 290px;
   transition: 1s;
 }