:root{
--white: #fff;
--black: #000;
--bs_color: rgba(0, 0, 0, 0.5);
--content_bg1: rgba(0, 0, 0, 0.05);
--content_bg2: rgba(0, 0, 0, 0.01);
--color_1: #1BB7EA;
--color_1_dark: #0579A8;
--color_2: #DB2F07;
--color_2_dark: #b22d10;
--color_3: #2ecc71;
--color_3_dark: #27ae60;
--color_4: #E5185D;
--color_4_dark: #BB1253;
}
.counter{
font-family: 'Muli', sans-serif;
text-align: center;
position: relative;
}
.counter .counter-icon{
color: var(--white);
background: linear-gradient(45deg, var(--color_1) 49%, var(--color_1) 50%);
font-size: 50px;
line-height: 80px;
width: 80px;
height: 80px;
border-radius: 10px 10px 0 0;
display: inline-block;
transition: all 0.3s ease 0s;
}
.counter:hover .counter-icon .fa{
text-shadow: 0 0 3px var(--black);
transform: rotateX(360deg) rotateY(360deg);
transition: all 0.3s ease 0s;
}
.counter:hover .counter-icon{
background: linear-gradient(45deg, var(--color_1) 49%, var(--color_1_dark) 50%);
}
.counter .counter-content{
color: var(--black);
background: linear-gradient(45deg,var(--content_bg1) 49%,var(--content_bg2) 50%);
width: 200px;
padding: 20px 10px;
margin: 0 auto;
border: 5px solid var(--color_1);
border-radius: 10px;
transition: all 0.3s;
}
.counter:hover .counter-content{
background: linear-gradient(135deg,var(--content_bg1) 49%,var(--content_bg2) 50%);
box-shadow: 0 0 10px var(--bs_color);
}
.counter .counter-value{
font-size: 40px;
font-weight: 700;
margin: 0 0 10px;
display: block;
}
.counter h3{
font-weight: 600;
font-size: 15px;
text-transform: uppercase;
margin: 0;
}
.counter.red .counter-icon{
background: linear-gradient(45deg,var(--color_2) 49%,var(--color_2) 50%);
}
.counter.red:hover .counter-icon{
background: linear-gradient(45deg,var(--color_2) 49%,var(--color_2_dark) 50%);
}
.counter.red .counter-content{ border-color: var(--color_2); }
.counter.green .counter-icon{
background: linear-gradient(45deg, var(--color_3) 49%, var(--color_3) 50%);
}
.counter.green:hover .counter-icon{
background: linear-gradient(45deg, var(--color_3) 49%, var(--color_3_dark) 50%);
}
.counter.green .counter-content{ border-color: var(--color_3); }
.counter.magenta .counter-icon{
background: linear-gradient(45deg, var(--color_4) 49%, var(--color_4) 50%);
}
.counter.magenta:hover .counter-icon{
background: linear-gradient(45deg, var(--color_4) 49%, var(--color_4_dark) 50%);
}
.counter.magenta .counter-content{ border-color: var(--color_4); }
@media screen and (max-width:990px){
.counter{ margin-bottom: 40px; }
}
$(document).ready(function(){
$('.counter-value').each(function(){
$(this).prop('Counter',0).animate({
Counter: $(this).text()
},{
duration: 3500,
easing: 'swing',
step: function (now){
$(this).text(Math.ceil(now));
}
});
});
});