Hello everyone, welcome back to the new video of Easy Tutorials and today in this video
you will learn to make a counter on your website. Here you can see a demo on my computer screen
Before we start making this counter, I request you to please subscribe my channel Easy Tutorials
to watch more videos like this one. Now let's start to create a counter
This is my HTML file and you can read the HTML code and this one is CSS file
You can see I have already connected my HTML with CSS file
Click get code. Here we will add some bootstrap link, product search bootstrap video on Google
Open this website and from here we will copy this URL
Now we will write link Rails 5.6.html and add this URL. Now we will add a counter link here, product search counter from TVN on Google
Open this link and from here just copy this URL
Again we will connect this URL also. Now let's come to the body part and here we will create one container and here we will
create one view because we need four different columns. So in this row we will create the first column with all empty 3
So this is my first column and in this column I will add one P and the text will be 150
and for the second P type I will write one title that is product completed
Now I will open my HTML5 with Google Chrome so that you can see the two text over here
Now we will add one icon here. Okay so let's again go to Google and search for some icons
Open this website and here you can search any icon. I will search briefcase
So just copy this one line of code and add it here
I will remove this one. Now again I will refresh the website so that you can see this icon over here
Now I will copy this body and come to this HTML5 and for this one I will write background image
Give me a gradient. Here we will add some color over this background image
This is now effect again banner.html and after that background size and background position
Here we will put one comma which is missing. After refreshing this page you can see this background image and a linear gradient color
over it. Now let's come to the HTML5 and here we will write one class name
Counter section and for this counter I will write this useless code here
Now we can change some things from top and just type in white color
We need to add some border line for this icon
I am creating one class here. This class icon box and in this box there will be one icon
So let's copy this class name and come to this CSS file
I will write border one pixel from it and white color
Right and left margin 20 pixel and auto. Let's refresh this one so you can see this border for this icon
Now again I will copy this class name here and after that I will write box heading for
this icon and the font size will be 40 pixel, margin 25 pixel, auto, color white and one color
So you can see a big icon here and one color for this icon
For this row I will add one more class name text center so that you can see all the text
and icons are aligned in center for the first column. Now I will come back to this class and here I will write transform rotate and we will
rotate this box by 45 degree and for this icon also we will write the same code and
this one I will change to minus 45 degree. Now refresh this website so that you can see this tiny border for this icon
Now we will align these text. For that here I will write one class name counter box and this copy this counter box
put it here and after that I will write P font size 20 pixel and for this one I will
write one more class name counter. Just copy this counter here and before that I will write this counter box also and for
this one the font size will be 86 pixels. Refresh this website so that you can see this large font size here
Now simply I will copy and paste this entire column to create the second column and just
change this number and this title also and I will change this icon also
This will be the user icon and the title user connected
Let's duplicate it again so this will be the third column and the icon will be copy number
100 and the title global acquaintance. Now again I will duplicate this one so this is the fourth column
I will change the icon that is copy number 800 and one title above copy
Refresh this page so that you can see this four different columns here
Now we need to add counting effect on this numbers. For that I will search jquery link on Google
Open this jquery streaming website. Jquery streaming latest sustainable function. So select this one jquery 1.x
Click on this one and just copy this entire script and change this script in text
We can remove these text from here. After adding jquery we will go to the Google and search counter.js
Open this GitHub link. You can see this author name here and image
So here is the download link. Just click on this download button. You will get a gif file
Simply click trash this one. And in this folder we have only files
So I will copy this file jquery-counted-up.min.js. So simply copy this file and just paste it into your project folder
So just copy this file and just paste it into your project folder
That's it. Now we will connect this file with HTML. For that come to the bottom of this closing body tag and first of all I will write one comment here
Counter. And after that I will write script. And SRT and then filename
That's it. Now let's come to the GitHub link again. And here we can see this URL
Let's copy this first script here. And add it here on HTML file
Now again come to the GitHub website and just copy this one
And here we will start with script. jquery
document-ready function function And here I will paste the object script
After adding these scripts we will simply reload our page so that you can see this counter of effect on the website
So this is how you can easily create counters on your website
If this video was useful for you please click on the like button and also subscribe my channel to watch more videos like this one
Thank you so much for watching