Markup
<section class="section-padding"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="section-title"> <h2>Happy Clients</h2> <div class="section-borders"> <span></span> <span class="black-border"></span> <span></span> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="client-testimonial-carousel"> <div class="single-testimonial-item"> <div class="section-meta"> <p>Duis autem vel eum iriure dolor hend dolore nulla faces at vero eros</p> <h3>Rubel Hossen <span>Businessman</span></h3> </div> </div> <div class="single-testimonial-item"> <div class="section-meta"> <p>Duis autem vel eum iriure dolor hend dolore nulla faces at vero eros</p> <h3>Rubel Hossen <span>Businessman</span></h3> </div> </div> <div class="single-testimonial-item"> <div class="section-meta"> <p>Duis autem vel eum iriure dolor hend dolore nulla faces at vero eros</p> <h3>Rubel Hossen <span>Businessman</span></h3> </div> </div> <div class="single-testimonial-item"> <div class="section-meta"> <p>Duis autem vel eum iriure dolor hend dolore nulla faces at vero eros</p> <h3>Rubel Hossen <span>Businessman</span></h3> </div> </div> <div class="single-testimonial-item"> <div class="section-meta"> <p>Duis autem vel eum iriure dolor hend dolore nulla faces at vero eros</p> <h3>Rubel Hossen <span>Businessman</span></h3> </div> </div> <div class="single-testimonial-item"> <div class="section-meta"> <p>Duis autem vel eum iriure dolor hend dolore nulla faces at vero eros</p> <h3>Rubel Hossen <span>Businessman</span></h3> </div> </div> <div class="single-testimonial-item"> <div class="section-meta"> <p>Duis autem vel eum iriure dolor hend dolore nulla faces at vero eros</p> <h3>Rubel Hossen <span>Businessman</span></h3> </div> </div> <div class="single-testimonial-item"> <div class="section-meta"> <p>Duis autem vel eum iriure dolor hend dolore nulla faces at vero eros</p> <h3>Rubel Hossen <span>Businessman</span></h3> </div> </div> <div class="single-testimonial-item"> <div class="section-meta"> <p>Duis autem vel eum iriure dolor hend dolore nulla faces at vero eros</p> <h3>Rubel Hossen <span>Businessman</span></h3> </div> </div> </div> </div> </div> </div> </section>
Style
/* Base CSS */ .alignleft { float: left; margin-right: 15px; } .alignright { float: right; margin-left: 15px; } .aligncenter { display: block; margin: 0 auto 15px; } a:focus { outline: 0 solid } img { max-width: 100%; height: auto; } h1, h2, h3, h4, h5, h6 { margin: 0 0 15px; font-weight: 700; } body { font-family: 'Open Sans', sans-serif; } a:hover { text-decoration: none } .section-padding { padding: 80px 0; } .section-borders span { background: #6aaf00 none repeat scroll 0 0; display: inline-block; height: 4px; width: 35px; border-radius: 2px; } .section-borders .black-border { background: #333 none repeat scroll 0 0; margin: 0 5px; width: 25px; } .section-title h2 { font-size: 30px; } .section-title { margin-bottom: 60px; text-align: center; } .client-testimonial-carousel .owl-dots div { background: #6aa700 none repeat scroll 0 0; border-radius: 2px; display: inline-block; height: 4px; margin: 5px; transition: all 0.3s ease 0s; width: 15px; } .client-testimonial-carousel .owl-dots div.active { background: #333 none repeat scroll 0 0; width: 25px; } .client-testimonial-carousel .owl-dots { margin-top: 50px; text-align: center; } .single-testimonial-item { box-shadow: 0 0 6px #b5afaf; font-style: italic; margin: 2px; padding: 20px; color: #7c7d7c; } .single-testimonial-item:before { font-family: fontAwesome; content: "\f10e"; } .single-testimonial-item h3 { font-size: 16px; font-style: normal; } .single-testimonial-item h3 span { display: block; font-size: 13px; font-weight: normal; margin-top: 5px; } .single-testimonial-item { padding-left: 60px; position: relative; } .single-testimonial-item::before { color: #6aa700; font-size: 20px; left: 20px; line-height: 30px; margin-top: -15px; position: absolute; top: 50%; } .single-testimonial-item h3 { margin-bottom: 0; } .section-meta { border-left: 1px solid #d8d4d4; padding-left: 20px; color:#333; }