From 96e0eed2d4c25bb120afe5c39e3ad2dd0f08a681 Mon Sep 17 00:00:00 2001
From: snehas-05 <snehasinghania005@gmail.com>
Date: Fri, 1 Nov 2024 08:36:29 +0000
Subject: [PATCH 1/2] commit changes

---
 animated_counters/counters.html | 123 ++++++++++++++++++++++++++++++++
 1 file changed, 123 insertions(+)
 create mode 100644 animated_counters/counters.html
diff --git a/animated_counters/counters.html b/animated_counters/counters.html
new file mode 100644
index 0000000..486c886
--- /dev/null
+++ b/animated_counters/counters.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Animated Counters</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+        }
+
+        .stats-section {
+            background-color: #f7f7f7;
+            padding: 50px 0;
+            text-align: center;
+        }
+
+        .stats-grid {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .stat {
+            flex-basis: 30%;
+            margin: 20px;
+        }
+
+        .stat-number {
+            font-size: 48px;
+            font-weight: bold;
+            color: #333;
+            transition: color 0.5s;
+        }
+
+        .stat-number.active {
+            color: #4CAF50; /* Change color when active */
+        }
+
+        .stat p {
+            font-size: 18px;
+            color: #666;
+            margin-top: 10px;
+        }
+    </style>
+</head>
+<body>
+
+<section class="stats-section">
+    <div class="container">
+        <div class="stats-grid">
+            <div class="stat">
+                <span class="stat-number" data-target="100">0</span>
+                <p>Projects Completed</p>
+            </div>
+            <div class="stat">
+                <span class="stat-number" data-target="500">0</span>
+                <p>Happy Clients</p>
+            </div>
+            <div class="stat">
+                <span class="stat-number" data-target="2000">0</span>
+                <p>Lines of Code Written</p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<script>
+    const statsSection = document.querySelector('.stats-section');
+    const statNumbers = document.querySelectorAll('.stat-number');
+
+    let animationTriggered = false;
+
+    window.addEventListener('scroll', () => {
+        if (isElementInViewport(statsSection) && !animationTriggered) {
+            animationTriggered = true;
+            animateCounters(2000); // Customize duration here (in milliseconds)
+        }
+    });
+
+    function isElementInViewport(el) {
+        const rect = el.getBoundingClientRect();
+        return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+        );
+    }
+
+    function animateCounters(duration) {
+        statNumbers.forEach((statNumber) => {
+            const targetValue = parseInt(statNumber.getAttribute('data-target'));
+            let currentValue = 0;
+            const startTime = performance.now();
+
+            const animation = (currentTime) => {
+                const elapsedTime = currentTime - startTime;
+                const progress = Math.min(elapsedTime / duration, 1);
+                currentValue = Math.floor(easeInOutQuad(progress) * targetValue);
+                statNumber.textContent = currentValue.toLocaleString();
+
+                if (progress < 1) {
+                    requestAnimationFrame(animation);
+                } else {
+                    statNumber.classList.add('active');
+                }
+            };
+
+            requestAnimationFrame(animation);
+        });
+    }
+
+    // Easing function for a smoother animation
+    function easeInOutQuad(t) {
+        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+    }
+</script>
+
+</body>
+</html>
\ No newline at end of file

From 88f8f4b5f3686d35318112f553ff58a59e053d9f Mon Sep 17 00:00:00 2001
From: snehas-05 <snehasinghania005@gmail.com>
Date: Sun, 3 Nov 2024 09:33:42 +0000
Subject: [PATCH 2/2] commit changes

---
 index.html | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/index.html b/index.html
index e272dfa..ff1db7e 100644
--- a/index.html
+++ b/index.html
@@ -1114,6 +1114,11 @@ <h2 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Downlo
 
     <div class="footer" style="background-color: hsl(20, 43%, 93%);">
         <footer>
+            <p>&copy; 2024 RETRO Website</p>
+  <nav>
+    <a href="counters.html">Home</a> 
+    <a href="/workspaces/Retro/animated_counters/counters.html">Milestones</a> 
+    </nav>
             <div class="foot-panel2" style="background-color:hsl(20, 43%, 93%);font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">
                 <ul>
                     <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);text-align: left;">Our Pages</p>
