
In this article, I will show How to create a Responsive Testimonials HTML Template. Best HTML Template Free Download. HTML Website Templates, Basic and Simple HTML Templates. Responsive and fully customizable.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
<div class="testimonial-section sbs-testimonial-section pd-top-105 pd-bottom-120" style="background-image:url(assets/img/bg/1h3.png);"> <div class="container"> <div class="row justify-content-center"> <div class="col-xl-5 col-lg-6 pd-xl-5 order-lg-12 align-self-center "> <div class="section-title style-two mb-0"> <h2 class="title">What Our <span>Client Say?</span></h2> <p>Our support team will get assistance from AI-powered <br> suggestions, making it quicker than ever to handle support <br> requests. assistance from AI-powered</p> </div> </div> <div class="col-lg-6 order-lg-1"> <div class="sbs-testimonial-slider"> <div class="choose_slider"> <div class="choose_slider_items"> <ul id="testimonial-slider"> <li class="current_item"> <div class="media"> <img class="media-left" src="img/4.png" alt="client"> <div class="media-body"> <h6>Aryan Singh</h6> <p class="designation">Founder at HTMLCSS</p> <span> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> </div> </div> <p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p> </li> <li class="current_item"> <div class="media"> <img class="media-left" src="img/5.png" alt="client"> <div class="media-body"> <h6>Ramjee Bharti</h6> <p class="designation">CEO at CSS</p> <span> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> </div> </div> <p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p> </li> <li class="current_item"> <div class="media"> <img class="media-left" src="img/6.png" alt="client"> <div class="media-body"> <h6>Satish Kumar</h6> <p class="designation">CTO of UIUS</p> <span> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> </div> </div> <p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p> </li> <li class="current_item"> <div class="media"> <img class="media-left" src="img/4.png" alt="client"> <div class="media-body"> <h6>Rahul Singh</h6> <p class="designation">CEO at HTMLCSS</p> <span> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> </div> </div> <p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p> </li> <li class="current_item"> <div class="media"> <img class="media-left" src="img/5.png" alt="client"> <div class="media-body"> <h6>Neha Singh</h6> <p class="designation">Branding </p> <span> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> </div> </div> <p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p> </li> <li class="current_item"> <div class="media"> <img class="media-left" src="img/6.png" alt="client"> <div class="media-body"> <h6>Sneha Singh</h6> <p class="designation">CTO of UIUX</p> <span> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> </div> </div> <p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p> </li> </ul> </div> </div> <div class="sbs-arrowleft"><a id="btn_next" href="#"><i class="fa fa-long-arrow-left"></i></a></div> <div class="sbs-arrowright"><a id="btn_prev" href="#"><i class="fa fa-long-arrow-right"></i></a></div> </div> </div> </div> </div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
@charset "utf-8"; /* CSS Document */ .sbs-testimonial-slider { height: 300px; margin-left: -90px; position: relative; width: 838px; } .sbs-testimonial-slider .sbs-arrowleft { position: absolute; right: 0; bottom: 53px; height: 42px; width: 42px; border-radius: 50%; line-height: 42px; text-align: center; display: inline-block; border: 1px solid #EFEFEF; background: #fff; color: #5B6880; z-index: 2; } .sbs-testimonial-slider .sbs-arrowleft i { transition: all 0.3s ease-in; } .sbs-testimonial-slider .sbs-arrowleft a { display: block; } .sbs-testimonial-slider .sbs-arrowleft:hover i { opacity: 0.7; } .sbs-testimonial-slider .sbs-arrowright { position: absolute; right: 0; bottom: 4px; height: 42px; width: 42px; border-radius: 50%; line-height: 42px; text-align: center; display: inline-block; border: 1px solid #EFEFEF; background: #fff; color: #5B6880; z-index: 2; } .sbs-testimonial-slider .sbs-arrowright i { transition: all 0.3s ease-in; } .sbs-testimonial-slider .sbs-arrowright a { display: block; } .sbs-testimonial-slider .sbs-arrowright:hover i { opacity: 0.7; } .choose_slider_items { position: relative; } .choose_slider_items ul { position: relative; } .choose_slider_items ul li { width: 500px; background: #ffffff; box-shadow: 0px 12px 36px #97A1B224; border-radius: 6px; padding: 67px 30px 55px 75px; } .choose_slider_items ul li img { height: 74px; width: 74px; border-radius: 50%; background: #efefef; margin-right: 33px; } .choose_slider_items ul li .media { margin-bottom: 25px; } .choose_slider_items ul li .media-body h6 { font-size: 21px; letter-spacing: 0.21px; color: #fff; line-height: 25px; font-weight: 500; margin-bottom: 0; } .choose_slider_items ul li .media-body .designation { font-size: var(--body-font-size); letter-spacing: 0.45px; color: #cacaca; line-height: 25px; margin-bottom: 0; } .choose_slider_items ul li .media-body span i { color: #FFC82A; font-size: 12px; } .choose_slider_items ul li p { font-size: var(--body-font-size); letter-spacing: 0.3px; color: #fff; } .choose_slider_items .previous_item { top: 0; transform: scale(0.9, 0.9); left: 150px; padding: 67px 30px 55px 60px; z-index: 1; } .choose_slider_items .previous_item_2 { top: 0; padding: 67px 30px 55px 60px; transform: scale(0.7, 0.7); left: 32px; } .choose_slider_items .previous_hidden { top: 0; transform: scale(0.7, 0.7); padding: 67px 30px 55px 60px; } .choose_slider_items .current_item { transition: all 0.5s ease-in-out; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>What Our Client</title> <link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/responsive.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" target="_blank" rel="noreferrer noopener">https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css</a>" /> <link rel="stylesheet" href="css/slick.css"> <!-- animated slider --> <link rel="stylesheet" href="css/animated-slider.css"> </head> <body> <!-- testimonial area Start --> <div class="testimonial-section sbs-testimonial-section pd-top-105 pd-bottom-120" style="background-image:url(assets/img/bg/1h3.png);"> <div class="container"> <div class="row justify-content-center"> <div class="col-xl-5 col-lg-6 pd-xl-5 order-lg-12 align-self-center "> <div class="section-title style-two mb-0"> <h2 class="title">What Our <span>Client Say?</span></h2> <p>Our support team will get assistance from AI-powered <br> suggestions, making it quicker than ever to handle support <br> requests. assistance from AI-powered</p> </div> </div> <div class="col-lg-6 order-lg-1"> <div class="sbs-testimonial-slider"> <div class="choose_slider"> <div class="choose_slider_items"> <ul id="testimonial-slider"> <li class="current_item"> <div class="media"> <img class="media-left" src="img/4.png" alt="client"> <div class="media-body"> <h6>Aryan Singh</h6> <p class="designation">Founder at HTMLCSS</p> <span> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> </div> </div> <p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p> </li> <li class="current_item"> <div class="media"> <img class="media-left" src="img/5.png" alt="client"> <div class="media-body"> <h6>Ramjee Bharti</h6> <p class="designation">CEO at CSS</p> <span> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> </div> </div> <p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p> </li> <li class="current_item"> <div class="media"> <img class="media-left" src="img/6.png" alt="client"> <div class="media-body"> <h6>Satish Kumar</h6> <p class="designation">CTO of UIUS</p> <span> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> </div> </div> <p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p> </li> <li class="current_item"> <div class="media"> <img class="media-left" src="img/4.png" alt="client"> <div class="media-body"> <h6>Rahul Singh</h6> <p class="designation">CEO at HTMLCSS</p> <span> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> </div> </div> <p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p> </li> <li class="current_item"> <div class="media"> <img class="media-left" src="img/5.png" alt="client"> <div class="media-body"> <h6>Neha Singh</h6> <p class="designation">Branding </p> <span> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> </div> </div> <p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p> </li> <li class="current_item"> <div class="media"> <img class="media-left" src="img/6.png" alt="client"> <div class="media-body"> <h6>Sneha Singh</h6> <p class="designation">CTO of UIUX</p> <span> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> </div> </div> <p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p> </li> </ul> </div> </div> <div class="sbs-arrowleft"><a id="btn_next" href="#"><i class="fa fa-long-arrow-left"></i></a></div> <div class="sbs-arrowright"><a id="btn_prev" href="#"><i class="fa fa-long-arrow-right"></i></a></div> </div> </div> </div> </div> </div> <!-- testimonial area End --> <script src="js/jquery-2.2.4.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.magnific-popup.js"></script> <script src="js/wow.min.js"></script> <script src="js/jquery.cssslider.min.js"></script> <script src="js/main.js"></script> </body> </html> |
Hope this will help you to create a Responsive Testimonials HTML Template.