<div class="container">
<div class="container">
<div class="statbox">
<h2>20<span>%</span></h2>
<p>
These are just a few numb ers that represents the overall performance of
your company ads.
</p>
</div>
<div class="statbox">
<h2>19<span>%</span></h2>
<p>
These are just a few numb ers that represents the overall performance of
your company ads.
</p>
</div>
<div class="statbox">
<h2>43<span>%</span></h2>
<p>
These are just a few numb ers that represents the overall performance of
your company ads.
</p>
</div>
<div class="statbox">
<h2>72<span>%</span></h2>
<p>
These are just a few numb ers that represents the overall performance of
your company ads.
</p>
</div>
<div class="statbox">
<h2>08<span>%</span></h2>
<p>
These are just a few numb ers that represents the overall performance of
your company ads.
</p>
</div>
<div class="statbox">
<h2>99<span>%</span></h2>
<p>
These are just a few numb ers that represents the overall performance of
your company ads.
</p>
</div>
</div>
body { background: #f9f9f9; }
body { background: #f9f9f9; }
.container {
width: auto;
padding: 50px;
}
.statbox {
width: 220px;
height: 220px;
text-align: center;
color: #FFFFFF;
display: inline-block;
margin-right: 40px;
margin-bottom: 40px;
cursor: default;
background: #297FB8;
background-image:linear-gradient(rgb(81,163,217) 0%,rgb(41,127,184) 100%);
background-image:gradient(linear,color-stop(0, rgb(81,163,217)),color-stop(1, rgb(41,127,184)));
background-image:linear-gradient(rgb(81,163,217) 0%,rgb(41,127,184) 100%);
background-image:linear-gradient(rgb(81,163,217) 0%,rgb(41,127,184) 100%);
background-image:linear-gradient(rgb(81,163,217) 0%,rgb(41,127,184) 100%);
background-image:linear-gradient(rgb(81,163,217) 0%,rgb(41,127,184) 100%);
filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff51a3d9,endColorstr=#ff297fb8)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff51a3d9,endColorstr=#ff297fb8);
border-top-right-radius: 30%;
border-bottom-left-radius: 30%;
border-radius-topright: 30%;
border-radius-bottomleft: 30%;
border-top-right-radius: 30%;
border-bottom-left-radius: 30%;
box-shadow:7px 7px 0px rgb(23,73,106);
box-shadow:7px 7px 0px rgb(23,73,106);
box-shadow:7px 7px 0px rgb(23,73,106);
filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=7,OffY=7,Color=#ff17496a,Positive=true)";
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=7,OffY=7,Color=#ff17496a,Positive=true);
}
.statbox:hover {
background: #666;
}
.statbox h2 {
font-size: 120px;
line-height: 100%;
font-weight: 300;
margin: 0;
text-shadow: 0 2px 0 rgba(0,0,0,0.3);
}
.statbox h2 span {
font-size: 50px;
}
.statbox p {
margin: 0;
padding: 0 20px 20px;
text-align: right;
margin-top: -20px;
font-size: 14px;
line-height: 140%;
}