Все о InstantCMS Все о InstantCMS
Testimonials

Отзывы пользователей

​Отзывы пользователей для Инстант

Отзывы пользователей для Инстант

Код - надо вставить в виджет HTML
  1. <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  2. <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
  3. <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
  4. <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  5. <div class="testimonials-wrap">
  6. <div class="container">
  7. <div class="heading-section">
  8. <span class="sub-heading">Testimonials</span>
  9. <h2>Отзывы пользователей</h2>
  10. </div>
  11. <div class="carousel-testimonial owl-carousel">
  12. <div class="item">
  13. <div class="testimonial-box d-flex">
  14. <div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/82.jpg)">
  15. </div>
  16. <div class="text pl-4">
  17. <span class="quote"><i class="fa fa-quote-left"></i></span>
  18. <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
  19. <p class="name">Mark Huff</p>
  20. <span class="position">Businesswoman</span>
  21. </div>
  22. </div>
  23. </div>
  24. <div class="item">
  25. <div class="testimonial-box d-flex">
  26. <div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/83.jpg)">
  27. </div>
  28. <div class="text pl-4">
  29. <span class="quote"><i class="fa fa-quote-left"></i></span>
  30. <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
  31. <p class="name">Rodel Golez</p>
  32. <span class="position">Businesswoman</span>
  33. </div>
  34. </div>
  35. </div>
  36. <div class="item">
  37. <div class="testimonial-box d-flex">
  38. <div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/84.jpg)">
  39. </div>
  40. <div class="text pl-4">
  41. <span class="quote"><i class="fa fa-quote-left"></i></span>
  42. <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
  43. <p class="name">Ken Bosh</p>
  44. <span class="position">Businesswoman</span>
  45. </div>
  46. </div>
  47. </div>
  48. <div class="item">
  49. <div class="testimonial-box d-flex">
  50. <div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/85.jpg)">
  51. </div>
  52. <div class="text pl-4">
  53. <span class="quote"><i class="fa fa-quote-left"></i></span>
  54. <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
  55. <p class="name">Racky Henderson</p>
  56. <span class="position">Father</span>
  57. </div>
  58. </div>
  59. </div>
  60. <div class="item">
  61. <div class="testimonial-box d-flex">
  62. <div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/86.jpg)">
  63. </div>
  64. <div class="text pl-4">
  65. <span class="quote"><i class="fa fa-quote-left"></i></span>
  66. <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
  67. <p class="name">Henry Dee</p>
  68. <span class="position">Businesswoman</span>
  69. </div>
  70. </div>
  71. </div>
  72. <div class="item">
  73. <div class="testimonial-box d-flex">
  74. <div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/87.jpg)">
  75. </div>
  76. <div class="text pl-4">
  77. <span class="quote"><i class="fa fa-quote-left"></i></span>
  78. <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
  79. <p class="name">Mark Huff</p>
  80. <span class="position">Businesswoman</span>
  81. </div>
  82. </div>
  83. </div>
  84. <div class="item">
  85. <div class="testimonial-box d-flex">
  86. <div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/88.jpg)">
  87. </div>
  88. <div class="text pl-4">
  89. <span class="quote"><i class="fa fa-quote-left"></i></span>
  90. <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
  91. <p class="name">Rodel Golez</p>
  92. <span class="position">Businesswoman</span>
  93. </div>
  94. </div>
  95. </div>
  96. <div class="item">
  97. <div class="testimonial-box d-flex">
  98. <div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/89.jpg)">
  99. </div>
  100. <div class="text pl-4">
  101. <span class="quote"><i class="fa fa-quote-left"></i></span>
  102. <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
  103. <p class="name">Ken Bosh</p>
  104. <span class="position">Businesswoman</span>
  105. </div>
  106. </div>
  107. </div>
  108. <div class="item">
  109. <div class="testimonial-box d-flex">
  110. <div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/90.jpg)">
  111. </div>
  112. <div class="text pl-4">
  113. <span class="quote"><i class="fa fa-quote-left"></i></span>
  114. <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
  115. <p class="name">Racky Henderson</p>
  116. <span class="position">Father</span>
  117. </div>
  118. </div>
  119. </div>
  120. <div class="item">
  121. <div class="testimonial-box d-flex">
  122. <div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/91.jpg)">
  123. </div>
  124. <div class="text pl-4">
  125. <span class="quote"><i class="fa fa-quote-left"></i></span>
  126. <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
  127. <p class="name">Henry Dee</p>
  128. <span class="position">Businesswoman</span>
  129. </div>
  130. </div>
  131. </div>
  132. <div class="item">
  133. <div class="testimonial-box d-flex">
  134. <div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/92.jpg)">
  135. </div>
  136. <div class="text pl-4">
  137. <span class="quote"><i class="fa fa-quote-left"></i></span>
  138. <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
  139. <p class="name">Mark Huff</p>
  140. <span class="position">Businesswoman</span>
  141. </div>
  142. </div>
  143. </div>
  144. </div>
  145. </div>
  146. </div>
  147. <script>
  148. $('.carousel-testimonial').owlCarousel({
  149. loop:true,
  150. margin:0,
  151. responsiveClass:true,
  152. responsive:{
  153. 0:{
  154. items:1,
  155. nav:true
  156. },
  157. 600:{
  158. items:3,
  159. nav:false
  160. },
  161. 1000:{
  162. items:3,
  163. nav:true,
  164. loop:false
  165. }
  166. }
  167. })
  168. </script>
  169. <style>
  170.  
  171. .testimonials-wrap {
  172. padding: 40px 0;
  173. }
  174. .heading-section {
  175. text-align: center;
  176. }
  177. .sub-heading {
  178. font-family: 'Lato', sans-serif;
  179. font-size: 12px;
  180. display: block;
  181. font-weight: 600;
  182. color: #2e9ca1;
  183. text-transform: uppercase;
  184. letter-spacing: 2px;
  185. }
  186. .heading-section h2 {
  187. font-size: 28px;
  188. font-weight: 600;
  189. padding-top: 10px;
  190. padding-bottom: 15px;
  191. }
  192. .testimonial-box {
  193. display: block;
  194. position: relative;
  195. padding: 30px 20px;
  196. background: #fff;
  197. border: 1px solid rgba(0,0,0,.03);
  198. border-radius: 5px;
  199. box-shadow: 0 0 20px rgba(0, 0, 0, .08);
  200. }
  201. .user-img {
  202. width: 80px;
  203. height: 80px;
  204. border-radius: 50%;
  205. position: relative;
  206. min-width: 80px;
  207. background-size: 100%;
  208. }
  209. .carousel-testimonial .item {
  210. padding: 30px 10px;
  211. }
  212. .quote {
  213. position: absolute;
  214. top: -23px;
  215. color: #2e9da1;
  216. font-size: 27px;
  217. }
  218. .name {
  219. margin-bottom: 0;
  220. line-height: 14px;
  221. font-size: 17px;
  222. font-weight: 500;
  223. }
  224. .position {
  225. color: #adadad;
  226. font-size: 14px;
  227. }
  228. .carousel-testimonial .owl-nav {
  229. text-align: center;
  230. }
  231. .carousel-testimonial .owl-nav button.owl-next,
  232. .carousel-testimonial .owl-nav button.owl-prev {
  233. padding: 0 12px !important;
  234. }
  235. .carousel-testimonial .owl-nav button {
  236. outline: none;
  237. padding: 0;
  238. }
  239. .carousel-testimonial .owl-nav button.owl-next span,
  240. .carousel-testimonial .owl-nav button.owl-prev span {
  241. display: block;
  242. font-size: 40px;
  243. width: 25px;
  244. height: 25px;
  245. vertical-align: 0px;
  246. line-height: 16px;
  247. }
  248. .carousel-testimonial .owl-nav button.owl-next.disabled,
  249. .carousel-testimonial .owl-nav button.owl-prev.disabled {
  250. opacity: 0.5;
  251. }
  252. </style>
14:22
337
Нет комментариев. Ваш будет первым!
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.