<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 ----------> <!-- testimonials starts --> <section class="pt-5" id="testimonial-section"> <h2 class="text-center mb-5"><span>Happy Responses from our Customers</span></h2> <div class="clearfix pb-3"></div> <div id="testimonials" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#testimonials" data-slide-to="0" class="active"></li> <li data-target="#testimonials" data-slide-to="1"></li> <li data-target="#testimonials" data-slide-to="2"></li> </ul> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <div class="testi-text-wrap"> <h2 class="testi-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet ut urna ut consectetur. Suspendisse sit amet nisl nec purus luctus malesuada. </h2> </div> <div class="testi-footer"> <div class="testi-ftr-wrap"> <img src="https://www.iconexperience.com/_img/i_collection_png/128x128/plain/quotation_mark.png" class="rounded quoteicon" alt="Quote" /> <img src="http://chittagongit.com//images/avatar-png-icon/avatar-png-icon-5.jpg" class="rounded custimg" alt="user image" /> <div class="cust-pro-info"><span class="cust_name">Name</span> <span class="cust_pro">@Name</span></div> </div> </div> </div> <div class="carousel-item"> <div class="testi-text-wrap"> <h2 class="testi-text">Curabitur non enim est. Pellentesque rhoncus, quam nec tempor ornare, ligula leo venenatis eros, nec cursus neque sem a turpis. Ut at velit sit amet enim consequat tincidunt non in est.</h2> </div> <div class="testi-footer"> <div class="testi-ftr-wrap"> <img src="https://www.iconexperience.com/_img/i_collection_png/128x128/plain/quotation_mark.png" class="rounded quoteicon" alt="Quote" /> <img src="http://chittagongit.com//images/avatar-png-icon/avatar-png-icon-5.jpg" class="rounded custimg" alt="user image" /> <div class="cust-pro-info"><span class="cust_name">Name</span> <span class="cust_pro">@Name</span></div> </div> </div> </div> <div class="carousel-item"> <div class="testi-text-wrap"> <h2 class="testi-text">Etiam vitae ornare turpis. Donec ut enim at diam consectetur varius volutpat fringilla lacus. Duis molestie, ipsum ac dignissim aliquet, quam tortor euismod eros, ac sodales erat nulla at diam. </h2> </div> <div class="testi-footer"> <div class="testi-ftr-wrap"> <img src="https://www.iconexperience.com/_img/i_collection_png/128x128/plain/quotation_mark.png" class="rounded quoteicon" alt="Quote" /> <img src="http://chittagongit.com//images/avatar-png-icon/avatar-png-icon-5.jpg" class="rounded custimg" alt="user image" /> <div class="cust-pro-info"><span class="cust_name">Name</span> <span class="cust_pro">@Name</span></div> </div> </div> </div> </div> </div> </section> <!-- testimonials ends -->

#testimonials .carousel-indicators li{width: 20px; height: 20px; border: 2px solid #000; background-color: #000000; border-radius: 3px;} #testimonials .carousel-indicators li.active{background-color: #fff;} #testimonials .carousel-inner {padding: 0px 0px 50px 0px; background-color: orangered;} #testimonials .carousel-item{margin-top: 50px;} #testimonials .testi-text {width: 50%;float: right;color: #fff;font-family: robotoregular;font-size: 30px;margin-right: 10%;} #testimonials .testi-footer {width: 100%;position: relative;background-color: #212121;height: 120px;clear: both;margin: 25px auto;float: left;} #testimonials .testi-footer img {vertical-align: middle;display: inline-block;} #testimonials .testi-footer .quoteicon {width: 50px;height: auto;margin: 35px 70px;} #testimonials .testi-footer .custimg {width: 250px;height: auto;/*position: absolute; bottom: -10px;*/ margin-top: -120px;} .testi-ftr-wrap {max-width: 1240px;margin-left: auto;margin-right: auto;} .cust-pro-info {float: right;color: #fff;width: 50%;margin-right: 10%;padding-top: 10px;} .cust-pro-info span.cust_name {font-size: 35px;text-transform: uppercase;font-family: robotomedium;} .cust-pro-info span.cust_pro {font-size: 25px;font-family: robotoregular;} .cust-pro-info span {clear: both;float: left;} .testi-text-wrap {max-width: 1240px;margin-left: auto;margin-right: auto;} @media (max-width:992px){ #testimonials .testi-text {width: 90%;font-size: 20px; margin-right: 5%; } #testimonials .testi-footer{height: auto; padding: 10px;} #testimonials .testi-footer .quoteicon { width: 20px;height: auto; margin: 0px; float: left; } #testimonials .testi-footer .custimg { width: 60px;height: auto; margin: 0px; float: left; } .cust-pro-info span.cust_name{font-size: 15px;} .cust-pro-info span.cust_pro{font-size: 13px;} .blog .carousel-indicators{bottom: 0px;} .cust-pro-info { float: left;color: #fff;width: auto;margin-right: 0;padding-top: 10px; margin-left: 15px;} }