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.
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/[email protected]/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 and CSS Tutorial for Beginners will provide you with a detailed and comprehensive knowledge about HTML. In this HTML Tutorial for Beginners you will learn HTML concepts from scratch and also how to create your first web page using HTML Tags.
HTML and CSS Tutorial for Beginners will provide you with a detailed and comprehensive knowledge about HTML. In this HTML Tutorial for Beginners you will learn HTML concepts from scratch and also how to create your first web page using HTML Tags.
The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.
HTML Assignment Help Australia @30% OFF from Sample Assignment, with Our Best HTML assignment help experts. Get HTML homework help online at affordable price. 100% Plag free assignment solution.
Responsive Personal Portfolio Website using HTML CSS & JavaScriptImages: https://bit.ly/353QF2ZDemo: https://edem-portfolio.netlify.app/Source Code: https://...