<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
}
}
})
});
