5262
Web Design
1839
Web Development
.counter{
padding: 0 30px 50px;
text-align: center;
z-index: 1;
position: relative;
}
.counter .counter-content{
padding: 10px 10px 30px;
text-align: center;
color: #fff;
position: relative;
transition: all 0.3s ease 0s;
}
.counter .counter-content:before{
content: "";
width: 100%;
height: 100%;
background: #1cbefe;
position: absolute;
top: 0;
left: 0;
z-index: -1;
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 80%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 80%, 0% 100%);
}
.counter .counter-content:after{
content: "";
width: 60px;
height: 80%;
background: #0384ac;
position: absolute;
bottom: -25px;
left: 0;
z-index: -2;
transform: skewY(40deg);
}
.counter .counter-value{
display: block;
font-size: 40px;
font-weight: 600;
margin: 0 -34px 25px -30px;
position: relative;
transition: all 0.3s ease 0s;
}
.counter .counter-value:before,
.counter .counter-value:after{
content: "";
width: 100%;
height: 100%;
background: #0384ac;
position: absolute;
top: 0;
left: 0;
z-index: -1;
-webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
}
.counter .counter-value:after{
width: 20px;
height: 20px;
background: linear-gradient(45deg,transparent 49%, #067298 50%);
top: auto;
bottom: -20px;
-webkit-clip-path: none;
clip-path: none;
}
.counter .title{
font-size: 17px;
text-transform: uppercase;
margin: 0 0 10px 0;
}
.counter:hover .title{ text-shadow: 0 0 5px #000; }
.counter .counter-icon{
font-size: 40px;
text-align: left;
margin-left: 20px;
transition: all 0.3s ease 0s;
}
.counter:hover .counter-icon{
transform: scale(1.2);
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.counter.purple .counter-content:before{ background: #aa468f; }
.counter.purple .counter-content:after,
.counter.purple .counter-value:before{ background: #7a0c65; }
.counter.purple .counter-value:after{ background: linear-gradient(45deg,transparent 49%, #540444 50%); }
.counter.red .counter-content:before{ background: #f84c4c; }
.counter.red .counter-content:after,
.counter.red .counter-value:before{ background: #ae1412; }
.counter.red .counter-value:after{ background: linear-gradient(45deg,transparent 49%, #770505 50%); }
.counter.green .counter-content:before{ background: #aee118; }
.counter.green .counter-content:after,
.counter.green .counter-value:before{ background: #889539; }
.counter.green .counter-value:after{ background: linear-gradient(45deg,transparent 49%, #4e5909 50%); }
@media only screen and (max-width: 990px){
.counter{ margin-bottom: 30px; }
}
$(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));
}
});
});
});