<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="section_bg_gray"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="ptb-50"> <h2 class="text-center">Service Promo</h2> </div> </div> </div> <div class="row"> <div class="col-sm-6 col-md-4"> <div class="single_what_we_do"> <div class="top_line"></div> <div class="what_we_do_figure"> <img src="http://mtechwebsoft.com/templates/himax/demo/images/what_we_do/2.png" alt="" class="img-responsive"> </div> <h4 class="what_we_do_title">Best In Class</h4> <div class="what_we_do_content">Lorem ipsum dolor amet, consectetur adipiscing elit eiusmod.</div> <a class="what_we_do_icon" href="#"> <i class="fa fa-angle-right" aria-hidden="true"></i> </a> </div> </div> <div class="col-sm-6 col-md-4"> <div class="single_what_we_do"> <div class="top_line"></div> <div class="what_we_do_figure"> <img src="http://mtechwebsoft.com/templates/himax/demo/images/what_we_do/2.png" alt="" class="img-responsive"> </div> <h4 class="what_we_do_title">Best In Class</h4> <div class="what_we_do_content">Lorem ipsum dolor amet, consectetur adipiscing elit eiusmod.</div> <a class="what_we_do_icon" href="#"> <i class="fa fa-angle-right" aria-hidden="true"></i> </a> </div> </div> <div class="col-sm-6 col-md-4"> <div class="single_what_we_do"> <div class="top_line"></div> <div class="what_we_do_figure"> <img src="http://mtechwebsoft.com/templates/himax/demo/images/what_we_do/2.png" alt="" class="img-responsive"> </div> <h4 class="what_we_do_title">Best In Class</h4> <div class="what_we_do_content">Lorem ipsum dolor amet, consectetur adipiscing elit eiusmod.</div> <a class="what_we_do_icon" href="#"> <i class="fa fa-angle-right" aria-hidden="true"></i> </a> </div> </div> </div> </div> </div>

.ptb-50{ padding: 50px 50px; } .section_bg_gray { background-color: #f3f5f7; } .single_what_we_do { background-color: #ffffff; text-align: center; padding: 0 35px; border-radius: 10px; position: relative; margin-bottom: 30px; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .single_what_we_do:hover { -webkit-box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2); } .single_what_we_do .top_line { position: absolute; top: 0; left: 44%; background-color: #8448ff; width: 12%; height: 3px; } .single_what_we_do .what_we_do_figure { padding: 40px 0; } .single_what_we_do .what_we_do_figure img { margin: 0 auto; } .single_what_we_do .what_we_do_title { font-weight: 600; font-size: 22px; padding-bottom: 35px; margin: 0; color: #2b353a; } .single_what_we_do .what_we_do_content { padding-bottom: 65px; color: #2b353a; } .single_what_we_do .what_we_do_icon { position: absolute; bottom: -9px; left: 47%; color: #fff; background-color: #8448ff; width: 30px; height: 30px; text-align: center; border-radius: 50%; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .single_what_we_do .what_we_do_icon i { font-size: 24px; text-align: center; padding: 2px 3px 2px 5px; }