<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="testimonial-area"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="sec-title pull-left"> <h3>Testimonials</h3> <h1>Successful Stories</h1> </div> <div class="more-button pull-right"> <a href="#">More Stories</a> </div> </div> </div> <div class="row"> <!--Start single item--> <div class="col-sm-4"> <div class="single-testimonial-item text-center"> <div class="img-holder"> <img src="http://mitdevelop.com/Preet-Dietitian/assets/images/1.png" alt="Awesome Image"> </div> <div class="text-holder"> <h3>Lost 80 Pounds and 4 Sizes</h3> <p>Ladies, meet your new hero. Men, prepare to be humbled. My friend Staci, or Spezzy as she’s known health Coach.</p> </div> <span class="border"></span> <div class="name"> <h3>Steve Bairstow</h3> </div> </div> </div> <!--End single item--> <!--Start single item--> <div class="col-sm-4"> <div class="single-testimonial-item text-center"> <div class="img-holder"> <img src="http://mitdevelop.com/Preet-Dietitian/assets/images/1.png" alt="Awesome Image"> </div> <div class="text-holder"> <h3>Lost 146 Pounds and 5 Sizes</h3> <p>In 10 months of following Health Coach, Joe has lost 128 pounds. If you are overweight, out of shape, and worried that.</p> </div> <span class="border"></span> <div class="name"> <h3>Don Fletcher</h3> </div> </div> </div> <!--End single item--> <!--Start single item--> <div class="col-sm-4"> <div class="single-testimonial-item text-center"> <div class="img-holder"> <img src="http://mitdevelop.com/Preet-Dietitian/assets/images/1.png" alt="Awesome Image"> </div> <div class="text-holder"> <h3>Got Herself into the Shape</h3> <p>When it comes to weight loss, exercise is your best friend. If you haven’t exercised for a long time and are very out.</p> </div> <span class="border"></span> <div class="name"> <h3>Jessica Jung</h3> </div> </div> </div> <!--End single item--> </div> </div> </section>

.testimonial-area { background: #f5f4f3; padding: 50px 0 40px; float: left; width: 100%; } .testimonial-area .more-button { margin-top: 12px; } .testimonial-area .more-button a { border: 2px solid #5b3859; height: 50px; width: 170px; display: block; text-align: center; border-radius: 30px; color: #5b3859; font-size: 14px; font-weight: 700; text-transform: uppercase; line-height: 48px; font-family: 'Poppins', sans-serif; transition: all 500ms ease; } .testimonial-area .more-button a:hover { background: #fff; color: #252525; } .single-testimonial-item { overflow: hidden; float: left; background: #ffffff; margin-bottom: 30px; display: block; padding: 38px 40px 36px; } .single-testimonial-item .img-holder { background: #fff none repeat scroll 0 0; border: 1px solid #f4f4f4; border-radius: 50%; display: block; height: 85px; margin: 0 auto; overflow: hidden; width: 85px; z-index: 1; position: relative; -webkit-transition: all 0.7s ease; transition: all 0.7s ease; padding: 2px; } .single-testimonial-item:hover .img-holder { background: #0c8e78; border-color: #0c8e78; } .single-testimonial-item .text-holder { padding-top: 20px; transition: all 0.7s ease; } .single-testimonial-item:hover .text-holder { border-color: #e7e3e3; } .single-testimonial-item .text-holder h3 { color: #5b3859; font-size: 20px; font-weight: 400; font-family: 'Courgette', cursive; text-transform: none; margin: 0 0 12px; } .single-testimonial-item .text-holder p { margin: 0 0 13px; font-size: 13px; } .single-testimonial-item .border { width: 190px; height: 1px; background: #f5f4f4; display: block; margin: 0 auto; } h3{ font-family: 'Courgette', cursive !important; } .single-testimonial-item .name h3 { padding-top: 19px; color: #404040; font-size: 18px; font-weight: 600; }