Bootstrap five html team snipp example v03

Bootstrap five html team snipp example v03

bootstrap 5 team 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 href="https://cdn.lineicons.com/3.0/lineicons.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<title>Team snipp</title>
<style>
.shape.rellax {
    z-index: 1;
}
.shape.rellax {
    position: absolute;
}
.bg-soft-yellow {
    background-color: #fff8ef!important;
}
.rounded-circle {
    border-radius: 50%!important;
}
.h-16 {
    height: 6rem!important;
}
.w-16 {
    width: 6rem!important;
}
.bg-line.red {
    background: repeating-linear-gradient( -55deg, rgba(255,255,255,0) 0.8px, #e2626b 1.6px, #e2626b 3px, rgba(255,255,255,0) 3.8px, rgba(255,255,255,0) 10px);
}
.bg-dot, .bg-line {
    opacity: .4;
}
.item-inner {
    padding: 1rem 0.75rem;
}
.card {
    box-shadow: 0 0 0 0.05rem rgb(8 60 130 / 6%), 0 0 1.25rem rgb(30 34 40 / 4%);
    border: 0;
    border-radius: 0.4rem;
}
.card-body {
    flex: 1 1 auto;
    padding: 2rem 2rem;
}
.w-15 {
    width: 5rem !important;
}
.w-20 {
    width: 10rem !important;
}
.meta {
 font-size:.9rem;
    text-transform: uppercase;
    color: #CCC;
    font-weight: 700;
}
.nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    margin-top: 20px;
    list-style: none;
}
.social a:not(.btn-circle) {
    font-size: 1rem;
    transition: all .2s ease-in-out;
    transform: translateY(0);
}
.social>a {
    margin: 0 0.7rem 0 0;
}
.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: 0.5rem;
    height: 0.5rem;
    margin: 0 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;
}
a i.lni-twitter-filled {
    color: #5daed5;
}
a i.lni-facebook-filled {
    color: #4470cf;
}
a i.lni-dribbble {
    color: #d07ead;
}
a i.lni-twitter-filled:hover, a i.lni-facebook-filled:hover, a i.lni-dribbble:hover {
    opacity: 0.5;
}
.owl-carousel.gap-small .owl-dots {
    margin-top: 1rem;
}
.owl-carousel .owl-dots {
    text-align: center;
    margin-top: 2rem;
}
.owl-carousel .owl-dots .owl-dot.active span {
    transform: scale(1);
    background: 0 0;
    border-color: #ccc;
}
.owl-carousel .owl-dots .owl-dot span {
 width: .7rem;
 height: .7rem;
 margin: 0 .3rem;
    background: #ccc;
    opacity: .5;
    display: block;
    -webkit-backface-visibility: visible;
    transition: all .2s ease-in-out;
    border-radius: 100%;
    transform: scale(.6);
    border: 3px solid transparent;
}
.text-line:not(.text-gradient) {
    display: inline-flex;
}
.text-line {
    position: relative;
    vertical-align: top;
    padding-left: 1.4rem;
}
.text-line.text-primary:before {
    background-color: #3f78e0;
}
.text-line:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: 50%;
    transform: translateY(-60%);
    left: 0;
    width: 0.75rem;
    height: 0.05rem;
    background: #3f78e0;
}
</style>
</head>
<body>
<div class="container py-5 my-4">
  <div class="row align-items-center">
    <div class="col-lg-4">
      <h2 class="small text-uppercase text-line text-primary text-center mb-3">Meet the Team</h2>
      <h3 class="display-6 mb-4">Save your time and money by choosing our professional team.</h3>
      <p class="mb-4">Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros tempus porttitor.</p>
      <a href="#" class="btn btn-primary rounded-pill mt-3 px-4">See All Members</a> </div>
    <!--/column -->
    <div class="col-lg-8">
      <div class="carousel owl-carousel text-center">
        <div class="item"> <img class="rounded-circle w-20 mx-auto mb-4" src="https://bootstraplily.com/demo/multipurpose/images/1.jpg" alt="" />
          <h4 class="mb-1">Cory Zamora</h4>
          <div class="meta mb-2">Marketing Specialist</div>
          <p class="mb-2">Etiam porta sem magna malesuada mollis.</p>
          <nav class="nav social mb-0 justify-content-center text-center"> <a href="#"><i class="lni lni-twitter-filled"></i></a> <a href="#"><i class="lni lni-facebook-filled"></i></a> <a href="#"><i class="lni lni-dribbble"></i></a> </nav>
          <!-- /.social --> 
        </div>
        <!-- /.item -->
        <div class="item"> <img class="rounded-circle w-20 mx-auto mb-4" src="https://bootstraplily.com/demo/multipurpose/images/2.jpg" alt="" />
          <h4 class="mb-1">Coriss Ambady</h4>
          <div class="meta mb-2">Financial Analyst</div>
          <p class="mb-2">Aenean eu leo quam. Pellentesque ornare lacinia.</p>
          <nav class="nav social mb-0 justify-content-center text-center"> <a href="#"><i class="lni lni-twitter-filled"></i></a> <a href="#"><i class="lni lni-facebook-filled"></i></a> <a href="#"><i class="lni lni-dribbble"></i></a> </nav>
          <!-- /.social --> 
        </div>
        <!-- /.item -->
        <div class="item"> <img class="rounded-circle w-20 mx-auto mb-4" src="https://bootstraplily.com/demo/multipurpose/images/3.jpg" alt="" />
          <h4 class="mb-1">Nikolas Brooten</h4>
          <div class="meta mb-2">Sales Manager</div>
          <p class="mb-2">Donec ornare elit quam porta gravida at eget.</p>
          <nav class="nav social mb-0 justify-content-center text-center"> <a href="#"><i class="lni lni-twitter-filled"></i></a> <a href="#"><i class="lni lni-facebook-filled"></i></a> <a href="#"><i class="lni lni-dribbble"></i></a> </nav>
          <!-- /.social --> 
        </div>
        <!-- /.item -->
        <div class="item"> <img class="rounded-circle w-20 mx-auto mb-4" src="https://bootstraplily.com/demo/multipurpose/images/2.jpg" alt="" />
          <h4 class="mb-1">Jackie Sanders</h4>
          <div class="meta mb-2">Investment Planner</div>
          <p class="mb-2">Nullam risus eget urna mollis ornare vel eu leo.</p>
          <nav class="nav social mb-0 justify-content-center text-center"> <a href="#"><i class="lni lni-twitter-filled"></i></a> <a href="#"><i class="lni lni-facebook-filled"></i></a> <a href="#"><i class="lni lni-dribbble"></i></a> </nav>
          <!-- /.social --> 
        </div>
        <!-- /.item -->
        <div class="item"> <img class="rounded-circle w-20 mx-auto mb-4" src="https://bootstraplily.com/demo/multipurpose/images/4.jpg"  alt="" />
          <h4 class="mb-1">Tina Geller</h4>
          <div class="meta mb-2">Assistant Buyer</div>
          <p class="mb-2">Vivamus sagittis lacus vel augue laoreet rutrum.</p>
          <nav class="nav social mb-0 justify-content-center text-center"> <a href="#"><i class="lni lni-twitter-filled"></i></a> <a href="#"><i class="lni lni-facebook-filled"></i></a> <a href="#"><i class="lni lni-dribbble"></i></a> </nav>
          <!-- /.social --> 
        </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:2
        },
        1000:{
            items:3
        }
    }
})
</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