<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid padding6em brown"> <div class="row"> <div class="col-md-4 services"> <div class="services-grid"> <div class="services-info"> <span class="glyphicon glyphicon-user icon"></span> <h4>trophy</h4> <div class="big-border"> </div> </div> </div> </div> <div class="col-md-4 services"> <div class="services-grid"> <div class="services-info"> <span class="glyphicon glyphicon-user icon"></span> <h4>trophy</h4> <div class="big-border"> </div> </div> </div> </div> <div class="col-md-4 services"> <div class="services-grid"> <div class="services-info"> <span class="glyphicon glyphicon-user icon"></span> <h4>trophy</h4> <div class="big-border"> </div> </div> </div> </div> </div> </div> <div class="container-fluid padding6em choco"> <div class="row"> <div class="col-md-3 services"> <div class="services-grid"> <div class="services-info"> <span class="glyphicon glyphicon-user icon"></span> <h4>trophy</h4> <div class="big-border"> </div> </div> </div> </div> <div class="col-md-3 services"> <div class="services-grid"> <div class="services-info"> <span class="glyphicon glyphicon-user icon"></span> <h4>trophy</h4> <div class="big-border"> </div> </div> </div> </div> <div class="col-md-3 services"> <div class="services-grid"> <div class="services-info"> <span class="glyphicon glyphicon-user icon"></span> <h4>trophy</h4> <div class="big-border"> </div> </div> </div> </div> <div class="col-md-3 services"> <div class="services-grid"> <div class="services-info"> <span class="glyphicon glyphicon-user icon"></span> <h4>trophy</h4> <div class="big-border"> </div> </div> </div> </div> </div> </div>

.padding6em { padding:6em; } .brown { background-color: #c16f6e; } .choco { background-color: #3a1e1d; } .icon { font-size :60px; padding-top : 5px; color:white; } .services:hover { background-color:#592e2d; } .big-border { width: 30%; margin: 1em auto 0; border: double 4px #fc636b; border: double 4px #00a99d; } .services-grid { overflow: hidden; position: relative; display: block; box-shadow: 0 0px 1px rgb(107, 107, 107),0 1px 2px rgba(0,0,0,.24); } .services-info{ padding: 6em 0; background: #FFFFFF; background:rgba(0, 0, 0, 0.65); text-align: center; } .services-info i.fa.fa-trophy,.services-info i.fa.fa-graduation-cap,.services-info i.fa.fa-black-tie,.services-info i.fa.fa-thumbs-o-up,.services-info i.fa.fa-calendar-minus-o,.services-info i.fa.fa-sun-o,.services-info i.fa.fa-percent,.services-info i.fa.fa-university{ color: #212121; color: #fff; font-size: 3em; } .services-info h4{ color: #00a99d; color: #fc636b; font-size: 1.2em; margin: 1em 0 0 0; text-transform: uppercase; font-weight: 600; }