Stat Boxes

by Bhesh Gurung

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div>
    <div class="stat-container stat-container-default">
        <div class="stat-text stat-text-default">0</div>
        <div class="stat-icon stat-icon-default">
            <span class='fa fa-lg fa-eye'></span>    
        </div>
    </div>
    <div class="stat-container stat-container-like">
        <div class="stat-text stat-text-like">0</div>
        <div class="stat-icon stat-icon-like">
            <span class='fa fa-lg fa-thumbs-o-up'></span>    
        </div>
    </div>
    <div class="stat-container stat-container-dislike">
        <div class="stat-text stat-text-dislike">0</div>
        <div class="stat-icon stat-icon-dislike">
            <span class='fa fa-lg fa-thumbs-o-down'></span>    
        </div>
    </div>
    <div class="stat-container stat-container-default">
        <div class="stat-text stat-text-default">0</div>
        <div class="stat-icon stat-icon-default">
            <span class='fa fa-lg fa-comments'></span>    
        </div>
    </div>
</div>

CSS

* {
    margin: 0;
}

.stat-container-default {
    border-color: #0066CC;
}

.stat-container-like {
    border-color: green;
}

.stat-container-dislike {
    border-color: red;
}

.stat-text-default {        
    background-color: blue;
}

.stat-text-like {    
    background-color: green;
}

.stat-text-dislike {    
    background-color: red;
}

.stat-icon-default {
    color: blue;
}

.stat-icon-like {
    color: green;
}

.stat-icon-dislike {
    color: red;    
}

.stat-container {        
    border-width: 1px;
    border-style: solid;
    display: inline-block;    
    margin: 0 0 0 0;
    padding: 0;
    width: 40px;
    border-radius: 10px;
    overflow: hidden;
}

.stat-text {    
    text-align: center;
    font-size: 16px;
    height: 30px;
    line-height: 30px;    
    font-weight: bold;
    color: #fff;
}

.stat-icon {      
    text-align: center;
    height: 24px;
    line-height: 24px;    
    background-color: #fff;    
}