<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/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=Poppins" rel="stylesheet"> <script src="https://use.fontawesome.com/5a8a7bb461.js"></script> <div class="container"> <div class="row"> <div class="col-sm-6"> <h3><strong>Testimonial</strong></h3> <div class="seprator"></div> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="row" style="padding: 20px"> <button style="border: none;"><i class="fa fa-quote-left testimonial_fa" aria-hidden="true"></i></button> <p class="testimonial_para">Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo en.</p><br> <div class="row"> <div class="col-sm-2"> <img src="http://demos1.showcasedemos.in/jntuicem2017/html/v1/assets/images/jack.jpg" class="img-responsive" style="width: 80px"> </div> <div class="col-sm-10"> <h4><strong>Jack Andreson</strong></h4> <p class="testimonial_subtitle"><span>Chlinical Chemistry Technologist</span><br> <span>Officeal All Star Cafe</span> </p> </div> </div> </div> </div> <div class="item"> <div class="row" style="padding: 20px"> <button style="border: none;"><i class="fa fa-quote-left testimonial_fa" aria-hidden="true"></i></button> <p class="testimonial_para">Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo en.</p><br> <div class="row"> <div class="col-sm-2"> <img src="http://demos1.showcasedemos.in/jntuicem2017/html/v1/assets/images/kiara.jpg" class="img-responsive" style="width: 80px"> </div> <div class="col-sm-10"> <h4><strong>Kiara Andreson</strong></h4> <p class="testimonial_subtitle"><span>Chlinical Chemistry Technologist</span><br> <span>Officeal All Star Cafe</span> </p> </div> </div> </div> </div> </div> </div> <div class="controls testimonial_control pull-right"> <a class="left fa fa-chevron-left btn btn-default testimonial_btn" href="#carousel-example-generic" data-slide="prev"></a> <a class="right fa fa-chevron-right btn btn-default testimonial_btn" href="#carousel-example-generic" data-slide="next"></a> </div> </div> </div> </div>

*{ font-family: 'Poppins', sans-serif; } .testimonial_subtitle{ color: #0aaa7a; font-size: 12px; } .testimonial_btn{ background-color: #373d4b !important; color: #fff !important; } .seprator { height: 2px; width: 56px; background-color: #0aaa7a; margin: 7px 0 10px 0; }

/*no js required*/