Bootstrap testimonial snipp example v25

Bootstrap testimonial snipp example v25

bootstrap 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://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<title>Testimonial snipp</title>
<style>
.card {
    box-shadow: 0 0 0 0.05rem rgb(8 60 130 / 6%), 0 0 1.25rem rgb(30 34 40 / 4%);
    border: 1px solid rgba(164,174,198,.2);
 border-radius: .4rem;
}
.card-body {
    flex: 1 1 auto;
    padding: 2rem 2rem;
}
.rounded img {
 border-radius: .4rem;
}
figure img {
    width: 100%;
    max-width: 100%;
    height: auto!important;
}
.shape.rellax {
    z-index: 1;
}
.shape.rellax {
    position: absolute;
}
.bg-dot.primary {
    background-image: radial-gradient(#3f78e0 2px,transparent 2.5px);
}
.shape.rellax {
    z-index: 1;
}
.bg-dot {
    background-size: .75rem .75rem;
}
.bg-dot, .bg-line {
    opacity: .4;
}
.h-18 {
    height: 8rem!important;
}
.w-18 {
    width: 8rem!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;
    -webkit-tap-highlight-color: transparent;
    position: absolute;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 2rem;
    line-height: 1;
}
.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;
}
.counter-wrapper .counter {
    font-size: 2rem;
}

.counter-wrapper .counter {
    font-size: calc(1.325rem + .9vw);
    letter-spacing: normal;
    line-height: 1;
    margin-bottom: .5rem;
}
.owl-carousel .owl-item img {
    width: auto !important;
    display: inline-block !important;
}
.profile-circel-image-70 img {
    width: 70px;
    height: 70px;
    border-radius: 70px;
}
</style>
</head>
<body>


  <div class="container py-5 my-5">
    <div class="row gy-5 align-items-center">
      <div class="col-lg-7 position-relative">
        <div class="shape bg-dot primary rellax w-18 h-18" data-rellax-speed="1" style="top: -49px; left: -1.4rem; z-index: 0;"></div>
        <div class="row gx-md-5 gy-5">
          <div class="col-md-6">
            <figure class="rounded mt-md-10 position-relative"><img src="https://bootstraplily.com/wp-content/uploads/2021/10/g5.jpg"  alt=""></figure>
          </div>
          <!--/column -->
          <div class="col-md-6">
            <div class="row gx-md-5 gy-5">
              <div class="col-md-12 order-md-2">
                <figure class="rounded"><img src="https://bootstraplily.com/wp-content/uploads/2021/10/g6.jpg" alt=""></figure>
              </div>
              <!--/column -->
              <div class="col-md-10">
                <div class="card alert-primary text-center">
                  <div class="card-body py-11 counter-wrapper">
                    <h3 class="counter text-nowrap">5000+</h3>
                    <p class="mb-0">Satisfied Customers</p>
                  </div>
                  <!--/.card-body -->
                </div>
                <!--/.card -->
              </div>
              <!--/column -->
            </div>
            <!--/.row -->
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!--/column -->
      <div class="col-lg-5 mt-5">
        <div class="basic-slider owl-carousel gap-small" data-margin="30">
          <div class="item">
            <blockquote class="icon icon-top fs-lg text-center">
             <div class="profile-circel-image-70 mb-3 text-center"><img class="mr-3" src="https://bootstraplily.com/demo/multipurpose/images/1.jpg" alt=""></div>
              <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.”</p>
              <div class="blockquote-details justify-content-center text-center">
                <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 icon-top fs-lg text-center">
            <div class="profile-circel-image-70 mb-3 text-center"><img class="mr-3" src="https://bootstraplily.com/demo/multipurpose/images/2.jpg" alt=""></div>
              <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.”</p>
              <div class="blockquote-details justify-content-center text-center">
                <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 icon-top fs-lg text-center">
             <div class="profile-circel-image-70 mb-3 text-center"><img class="mr-3" src="https://bootstraplily.com/demo/multipurpose/images/3.jpg" alt=""></div>
              <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.”</p>
              <div class="blockquote-details justify-content-center text-center">
                <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