2,523
Customers
63,075
Total Web Pages
12,218
Cups Of Coffee
CODICE IN OGGETTO HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>
<!-- The code would go before the closing of the </head> tag -->
<!-- partial:index.partial.html -->
<div class="container">
<div class="row">
<div class="col-md-4" >
<h1><span class="counter">2,523</span></h1>
<h3>Customers</h3>
<i class="fa fa-users"></i>
</div>
<div class="col-md-4">
<h1><span class="counter">63,075</span></h1>
<h3>Total Web Pages</h3>
<i class="fa fa-desktop"></i>
</div>
<div class="col-md-4">
<h1><span class="counter">12,218</span></h1>
<h3>Cups Of Coffee</h3>
<i class="fa fa-coffee"></i>
</div>
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.counterup/1.0/jquery.counterup.min.js'></script>
<script>
$('.counter').counterUp({
delay: 10,
time: 2000
});
$('.counter').addClass('animated fadeInDownBig');
$('h3').addClass('animated fadeIn');
</script>
CODICE ESPERTO IN OGGETTO HTML (CSS)
.col-md-4 {
text-align: center;
padding-bottom: 50px;
border-right: 1px dashed black;
}
.col-md-4:last-child {
border-right: 0px solid black;
}
.counter {
animation-duration: 1s;
animation-delay: 0s;
}
i {
font-size: 20px !Important;
}
@media (max-width: 991px) {
.col-md-4 {
border-right: 0px dashed black;
border-bottom: 1px dashed black;
width: 50%;
margin: auto auto;
}
.col-md-4:last-child {
border-bottom: 0px dashed black;
}
}