Added some cool functionality...

assets/css/style.css

@@ -154,6 +154,10 @@ nav.nav-w {
 .img-col-mr-13 {
   margin-right: 13rem;
 }
+.vert-move {
+  border-radius: 10%;
+  box-shadow: inset 0px 0px 19px 5px #fff, inset 20px 0 80px #f0f, inset -20px 0 80px #0ff, inset 20px 0 100px #f0f, inset -20px 0 50px #0ff, 0 0 50px #fff, -10px 0 30px  #5600ff5e, 10px 0 30px #fe000038;
+}
 
 .has-image-centered {
   margin-left: auto;
@@ -178,6 +182,20 @@ nav.nav-w {
   margin: 0 auto;
 }
 
+/* Preloader */
+.boxOne::after{
+  content: "+";
+  font-size: 1.8rem;
+}
+.boxTwo::after{
+  content: "+";
+  font-size: 1.8rem;
+}
+.boxThree::after{
+  content: "+";
+  font-size: 1.8rem;
+}
+
 
 
 .title.lined {

assets/js/script.js

@@ -12,7 +12,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
 
   if ($navbarBurgers.length > 0) {
-    $navbarBurgers.forEach( el => {
+    $navbarBurgers.forEach(el => {
       el.addEventListener('click', () => {
         const target = el.dataset.target;
         const $target = document.getElementById(target);
@@ -25,14 +25,14 @@ document.addEventListener('DOMContentLoaded', () => {
 
 $(document).ready(function() {
   $(".navbar-burger").click(function() {
-      $(".navbar-burger").toggleClass("is-active");
-      $(".navbar-menu").toggleClass("is-active");
+    $(".navbar-burger").toggleClass("is-active");
+    $(".navbar-menu").toggleClass("is-active");
   });
 });
 
 // navbar on scroll
-$(function () {
-  $(window).on("scroll", function () {
+$(function() {
+  $(window).on("scroll", function() {
     if ($(window).scrollTop() > 700) {
       $("nav").addClass("nav-w");
       $(".navbar-menu").addClass("nav-w");
@@ -54,15 +54,15 @@ $(function () {
 // back to top
 var btn = $("#backtotop");
 
-$(window).scroll(function () {
+$(window).scroll(function() {
   if ($(window).scrollTop() > 100) {
     btn.addClass("show");
   } else {
     btn.removeClass("show");
   }
 });
 
-btn.on("click", function (e) {
+btn.on("click", function(e) {
   e.preventDefault();
   $("html, body").animate({ scrollTop: 0 }, "300");
 });
@@ -71,3 +71,61 @@ btn.on("click", function (e) {
 document.getElementById("cp-year").innerHTML = new Date().getFullYear()
 
 
+Number.prototype.format = function(n) {
+  var r = new RegExp('\\d(?=(\\d{3})+' + (n > 0 ? '\\.' : '$') + ')', 'g');
+  return this.toFixed(Math.max(0, Math.floor(n))).replace(r, '$&,');
+};
+
+$('.counter').each(function() {
+  $(this).prop('counter', 0).animate({
+    counter: $(this).text()
+  }, {
+    duration: 10000,
+    easing: 'easeOutExpo',
+    step: function(step) {
+      $(this).text('' + step.format());
+    }
+  });
+});
+
+
+// ------------------ Start ----------------------
+
+document.getElementById("cp-year").innerHTML = new Date().getFullYear();
+// conter Boxs
+let boxOne = document.getElementsByClassName("boxOne"); // 380+
+let boxTwo = document.getElementsByClassName("boxTwo"); // 85+
+let boxThree = document.getElementsByClassName("boxThree"); // 100,000+
+
+// Counter function
+const counter = () => {
+  // First Counter
+  let count = setInterval(() => {
+    let i = parseInt(boxOne[0].innerText);
+    boxOne[0].innerText = (i += 5).toString();
+    if (i == 380) {
+      clearInterval(count);
+    }
+  }, 21);
+
+  // Second Counter
+  let countTow = setInterval(() => {
+    let j = parseInt(boxTwo[0].innerText);
+    boxTwo[0].innerText = (j += 5).toString();
+    if (j == 85) {
+      clearInterval(countTow);
+    }
+  }, 59);
+
+  // Thired Counter
+  let countThree = setInterval(() => {
+    let k = parseInt(boxThree[0].innerText);
+    boxThree[0].innerText = (k += 500).toString();
+    if (k === 100000) {
+      clearInterval(countThree);
+    }
+  }, 5);
+};
+counter()
+
+//-------------------- End ---------------------

index.html

@@ -265,19 +265,22 @@ <h1 class="title lined">Stats</h1>
     </div>
 
     <div class="columns mt-6">
+
+
       <div class="column has-text-centered">
-        <p class="title has-text-weight-bold lined">380+</p>
+        <p class="boxOne title has-text-weight-bold lined">0</p>
         <span class="subtitle has-text-weight-bold blurple"><i class="fa-solid fa-server"></i> Servers</span>
       </div>
 
       <div class="column has-text-centered">
-        <p class="title has-text-weight-bold lined">85+</p>
+        <p class="boxTwo title has-text-weight-bold lined">0</p>
         <span class="subtitle has-text-weight-bold blurple"><i class="fa-solid fa-terminal"></i> Commands</span>
       </div>
 
       <div class="column has-text-centered">
-        <p class="title has-text-weight-bold lined">100,000+</p>
+        <p class="boxThree title has-text-weight-bold lined">0</p>
         <span class="subtitle has-text-weight-bold blurple"><i class="fa-solid fa-users"></i> Users</span>
+
       </div>
     </div>
   </section>