<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="wshipping-content-block service-process"> <div class="container wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="section-title"> <h2>Our Service Process</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> </div> <div class="process-row"> <div class="process-step"> <div class="process-icon"> <span>1</span> <img src="http://web24service.com/demo/w-shipping/assets/images/process-icon1.png" alt=""> </div> <p>Select Freight</p> </div> <div class="process-step"> <div class="process-icon"> <span>2</span> <img src="http://web24service.com/demo/w-shipping/assets/images/process-icon2.png" alt=""> </div> <p>Create Invoice</p> </div> <div class="process-step"> <div class="process-icon"> <span>3</span> <img src="http://web24service.com/demo/w-shipping/assets/images/process-icon2.png" alt=""> </div> <p>Secure Payment</p> </div> <div class="process-step"> <div class="process-icon"> <span>4</span> <img src="http://web24service.com/demo/w-shipping/assets/images/process-icon2.png" alt=""> </div> <p>Fast Delivery</p> </div> </div> </div> </div>

.service-process { background-color: #fafafa; position: relative; } .wshipping-content-block { padding: 80px 0px; } .service-process::before { display: block; content: ""; position: absolute; left: 0px; top: 0px; border-top: 1px dashed #cccccc; border-bottom: 1px dashed #fff; width: 100%; } *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .section-title { text-align: center; padding-bottom: 30px; } .section-title h2 { margin-top: 0px; text-transform: uppercase; color: #444444; } h2 { font-size: 32px; font-weight: 400; } p { margin: 0 0 10px; } .process-row { padding-top: 40px; } .process-step::before { position: absolute; right: -123px; width: 110px; height: 2px; background-color: #eb0028; content: ""; top: 80px; display: block; } .process-icon { width: 164px; text-align: center; height: 164px; float: left; border-radius: 100%; background-color: #fff; border: 2px solid #eb0028; position: relative; padding-top: 44px; margin-bottom: 10px; } .process-icon span { width: 56px; height: 56px; background-color: #eb0028; border: 2px solid #fff; color: #fff; line-height: 56px; font-size: 28px; position: absolute; left: -30px; top: 50%; margin-top: -30px; border-radius: 100%; font-weight: 700; } .process-step p { text-transform: uppercase; width: 100%; text-align: center; margin-top: 10px; clear: both; } .process-step p { margin-bottom: 0px; } p { margin: 0 0 10px; } .process-step { float: left; width: 164px; margin-right: 14%; position: relative; } .process-step:last-child { margin-right: 0px; } .process-step:last-child::before { display:none; }