<div class="stats-container">
<div class="stat-box">
<div class="count" data-target="1500">0</div>
<p>Happy Clients</p>
</div>
<div class="stat-box">
<div class="count" data-target="350">0</div>
<p>Projects Done</p>
</div>
<div class="stat-box">
<div class="count" data-target="24">0</div>
<p>Awards Won</p>
</div>
</div>
.stats-container {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
display: flex;
gap: 40px;
justify-content: center;
padding: 40px;
background: #f9fafb;
border-radius: 16px;
}
.stat-box {
text-align: center;
}
.count {
font-size: 3rem;
font-weight: 800;
color: #2563eb;
margin-bottom: 5px;
}
.stat-box p {
font-size: 1rem;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
}
const counters = document.querySelectorAll(".count");
counters.forEach((counter) => {
const updateCount = () => {
const target = +counter.getAttribute("data-target");
const count = +counter.innerText;
const increment = target / 100;
if (count < target) {
counter.innerText = Math.ceil(count + increment);
setTimeout(updateCount, 20);
} else {
counter.innerText = target;
}
};
updateCount();
});
