Bootstrap Snippet Owl Carousel Customer Reviews Area using HTML CSS jQuery

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
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function(){
        $('.owl-carousel').owlCarousel({
            loop:true,
            margin:10,
            nav:false,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:2
                },
                1000:{
                    items:3
                }
            }
        })
    });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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