<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 ----------> <link rel="stylesheet" href="https://cdn.lineicons.com/1.0.1/LineIcons.min.css"> <div class="container" id="ourStory"> <div class="row"> <div class="col text-center m-5 p-5"> <h4 class="headingsmall">Our Love Story</h4> <h2 class="headingbig pb-3">The Second of August</h2> <p>Lorem ipsum dolor sit amet, minim ceteros et duo, minim quando dolore et his. Est at modus volutpat, tation detracto pro in. Zril nostro vis an, erroribus salutatus referrentur no vim. In has agam dicam principes, at tincidunt neglegentur interpretaris vix, utamur delectus et sit.</p> </div> </div> </div> <div class="bg-move-outer"> <div class="container pt-5 pb-5"> <div class="row no-gutters pt-5 pb-5"> <div class="col-md-6 d-flex align-items-center bg-white"> <div class="mr-5 ml-5 mt-5"> <h2 class="headingbig pb-3">Kevin Richardson</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio mollitia, ipsa accusamus eius. Aspernatur ab sed minima, doloremque eligendi voluptatibus repellat unde, facilis natus ex ipsum eius atque suscipit fugit.</p> <div class="d-flex dd pb-3"> <a href="" class="mr-2"> <div class="social-icon d-flex align-items-center justify-content-center"> <i class="lni-facebook"></i></div> </a> <a href="" class="mr-2"> <div class="social-icon d-flex align-items-center justify-content-center"> <i class="lni-linkedin"></i></div> </a> <a href="" class="mr-2"> <div class="social-icon d-flex align-items-center justify-content-center"> <i class="lni-twitter"></i></div> </a> </div> </div> </div> <div class="col-md-6 d-flex align-items-center bg-white"> <img class="img-fluid" src="https://bootstraplily.com/demo/about-section/about-one/img/profile-one.jpg"> </div> <div class="col-md-6 order-md-12 d-flex align-items-center bg-white"> <div class="ml-5 mr-5 pb-5 mt-5"> <h2 class="headingbig pb-3">Jenifer Brening</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio mollitia, ipsa accusamus eius. Aspernatur ab sed minima, doloremque eligendi voluptatibus repellat unde, facilis natus ex ipsum eius atque suscipit fugit.</p> <div class="d-flex"> <a href="" class="mr-2"> <div class="social-icon d-flex align-items-center justify-content-center"> <i class="lni-facebook"></i></div> </a> <a href="" class="mr-2"> <div class="social-icon d-flex align-items-center justify-content-center"> <i class="lni-linkedin"></i></div> </a> <a href="" class="mr-2"> <div class="social-icon d-flex align-items-center justify-content-center"> <i class="lni-twitter"></i></div> </a> </div> </div> </div> <div class="col-md-6 order-md-1 d-flex align-items-center bg-white"> <img class="img-fluid" src="https://bootstraplily.com/demo/about-section/about-one/img/profile-two.jpg"> </div> </div> </div> </div> <div class="container text-center small text-muted mt-4 mb-5"> Design by <a href="https://bootstraplily.com/" target="_blank">www.bootstraplily.com</a> </div>

.bg-move-outer { position: relative; overflow: hidden; background-color:#c9ccd1; } .social-icon { width: 30px; height: 30px; border-radius: 100%; background-color: bisque; border: 1px solid #521e1e; }