Designer
<div class="shipping-service-area"> <div class="container-fluid"> <div class="row"> <!-- Single Service --> <div class="sin-service col-xl-3 col-md-6"> <!-- Service Icon --> <div class="icon text-center"><i class="zmdi zmdi-car"></i></div> <!-- Service Content --> <div class="content fix"> <h3>free shipping</h3> <p>Lorem ipsum dummy text goes here</p> </div> </div> <!-- Single Service --> <div class="sin-service col-xl-3 col-md-6"> <!-- Service Icon --> <div class="icon text-center"><i class="zmdi zmdi-balance-wallet"></i></div> <!-- Service Content --> <div class="content fix"> <h3>money back guarantee</h3> <p>Lorem ipsum dummy text goes here</p> </div> </div> <!-- Single Service --> <div class="sin-service col-xl-3 col-md-6"> <!-- Service Icon --> <div class="icon text-center"><i class="zmdi zmdi-shield-security"></i></div> <!-- Service Content --> <div class="content fix"> <h3>safe shopping</h3> <p>Lorem ipsum dummy text goes here</p> </div> </div> <!-- Single Service --> <div class="sin-service col-xl-3 col-md-6"> <!-- Service Icon --> <div class="icon text-center"><i class="zmdi zmdi-headset-mic"></i></div> <!-- Service Content --> <div class="content fix"> <h3>online support</h3> <p>Lorem ipsum dummy text goes here</p> </div> </div> </div> </div> </div>
.shipping-service-area { background: #fff; padding: 40px 0; } .sin-service { border-right: 1px solid #dddddd; padding-left: 72px; text-align: left; } .sin-service:last-child { border-right: 0px solid #dddddd; } .sin-service .icon { display: block; float: left; margin-right: 20px; } .sin-service .icon i { border: 1px solid #dddddd; border-radius: 50%; display: block; font-size: 36px; height: 72px; line-height: 70px; width: 72px; } .sin-service:hover .icon i { border-width: 1px; border-style: solid; color: #fff; } .sin-service .content { margin-top: 12px; } .sin-service .content h3 { font-size: 16px; letter-spacing: 1px; line-height: 12px; text-transform: uppercase; margin: 0 0 12px; } .sin-service .content p { font-weight: 300; }