<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="home-testimonial"> <div class="container-fluid"> <div class="row d-flex justify-content-center testimonial-pos"> <div class="col-md-12 pt-4 d-flex justify-content-center"> <h3>Testimonials</h3> </div> <div class="col-md-12 d-flex justify-content-center"> <h2>Explore the students experience</h2> </div> </div> <section class="home-testimonial-bottom"> <div class="container testimonial-inner"> <div class="row d-flex justify-content-center"> <div class="col-md-4 style-3"> <div class="tour-item "> <div class="tour-desc bg-white"> <div class="tour-text color-grey-3 text-center">“At this School, our mission is to balance a rigorous comprehensive college preparatory curriculum with healthy social and emotional development.”</div> <div class="d-flex justify-content-center pt-2 pb-2"><img class="tm-people" src="https://via.placeholder.com/150" alt=""></div> <div class="link-name d-flex justify-content-center">Balbir Kaur</div> <div class="link-position d-flex justify-content-center">Student</div> </div> </div> </div> <div class="col-md-4 style-3"> <div class="tour-item "> <div class="tour-desc bg-white"> <div class="tour-text color-grey-3 text-center">“At this School, our mission is to balance a rigorous comprehensive college preparatory curriculum with healthy social and emotional development.”</div> <div class="d-flex justify-content-center pt-2 pb-2"><img class="tm-people" src="https://via.placeholder.com/150" alt=""></div> <div class="link-name d-flex justify-content-center">Balbir Kaur</div> <div class="link-position d-flex justify-content-center">Student</div> </div> </div> </div> <div class="col-md-4 style-3"> <div class="tour-item "> <div class="tour-desc bg-white"> <div class="tour-text color-grey-3 text-center">“At this School, our mission is to balance a rigorous comprehensive college preparatory curriculum with healthy social and emotional development.”</div> <div class="d-flex justify-content-center pt-2 pb-2"><img class="tm-people" src="https://via.placeholder.com/150" alt=""></div> <div class="link-name d-flex justify-content-center">Balbir Kaur</div> <div class="link-position d-flex justify-content-center">Student</div> </div> </div> </div> </div> </section> </section>

.home-testimonial { background-color: #231834; height: 380px; } .home-testimonial-bottom { background-color: #f8f8f8; transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s; margin-top: 20px; margin-bottom: 0px; position: relative; height: 130px; top: 190px; } .home-testimonial h3 { color: var(--orange); font-size: 14px; font-weight: 500; text-transform: uppercase; } .home-testimonial h2 { color: white; font-size: 28px; font-weight: 700; } .testimonial-inner { position: relative; top: -174px; } .testimonial-pos { position: relative; top: 24px; } .testimonial-inner .tour-desc { border-radius: 5px; padding: 40px; } .color-grey-3 { font-family: "Montserrat", Sans-serif; font-size: 14px; color: #6c83a2; } .testimonial-inner img.tm-people { width: 60px; height: 60px; -webkit-border-radius: 50%; border-radius: 50%; -o-object-fit: cover; object-fit: cover; max-width: none; } .link-name { font-family: "Montserrat", Sans-serif; font-size: 14px; color: #6c83a2; } .link-position { font-family: "Montserrat", Sans-serif; font-size: 12px; color: #6c83a2; }