"Owl Carousel Customer Reviews Area"
Bootstrap 4.1.1 Snippet by musayazlik

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Developers</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"> <link rel="stylesheet" href="css/custom.css"> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&subset=latin-ext" rel="stylesheet"> </head> <body> <section class="yorum"> <div class="container"> <div class="col-12"> <div class="owl-carousel"> <div class=""> <div class="card"> <div class="card-block"> <div class="card-yazı"> <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, quae culpa nihil earum quam eos numquam, quod omnis provident accusamus. </p> <div class="card-sahip"> <div class="favicon"> <img height="40" width="40" src="https://i.hizliresim.com/yqQzON.jpg" alt=""> </div> </div> </div> <div class="puan d-flex justify-content-center"> <img src="https://i.hizliresim.com/GDVyr3.png" alt=""> <img src="https://i.hizliresim.com/GDVyr3.png" alt=""> <img src="https://i.hizliresim.com/GDVyr3.png" alt=""> <img src="https://i.hizliresim.com/GDVyr3.png" alt=""> <img src="https://i.hizliresim.com/GDVyr3.png" alt=""> </div> <div class="isim text-center"> <h1>Lorem Ipsum</h1> <p><i>Developer</i></p> </div> </div> </div> </div> <div class=""> <div class="card"> <div class="card-block"> <div class="card-yazı"> <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, quae culpa nihil earum quam eos numquam, quod omnis provident accusamus. Lorem ipsum dolor. </p> <div class="card-sahip"> <div class="favicon"> <img height="40" width="40" src="https://i.hizliresim.com/yqQzON.jpg" alt=""> </div> </div> </div> <div class="puan d-flex justify-content-center"> <img src="https://i.hizliresim.com/GDVyr3.png" alt=""> <img src="https://i.hizliresim.com/GDVyr3.png" alt=""> <img src="https://i.hizliresim.com/JD1Ogn.png" alt=""> <img src="https://i.hizliresim.com/JD1Ogn.png" alt=""> <img src="https://i.hizliresim.com/JD1Ogn.png" alt=""> </div> <div class="isim text-center"> <h1>Lorem Ipsum</h1> <p><i>Developer</i></p> </div> </div> </div> </div> <div class=""> <div class="card"> <div class="card-block"> <div class="card-yazı"> <p class=" text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, quae culpa nihil earum quam eos numquam, quod omnis provident accusamus. Lorem ipsum dolor sit amet. </p> <div class="card-sahip"> <div class="favicon"> <img height="40" width="40" src="https://i.hizliresim.com/yqQzON.jpg" alt=""> </div> </div> </div> <div class="puan d-flex justify-content-center"> <img src="https://i.hizliresim.com/GDVyr3.png" alt=""> <img src="https://i.hizliresim.com/GDVyr3.png" alt=""> <img src="https://i.hizliresim.com/GDVyr3.png" alt=""> <img src="https://i.hizliresim.com/GDVyr3.png" alt=""> <img src="https://i.hizliresim.com/JD1Ogn.png" alt=""> </div> <div class="isim text-center"> <h1>Lorem Ipsum</h1> <p><i>Developer</i></p> </div> </div> </div> </div> <div class=""> <div class="card"> <div class="card-block"> <div class="card-yazı"> <p class=" text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur iste sequi necessitatibus. </p> <div class="card-sahip"> <div class="favicon"> <img height="40" width="40" src="https://i.hizliresim.com/yqQzON.jpg" alt=""> </div> </div> </div> <div class="puan d-flex justify-content-center"> <img src="https://i.hizliresim.com/GDVyr3.png" alt=""> <img src="https://i.hizliresim.com/GDVyr3.png" alt=""> <img src="https://i.hizliresim.com/GDVyr3.png" alt=""> <img src="https://i.hizliresim.com/JD1Ogn.png" alt=""> <img src="https://i.hizliresim.com/JD1Ogn.png" alt=""> </div> <div class="isim text-center"> <h1>Lorem Ipsum</h1> <p><i>Developer</i></p> </div> </div> </div> </div> <div class=""> <div class="card"> <div class="card-block"> <div class="card-yazı"> <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga labore accusantium, alias, omnis itaque, aliquid tempora id ratione perferendis nesciunt vitae quas perspiciatis quam maiores. </p> <div class="card-sahip"> <div class="favicon"> <img height="40" width="40" src="https://i.hizliresim.com/yqQzON.jpg" alt=""> </div> </div> </div> <div class="puan d-flex justify-content-center"> <img src="https://i.hizliresim.com/GDVyr3.png" alt=""> <img src="https://i.hizliresim.com/GDVyr3.png" alt=""> <img src="https://i.hizliresim.com/GDVyr3.png" alt=""> <img src="https://i.hizliresim.com/JD1Ogn.png" alt=""> <img src="https://i.hizliresim.com/JD1Ogn.png" alt=""> </div> <div class="isim text-center"> <h1>Lorem Ipsum</h1> <p><i>Developer</i></p> </div> </div> </div> </div> </div> </div> </div> </section> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> </body> </html>
.yorum { display: flex; height: 100vh; align-items: center; } .card { border: none; box-shadow: 0 0 3px #0000001a; } .owl-item { padding: 10px; } .card-yazı p { padding: 30px 40px 50px 40px; font-family: 'Montserrat', sans-serif; font-weight: 500; } .card-yazı p::after { content: url("https://i.hizliresim.com/ODgyXA.png"); width: 40px; height: 40px; position: absolute; margin: 10px 0 0 20px; } .card-yazı p::before { content: url("https://i.hizliresim.com/zMXJz4.png"); width: 40px; height: 40px; position: relative; top: -10px; left: -18px; } .card-yazı { background-image: linear-gradient(135deg, rgb(255, 247, 32) 10%, rgb(60, 213, 0) 100%); position: relative; min-height: 300px; display: flex; align-items: center; } .favicon { width: 100%; height: auto; } .favicon img { height: 90px; width: 90px !important; position: absolute; bottom: -45px; left: 39%; border-radius: 100px; border: 8px solid white; } .puan { margin-top: 20px; } .puan img { height: 20px; width: 20px !important; margin: 30px 5px 0 0; } .isim h1 { font-size: 15px; font-family: 'Montserrat', sans-serif; font-weight: 700; margin-top: 20px; } .isim p { font-size: 12px; font-family: 'Montserrat', sans-serif; font-weight: 400; font-family: sans-serif; }
$(document).ready(function(){ $('.owl-carousel').owlCarousel({ loop:true, margin:10, nav:false, responsive:{ 0:{ items:1 }, 600:{ items:2 }, 1000:{ items:3 } } }) });

Related: See More


Questions / Comments: