Bootstrap testimonial snipp example v28

Bootstrap testimonial snipp example v28

bootstrap five snipp

Whole html/css code


<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<title>Testimonial snipp</title>
<style>
.shape.rellax {
    z-index: 1;
}
.shape.rellax {
    position: absolute;
}
.position-relative .shape.rellax+figure {
    position: relative;
    z-index: 2;
}
.h-21 {
    height: 12.5rem!important;
}
.w-21 {
    width: 12.5rem!important;
}
figure img {
    width: 100%;
    max-width: 100%;
    height: auto!important;
}
.blockquote-details .info {
    padding-left: 1rem;
}
.blockquote-details {
    display: flex;
    align-items: center;
    text-align: left;
}
.item-inner {
 padding: 1rem .75rem;
}
blockquote.icon {
    position: relative;
    border: 0;
    padding: 0;
}
blockquote.icon:before {
    content: "201d";
    position: absolute;
    top: -1.5rem;
 left: -.9rem;
    color: rgba(52,63,82,.05);
    font-size: 10rem;
    line-height: 1;
    z-index: 1;
}
.owl-carousel.gap-small .owl-dots {
    margin-top: 1rem;
}
.owl-carousel .owl-dots {
    text-align: center;
}
.owl-carousel .owl-dots .owl-dot.active span {
    transform: scale(1);
    background: 0 0;
    border-color: #aab0bc;
}
.owl-carousel .owl-dots .owl-dot span {
 width: .7rem;
 height: .7rem;
 margin: 0 .3rem;
    background: #aab0bc;
    opacity: .5;
    display: block;
    -webkit-backface-visibility: visible;
    transition: all .2s ease-in-out;
    border-radius: 100%;
    transform: scale(.6);
    border: 3px solid transparent;
}
.owl-carousel .owl-item img {
    display: inline-block;
}
.w-12 {
    width: 3.5rem!important;
}

</style>
</head>
<body>


  <div class="container py-5">
    <div class="row align-items-center">
      <div class="col-lg-5 col-xl-4 offset-xl-1 d-none d-lg-flex position-relative">
        <div class="shape rounded-circle bg-light rellax w-21 h-21" data-rellax-speed="1" style="top: 7rem; left: 1rem"></div>
        <figure><img src="https://bootstraplily.com/wp-content/uploads/2021/10/co1-e1635178538138.png" alt=""></figure>
      </div>
      <!--/column -->
      <div class="col-lg-6 col-xl-6 col-xxl-5 offset-xl-1">
        <div class="owl-carousel dots-start gap-small mt-6" data-margin="30">
          <div class="item">
            <blockquote class="icon fs-lg">
              <p class="lead mb-4">“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur nulla dapibus curabitur blandit.”</p>
              <div class="blockquote-details">
                <div class="info ps-0">
                  <h5 class="mb-1">Coriss Ambady</h5>
                  <p class="mb-0">Financial Analyst</p>
                </div>
              </div>
            </blockquote>
          </div>
          <!-- /.item -->
          <div class="item">
            <blockquote class="icon fs-lg">
              <p class="lead mb-4">“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur nulla dapibus curabitur blandit.”</p>
              <div class="blockquote-details">
                <div class="info ps-0">
                  <h5 class="mb-1">Cory Zamora</h5>
                  <p class="mb-0">Marketing Specialist</p>
                </div>
              </div>
            </blockquote>
          </div>
          <!-- /.item -->
          <div class="item">
            <blockquote class="icon fs-lg">
              <p class="lead mb-4">“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur nulla dapibus curabitur blandit.”</p>
              <div class="blockquote-details">
                <div class="info ps-0">
                  <h5 class="mb-1">Nikolas Brooten</h5>
                  <p class="mb-0">Sales Manager</p>
                </div>
              </div>
            </blockquote>
          </div>
          <!-- /.item -->
        </div>
        <!-- /.owl-carousel -->
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script> 
<script>
$('.owl-carousel').owlCarousel({
    loop:true,
    margin:20,
    nav:false,
    dots:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1
        }
    }
})
</script>
</body>
</html>

jsfiddle example

Spread the love

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top