<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,900" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Oleo+Script" rel="stylesheet"> <section class="services pt-60 pb-60" id="services"> <div class="container"> <div class="row"> <div class="col-xl-12"> <div class="section-title text-center mb-60"> <p>Best place for friends & family</p> <h4>our services</h4> </div> </div> </div> <div class="row"> <div class="col-md-4 col-sm-12"> <div class="single_service service_right"> <img src="http://infinityflamesoft.com/html/restarunt-preview/assets/img/services/service-1.png" alt=""> <h4>WordPress</h4> <p>Create and manage WordPress sites..</p> </div> <div class="single_service service_right"> <img src="http://infinityflamesoft.com/html/restarunt-preview/assets/img/services/service-2.png" alt=""> <h4>Popular Dishes</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="single_service service_right"> <img src="http://infinityflamesoft.com/html/restarunt-preview/assets/img/services/service-3.png" alt=""> <h4>Online Order</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="col-md-4 col-sm-12 text-center"> <div class="single_mid"> <img src="http://infinityflamesoft.com/html/restarunt-preview/assets/img/service_mid.png" alt=""> </div> </div> <div class="col-md-4 col-sm-12"> <div class="single_service"> <img src="http://infinityflamesoft.com/html/restarunt-preview/assets/img/services/service-4.png" alt=""> <h4>24/7 Service</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="single_service"> <img src="http://infinityflamesoft.com/html/restarunt-preview/assets/img/services/service-5.png" alt=""> <h4>Candle Light Dinner</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="single_service"> <img src="http://infinityflamesoft.com/html/restarunt-preview/assets/img/services/service-6.png" alt=""> <h4>Special Local Foods</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> </div> </section>

.pb-60 { padding-bottom: 60px; } .pt-60 { padding-top: 60px; } .mb-60 { margin-bottom: 60px; } p { font-weight: 300; font-size: 14px; } .section-title p { font-size: 24px; font-family: Oleo Script; margin-bottom: 0px; } .section-title h4 { font-size: 40px; text-transform: capitalize; color: #FF5E18; position: relative; display: inline-block; padding-bottom: 25px; } .section-title h4::before { width: 80px; height: 1.5px; bottom: 0; left: 50%; margin-left: -40px; } .section-title h4::before, .section-title h4::after { position: absolute; content: ""; background-color: #FF5E18; } .section-title h4::after { width: 40px; height: 1.5px; bottom: -5px; left: 50%; margin-left: -20px; } .single_service.service_right { padding-right: 70px; padding-left: 0; text-align: right; } .single_service.service_right img { right: 0; left: auto; margin-top: 0; } .single_service:nth-child(1), .single_service:nth-child(2) { border-bottom: 1px dashed #333; padding-bottom: 15px; } .single_service img { max-width: 45px; position: absolute; left: 0; top: 0; } .single_service { position: relative; padding-left: 70px; margin-bottom: 35px; }