Create Awesome Animated Widget Cards Using CSS, HTML, JQuery

In this video, you are going to learn how to create awesome animated widget cards using HTML, CSS, JQuery that can be used to display data and information in an attractive way. You can use these widget cards for dashboard websites and admin panels to display important data. Lets see how to create these animated widget cards.

Subscribe: https://www.youtube.com/channel/UCNDmzGYwwT3rdY3xQuW8QOA

Source code

index.html


<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>

        <title>Awesome Widget</title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css">
        <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    </head>
    <body>

        <!--Widget Start-->
        <div class="card-body color1">
            <div class="float-left">
                <h3>
                    <span class="currency">$</span>
                    <span class="count">20000</span>
                </h3>
                <p>Revenue</p>
            </div>
            <div class="float-right">
                <i class="pe-7s-cart"></i>
            </div>
        </div>
        <!--Widget End-->
        <!--Widget Start-->
        <div class="card-body color2">
            <div class="float-left">
                <h3>
                    <span class="count">345</span>
                </h3>
                <p>Clients</p>
            </div>
            <div class="float-right">
                <i class="pe-7s-users"></i>
            </div>
        </div>
        <!--Widget End-->
        <!--Widget Start-->
        <div class="card-body color3">
            <div class="float-left">
                <h3>
                    <span class="count">4365</span>
                </h3>
                <p>Templates</p>
            </div>
            <div class="float-right">
                <i class="pe-7s-browser"></i>
            </div>
        </div>
        <!--Widget End-->

        <script type="text/javascript">
        $('.count').each(function(){
            $(this).prop('Counter',0).animate({
                Counter: $(this).text()
            }, {
                duration:4000,
                easing:'swing',
                step: function(now){
                    $(this).text(Math.ceil(now));
                }
            });
        });
        </script>

    </body>
</html>

style.css


body{
    margin: 0;
    padding: 0;
    height: 100vh;
    justify-content: center;
    align-items: center;
    display: flex;
}
/*widget css*/
.color1{
    background: #00C292;
}
.color2{
    background: #03A9F3;
}
.color3{
    background: #FB7146;
}
.card-body{
    display: inline-block;
    font-family: "Roboto", sans-serif;
    margin: 10px;
    padding: 20px;
    width: 250px;
    height: 90px;
    color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.float-left{
    float: left;
}
.float-right{
    float: right;
}
.card-body h3{
    margin-top: 15px;
    margin-bottom: 5px;
}
.currency, .count{
    font-size: 30px;
    font-weight: 500;
}
.card-body p{
    font-size: 16px;
    margin-top: 0;
}
.card-body i{
    font-size: 95px;
    opacity: 0.5;
}

#html #css

What is GEEK

Buddha Community

Create Awesome Animated Widget Cards Using CSS, HTML, JQuery

anita maity

1618667723

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.

Demo

#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css

Gavin Sserubiri

1619713680

Neumorphism Card Design using HTML and CSS | Pure CSS Card

#css #html #pure css card #html and css #design

anita maity

1619013192

Create a Personal Portfolio Website Using HTML CSS and JavaScript

Demo Click Here: https://cutt.ly/2vFKuxe

#portfolio website html css #personal website html css #personal portfolio website #how to create a complete peronal portfolio website #responsive portfolio website html css #responsive personal portfolio website html css

Josefa Corwin

1626964260

Card animation effect with css

Hi guys in this video we will creating this cool animated card with html and css. Please if like this video please give it thumbs up and also if you have not subscribe to my channel please try and subscribe.

#css #card #card effect #html #css tutorial #html tutorial

José Díaz

1613842560