line-height: 2em;}

h3{text-align: left;
font-family: Open Sans,Arial,sans-serif;
line-height: 1.7em;
color:black;
color:#333131;
font-weight: 520;

-webkit-font-smoothing: antialiased;
}

h2{text-align: left;
font-family: Open Sans,Arial,sans-serif;
line-height: 1.7em;
color:black;

font-weight: 620;
-webkit-font-smoothing: antialiased;
}

.class {
background:#edf0f2;
font-family: Consolas,Monaco,Lucida Console,monospace;
line-height: 1.65;
word-wrap: break-word;
border-radius: 5px;
color:#001d8f;
font-size:17.1px;
padding-left:10px;
white-space: pre-wrap;}

button.last-btn{
padding:14px 29px;
font-size:17px;
background-color:#0e87f0;
border-radius:6px;
color:white;
font-family: Open Sans,Arial,sans-serif;
border:none;
margin-left:35%;

}

@media only screen and (max-width: 400px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}
@media only screen and (max-width: 300px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}
@media only screen and (max-width: 600px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}
@media only screen and (max-width: 800px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}

@media only screen and (max-width: 400px) {
.copyButton {
width: 45%;
}

Responsive Counter Up Animation:

In this article, you will learn how to create Responsive Counter Up Animation using HTML CSS, and JavaScript. We use javascript Counter Up Animation in many places. For different types of personal websites, business websites, etc. 

This type of responsive counter up animation is most commonly used in business websites. For example, you can use this project in case you want to show the quantity of any product on your business website.

30 OTP input fields using HTML, CSS, and JS

Count animation is used between the numbers here. This type of Responsive Counter Up Animation is often used by developers to create queries. But if you want you can make it with the help of simple javascript. This tutorial will show you how to create JavaScript Counter Up Animation.

JavaScript Counter Up Animation

Html, CSS, and javascript have been used to create this Counter Up Animation JavaScript. A very simple code is used here for beginners.

Below is a preview of this Number Countup Animation. Which will help you to know how it works. I used a nice background image on a web page as you saw above. On which four small boxes have been made. One icon, one number, and one test have been added to the box. 

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

I have made the background of this simple count-up animation transparent. As a result, these small boxes can be seen almost transparently in the background. 

I have already shared tutorials on creating many elements such as login forms, profile cards, etc. using transparent design.

How to Create a Responsive Count up Animation

To create this Responsive Counter Up Animation you need to have a basic idea about HTML, CSS, and javascript. I have shared step by step tutorial here. I have given possible results with pictures after each step.

Step 1: HTML Code of Count up Animation

I have added all the information using the following code. I made four boxes. In that box you can see the icon first, then the number count down, and then a text.

<div class=”wrapper”>

 

  <div class=”container”>

     <i class=”fa-brands fa-html5″></i>

     <span class=”num” data-val=”365″>000</span>

     <span class=”text”>HTML Project</span>

  </div>

 

  <div class=”container”>

     <i class=”fa-brands fa-python”></i>

     <span class=”num” data-val=”290″>000</span>

     <span class=”text”>Python Project</span>

  </div>

 

  <div class=”container”>

     <i class=”fa-brands fa-node-js”></i>

     <span class=”num” data-val=”219″>000</span>

     <span class=”text”>Javascript Project</span>

  </div>

 

  <div class=”container”>

     <i class=”fa-brands fa-bootstrap”></i>

     <span class=”num” data-val=”140″>000</span>

     <span class=”text”>Bootstrap Design</span>

  </div>

 

</div>

 

HTML Output:

Step 2: Design the webpage with CSS

I have designed the webpage using the following CSS codes. Here an image is used in the background of the web page. You can use any background color instead of this image.

Step 3: Basic structure of Counter Up box