How To Make Animating Counter On Website Using HTML CSS JavaScript
How To Make Animating Counter On Website Using HTML CSS JavaScript | Legenddocx Creation |
Source Code:--
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<!-- Latest compiled and minified CSS -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<style>
body
{
background-image: url(ser.jpg);
}
.counter{
margin-top: 20%;
}
.portfolio-icon-box {
border: 1px solid red;
height: 70px;
width: 70px;
border-radius: 10px;
margin: 20px auto;
transform: rotate(45deg);
}
.portfolio-icon-box:hover {
border: 1px solid cyan;
height: 70px;
width: 70px;
border-radius: 10px;
margin: 20px auto;
transform: rotate(-45deg);
}
.portfolio-icon-box .fas {
font-size: 30px;
margin-top: 20px;
color: cyan;
transform: rotate(-45deg);
}
.portfolio-icon-box .fas:hover {
color: fuchsia;
transition: .5s;
transform: rotate(45deg);
}
.portfolio-icon-box-center {
text-align: center;
margin-top: 20px;
}
.portfolio-counter-box {
font-size:
font-family:sans-serif;
letter-spacing: 1px;
font-size:
text-transform: uppercase;
color: white;,
}
.portfolio-conuter {
font-size: 50px;
color: white;
}
</style>
</head>
<body>
<div class="counter">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 portfolio-icon-box-center">
<div class="portfolio-icon-box "><i class="fas fa-user-friends"></i></div>
<h2><span class="portfolio-conuter">6</span><span style="color: white; font-size: 50px;"><sup>+</sup></span></h2>
<p class="portfolio-counter-box">Happy Clients</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 portfolio-icon-box-center">
<div class="portfolio-icon-box "><i class="fas fa-calendar-check"></i></div>
<h2><span class="portfolio-conuter">3</span><span style="color: white; font-size: 50px;"><sup>+</sup></span></h2>
<p class="portfolio-counter-box">project copleted</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 portfolio-icon-box-center">
<div class="portfolio-icon-box "><i class="fas fa-clock"></i></div>
<h2><span class="portfolio-conuter">6</span><span style="color: white; font-size: 50px;"><sup>+</sup></span></h2>
<p class="portfolio-counter-box">Months in industry</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 portfolio-icon-box-center">
<div class="portfolio-icon-box "><i class="fas fa-heart"></i></div>
<h2><span class="portfolio-conuter">8</span><span style="color: white; font-size: 50px;"><sup>+</sup></span></h2>
<p class="portfolio-counter-box">Client Review</p>
</div>
</div>
</div>
<script src="jquery.waypoints.min.js"></script>
<script src="jquery.counterup.min.js"></script>\
<script>
jQuery(document).ready(function() {
$('.portfolio-conuter').counterUp({
delay: 10,
time: 1000
});
});
function sendtolocation() {
location.href = "#portfolioo";
}
function gotoservices(){
location.href = "#services"
}
</script>
</body>
</html>
Post a Comment