Bootstrap testimonial snipp example v22

Bootstrap testimonial snipp example v22

testimonial 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;
}
.ratings {
    display: inline-block;
    position: relative;
    width: 7rem;
    height: 1.8rem;
}
.ratings:after {
    display: inline-block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-style: normal;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0;
    color: #fcc032;
    content: "26052605260526052605";
    overflow: hidden;
}
.bg-soft-blue {
    background-color: #f1f5fd!important;
}
.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-soft-yellow {
    background-color: #fff8ef!important;
}
.bg-line.red {
    background: repeating-linear-gradient( -55deg, rgba(255,255,255,0) .8px, #e2626b 1.6px, #e2626b 3px, rgba(255,255,255,0) 3.8px, rgba(255,255,255,0) 10px);
}
.bg-line {
    opacity: .4;
}
.w-12 {
    width: 3.5rem!important;
}
.w-16 {
    width: 6rem!important;
}
.h-16 {
    height: 6rem!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;
}
</style>
</head>
<body>
<div class="container py-5">
  <div class="row gy-5">
    <div class="col-xl-4">
      <h2 class="display-4 mt-5 mb-3">Our Community</h2>
      <p class="lead fs-lg mb-5">Customer satisfaction is our major goal. See what our clients are saying about our services.</p>
      <a href="#" class="btn btn-primary rounded-pill px-4">All Testimonials</a> </div>
    <!-- /column -->
    <div class="col-xl-8">
      <div class="position-relative">
        <div class="shape rounded-circle bg-soft-yellow rellax w-16 h-16" data-rellax-speed="1" style="top: -0.7rem; right: -1.7rem;"></div>
        <div class="shape rounded-circle bg-line red rellax w-16 h-16" data-rellax-speed="1" style="bottom: -0.5rem; left: -1.4rem;"></div>
        <div class="carousel owl-carousel gap-small" data-margin="0" data-dots="true" data-autoplay="false" data-autoplay-timeout="5000" data-responsive='{"0":{"items": "1"}, "768":{"items": "2"}, "992":{"items": "2"}, "1200":{"items": "2"}}'>
          <div class="item">
            <div class="item-inner">
              <div class="card">
                <div class="card-body">
                  <blockquote class="icon mb-0">
                    <p class="lead mb-5">“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis sed posuere.”</p>
                    <div class="blockquote-details"> <img class="rounded-circle w-12" src="https://images.pexels.com/photos/7860651/pexels-photo-7860651.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"  alt="" />
                      <div class="info">
                        <h5 class="mb-1">Coriss Ambady</h5>
                        <p class="mb-0">Financial Analyst</p>
                      </div>
                    </div>
                  </blockquote>
                </div>
                <!--/.card-body --> 
              </div>
              <!-- /.card --> 
            </div>
            <!-- /.item-inner --> 
          </div>
          <!-- /.item -->
          <div class="item">
            <div class="item-inner">
              <div class="card">
                <div class="card-body">
                  <blockquote class="icon mb-0">
                    <p class="lead mb-5">“Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus.”</p>
                    <div class="blockquote-details"> <img class="rounded-circle w-12" src="https://images.pexels.com/photos/7006161/pexels-photo-7006161.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" />
                      <div class="info">
                        <h5 class="mb-1">Cory Zamora</h5>
                        <p class="mb-0">Marketing Specialist</p>
                      </div>
                    </div>
                  </blockquote>
                </div>
                <!--/.card-body --> 
              </div>
              <!-- /.card --> 
            </div>
            <!-- /.item-inner --> 
          </div>
          <!-- /.item -->
          <div class="item">
            <div class="item-inner">
              <div class="card">
                <div class="card-body">
                  <blockquote class="icon mb-0">
                    <p class="lead mb-5">“Nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida.”</p>
                    <div class="blockquote-details"> <img class="rounded-circle w-12" src="https://images.pexels.com/photos/6102841/pexels-photo-6102841.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" />
                      <div class="info">
                        <h5 class="mb-1">Nikolas Brooten</h5>
                        <p class="mb-0">Sales Manager</p>
                      </div>
                    </div>
                  </blockquote>
                </div>
                <!--/.card-body --> 
              </div>
              <!-- /.card --> 
            </div>
            <!-- /.item-inner --> 
          </div>
          <!-- /.item -->
          <div class="item">
            <div class="item-inner">
              <div class="card">
                <div class="card-body">
                  <blockquote class="icon mb-0">
                    <p class="lead mb-5">“Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus posuere consectetur.”</p>
                    <div class="blockquote-details"> <img class="rounded-circle w-12" src="https://images.pexels.com/photos/2419574/pexels-photo-2419574.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" />
                      <div class="info">
                        <h5 class="mb-1">Coriss Ambady</h5>
                        <p class="mb-0">Financial Analyst</p>
                      </div>
                    </div>
                  </blockquote>
                </div>
                <!--/.card-body --> 
              </div>
              <!-- /.card --> 
            </div>
            <!-- /.item-inner --> 
          </div>
          <!-- /.item -->
          <div class="item">
            <div class="item-inner">
              <div class="card">
                <div class="card-body">
                  <blockquote class="icon mb-0">
                    <p class="lead mb-5">“Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque.”</p>
                    <div class="blockquote-details"> <img class="rounded-circle w-12" src="https://images.pexels.com/photos/3042160/pexels-photo-3042160.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" />
                      <div class="info">
                        <h5 class="mb-1">Jackie Sanders</h5>
                        <p class="mb-0">Investment Planner</p>
                      </div>
                    </div>
                  </blockquote>
                </div>
                <!--/.card-body --> 
              </div>
              <!-- /.card --> 
            </div>
            <!-- /.item-inner --> 
          </div>
          <!-- /.item -->
          <div class="item">
            <div class="item-inner">
              <div class="card">
                <div class="card-body">
                  <blockquote class="icon mb-0">
                    <p class="lead mb-5">“Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna.”</p>
                    <div class="blockquote-details"> <img class="rounded-circle w-12" src="https://images.pexels.com/photos/804009/pexels-photo-804009.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"  alt="" />
                      <div class="info">
                        <h5 class="mb-1">Laura Widerski</h5>
                        <p class="mb-0">Sales Specialist</p>
                      </div>
                    </div>
                  </blockquote>
                </div>
                <!--/.card-body --> 
              </div>
              <!-- /.card --> 
            </div>
            <!-- /.item-inner --> 
          </div>
          <!-- /.item --> 
        </div>
        <!-- /.owl-carousel --> 
      </div>
      <!-- /.position-relative --> 
    </div>
    <!-- /column --> 
  </div>
  <!-- /.row --> 
</div>
<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:2
        }
    }
})
</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