| Server IP : 104.21.21.239 / Your IP : 216.73.216.11 Web Server : Apache/2.4.68 (Amazon Linux) OpenSSL/3.5.5 System : Linux ip-172-31-69-123.ec2.internal 6.1.176-223.369.amzn2023.x86_64 #1 SMP PREEMPT_DYNAMIC Fri Jul 24 13:34:27 UTC 2026 x86_64 User : ec2-user ( 1000) PHP Version : 8.4.23 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /home/home2/domains/nycyouth/Package-HTML/Canvas 7 Files/ |
Upload File : |
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="author" content="SemiColonWeb">
<meta name="description" content="Get Canvas to build powerful websites easily with the Highly Customizable & Best Selling Bootstrap Template, today.">
<!-- Font Imports -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=PT+Serif:ital@0;1&display=swap" rel="stylesheet">
<!-- Core Style -->
<link rel="stylesheet" href="style.css">
<!-- Font Icons -->
<link rel="stylesheet" href="css/font-icons.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Document Title
============================================= -->
<title>Counter | Canvas</title>
<style>
.counter-text-char {
background-color: #e83e8c;
margin: 0 3px;
display: inline-block;
padding: 4px 10px 0;
min-width: 50px;
color: #FFF;
line-height: 1.3;
border-radius: 4px;
}
.counter-text-char:nth-last-child(3n+0) {
background-color: #FFF;
color: #999;
font-weight: 400;
padding: 0;
margin: 0;
min-width: 30px;
}
@media (max-width: 991.98px) {
.counter.counter-chars,
.counter-text-char {
font-size: calc(.475rem + 2.7vw);
line-height: 1.8 !important;
min-width: 20px;
margin: 0 1px;
}
.counter-text-char:nth-last-child(3n+0) { display: none; }
}
</style>
</head>
<body class="stretched">
<!-- Document Wrapper
============================================= -->
<div id="wrapper">
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap bg-light d-flex min-vh-100 align-items-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="card border-f5 shadow-sm">
<div class="card-body text-center p-5">
<h3 class="mb-0">Funds Raising For Hunger During COVID 19</h3>
<div class="counter counter-chars customjs my-4"><span class="counter-text me-2" data-from="100637100" data-to="446538746" data-refresh-interval="50" data-speed="3600"></span>$</div>
<p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam fugit, dignissimos nulla. Autem itaque aperiam quam perferendis non possimus aut necessitatibus sit laboriosam illo eaque labore impedit, explicabo doloremque sunt.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section><!-- #content end -->
</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="uil uil-angle-up"></div>
<!-- JavaScripts
============================================= -->
<script src="js/jquery.js"></script>
<script src="js/functions.js"></script>
<script>
// custom callback when counting completes
jQuery('.counter-text').countTo({
onUpdate: function (value) {
let h1 = document.querySelector(".counter-text"); // Get reference to the h1
let text = h1.textContent.split(""); // Get the text content into an array
let result = ""; // Will hold output
// Loop over the array
text.forEach(function(char){
// Append a new span only if the current char is not a space
result += (char.trim() === "") ? "" : "<span class='counter-text-char'>" + char + "</span>";
});
h1.innerHTML = result; // Reset the h1's content
},
formatter: function (value, options) {
value = value.toFixed(options.decimals);
value = value.replace(/\B(?=(\d{2})+(?!\d))/g, ',');
return value;
}
});
</script>
</body>
</html>