Tiles Service

by Charles Butler

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="tile-service">
    <div class="icon-badge"> <i class="fa fa-location-arrow fa-round-large fa-red"></i>

    </div>
     <h3>Web Design</h3>

    <p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the graphic elements of a document or visual presentation.</p>
</div>

CSS

.fa.fa-round-small {
    line-height:30px;
    width:30px;
    background:#666;
    border-radius:1000px;
    text-align:center;
    color:#eee;
}
.fa.fa-round-large {
    line-height:60px;
    width:60px;
    background:#666;
    border-radius:1000px;
    text-align:center;
    color:#eee;
}
.fa.fa-red{
    color:#fff;
    background:#F23800;
}
.tile-service {
    position:relative;
    display:block;
    background:#FFF;
    padding:20px;
    margin:0 auto;
    text-align:center;
    margin-bottom:10px;
    overflow:hidden;
    -webkit-border-radius:5px;
    -webkit-background-clip:padding-box;
    -moz-border-radius:5px;
    -moz-background-clip:padding;
    border-radius:5px;
    background-clip:padding-box;
    -moz-transition:all 300ms ease-in-out;
    -o-transition:all 300ms ease-in-out;
    -webkit-transition:all 300ms ease-in-out;
    transition:all 300ms ease-in-out
}
.tile-service:hover {
    background:#f2f2f2;
}
.tile-service .icon-badge, .tile-service h3, .tile-service p {
    position:relative;
    color:#333;
    z-index:5;
    margin:0;
    padding:0 text-align:center;
}
.tile-service .icon-badge {
    font-size:27px;
    font-weight:bold text-align:center;
    margin:0 auto;
    -moz-transition:all 300ms ease-in-out;
    -o-transition:all 300ms ease-in-out;
    -webkit-transition:all 300ms ease-in-out;
    transition:all 300ms ease-in-out
}
.tile-service:hover .icon-badge {
    font-size:38px;
}
.tile-service h3 {
    font-size:27px;
    margin-top:15px
}
.tile-service p {
    font-size:0.875rem;
    margin-top:15px
}