<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="//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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="bg-01"> <div class="container"> <div class="row"> <div class="col-12"> <div class="heading"> <h2>WHY CHOOS US</h2> </div> </div> </div> </div> </section> <section class="bg-02" style="margin-top:50px"> <div class="container"> <div class="row"> <div class="col-lg-6 col-md-6 col-12"> <div class="content"> <h2>We are the top learning platform</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio dignissimos, harum cum vitae delectus voluptates fuga mollitia cumque obcaecati praesentium quas nostrum adipisci voluptate nobis! Vitae aperiam iusto corrupti sunt.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio dignissimos, harum cum vitae delectus voluptates fuga mollitia cumque obcaecati praesentium quas nostrum adipisci voluptate nobis! Vitae aperiam iusto corrupti sunt.</p> </div> </div> <div class="col-lg-6 col-md-6 col-12"> <div class="content"> <div class="shap-img"> <img class="shap-img-1" src="https://www.smarteyeapps.com/demo/high-school-website-templates-free-download/assets/images/abt/1.jpg"> <img class="shap-img-2" src="https://www.smarteyeapps.com/demo/high-school-website-templates-free-download/assets/images/abt/2.jpg"> <img class="shap-img-3" src="https://www.smarteyeapps.com/demo/high-school-website-templates-free-download/assets/images/abt/3.jpg"> </div> </div> </div> </div> </div> </section> <br/>

.bg-02 .content .shap-img .shap-img-1 { border-radius: 5px; } .bg-02 .content .shap-img .shap-img-2 { width: 30%; position: absolute; top: 20%; left: 0; border-radius: 5px; } .bg-02 .content .shap-img .shap-img-3 { width: 30%; position: absolute; left: 70%; top: 20%; border-radius: 5px; } .bg-02 .content .shap-img { position: relative; text-align: center; } .bg-02 .content h2 { font-size: 1.875rem; line-height: 1.875rem; color: #2f0063; text-transform: capitalize; font-weight: 700; margin: 0 0 1.25rem 0; } .bg-02 .content { margin: 1.875rem 0rem; position: relative; } .bg-02 .content p { line-height: 1.75rem; font-size: 1.0625rem; color: #333333; margin: 0 0 1.25rem 0; } .bg-02 { padding: 3.125rem 0rem; background: #f3f8fc; position: relative; overflow: hidden; } /*Section 2*/ .bg-01::before { position: absolute; content: ""; background: url(https://www.smarteyeapps.com/demo/high-school-website-templates-free-download/assets/images/background/home-shape-bg.png); background-repeat: no-repeat; background-size: cover; top: 0; left: 0; width: 100%; height: 100%; background-position: center; opacity: 0.3; } .heading { position: relative; padding: 0 0 0.625rem 0; display: inline-block; } .heading h2 { font-size: 1.5625rem; font-weight: 700; color: #2f0063; letter-spacing: 0.0100rem; text-transform: uppercase; position: relative; }