Team Slider Style 1

Neeraj Chowdhury

Founder

Neeraj Chowdhury-2

Founder

Neeraj Chowdhury-3

Founder

An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna. An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna. An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna. An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna. An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna. An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna.-3

View Source

HTML

<section class="team-slider-1">
    <div class="ts-container">
        <div class="ts-1-team--cards owl-carousel owl-theme">


            <div class="ts-1-wrap-outer item item-1">
                <div class="ts-1-wrap-inner">
                    <div class="ts-1-profile-pic">
                        <div class="ts-1-profile-inner">
                            <div class="ts-1-img-inner">
                                <img src="https://placehold.co/600x400" alt="" class="user-prof-pic">
                            </div>
                        </div>
                    </div>
                    <div class="ts-1-content-box">
                        <div class="ts-1-heading">
                            <h3 class="ts-1-team-heading">
                                Neeraj Chowdhury
                            </h3>
                        </div>
                        <div class="ts-1-sub-heading">
                            <h4 class="ts-1-occ-team">
                                Founder
                            </h4>
                            <div class="ts-1-underline"></div>
                            
                        </div>
                        <div class="ts-1-box-para">
                            <p class="ts-1-teammate-desc">
                                An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna.
                                An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna.
                                An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna.
                                An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna.
                                
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="ts-1-wrap-outer item item-2">
                <div class="ts-1-wrap-inner">
                    <div class="ts-1-profile-pic">
                        <div class="ts-1-profile-inner">
                            <div class="ts-1-img-inner">
                                <img src="https://placehold.co/600x400" alt="" class="user-prof-pic">
                            </div>
                        </div>
                    </div>
                    <div class="ts-1-content-box">
                        <div class="ts-1-heading">
                            <h3 class="ts-1-team-heading">
                                Neeraj Chowdhury-2
                            </h3>
                        </div>
                        <div class="ts-1-sub-heading">
                            <h4 class="ts-1-occ-team">
                                Founder
                            </h4>
                            
                        </div>
                        <div class="ts-1-box-para">
                            <p class="ts-1-teammate-desc">An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna.
                                An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna.
                                An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna.
                                An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna.-2
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="ts-1-wrap-outer item item-3">
                <div class="ts-1-wrap-inner">
                    <div class="ts-1-profile-pic">
                        <div class="ts-1-profile-inner">
                            <div class="ts-1-img-inner">
                                <img src="https://placehold.co/600x400" alt="" class="user-prof-pic">
                            </div>
                        </div>
                    </div>
                    <div class="ts-1-content-box">
                        <div class="ts-1-heading">
                            <h3 class="ts-1-team-heading">
                                Neeraj Chowdhury-3
                            </h3>
                        </div>
                        <div class="ts-1-sub-heading">
                            <h4 class="ts-1-occ-team">
                                Founder
                            </h4>
                            <div class="ts-1-underline"></div>
                            
                        </div>
                        <div class="ts-1-box-para">
                            <p class="ts-1-teammate-desc">
                                An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna.
                                An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna.
                                An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna.
                                An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna.
                                An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna.
                                An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna.-3
                            </p>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</section>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Bebas Neue';
}
.testimonial-cards{
    display: flex;
    justify-content: center;
    position: relative;
    top: 20px;
}
.ts-1-wrap-inner{
    display: flex;
    max-width: 1320px;
   
}
.ts-1-profile-inner{
    min-width: 195px;
    background: #94BE70;
    border-radius: 200px;
    position: relative;
    left: 60px;
    top: 0px;
}
.ts-1-wrap-outer{
    display: flex;
    justify-content: center;
    margin-top: 25px;
}
.card-row{
    display: flex;
    justify-content: center;
}
.ts-1-profile-pic{
    display: flex;
    align-items: center;
}
.ts-1-content-box{
    background: #0077B4;
    border-radius: 32px;
    max-width: 728px;
    min-height: 500px;
    padding: 45px;
}
.ts-1-team-heading, .ts-1-occ-team, .ts-1-teammate-desc{
    text-align: center;
    color: white;
}
.ts-1-team-heading {
    font-size: 25px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 2px;
}
.ts-1-occ-team {
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 400;
    border-bottom: 4px solid;
    letter-spacing: 2px;
}
.ts-1-teammate-desc {
    font-family: 'roboto';
    font-size: 18px;
    font-weight: 200;
    padding: 25px 45px 0;
    line-height: 1.6;
}
.ts-1-heading{
    margin: 30px 0 10px;
}
.ts-1-sub-heading{
    display: flex;
    justify-content: center;
}
.ts-1-img-inner{
    position: relative;
    left: 18px;
    transform: scale(0.8);
    max-width: 305px;
    border-radius: 160px;
}
.owl-theme .owl-dots .owl-dot span{
    background: #0077B4;
    opacity: 0.25;
}
.owl-theme .owl-dots .owl-dot.active span{
   background: #0077B4;
   opacity: 1;
}
.user-prof-pic{
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 250px;
    border-radius: 150px;
}

.ts-1-heading h3 {
    font-weight:700;
}

.ts-1-sub-heading h4 {
    font-weight:700;
}

@media(max-width: 993px){
    .ts-container{
        padding: 20px;
    }
    .ts-1-img-inner {
        position: relative;
        top: 20px;
        left: 0;
        max-width: 305px;
    }
    .ts-1-wrap-inner{
        display: grid;
       
    }
    .ts-1-teammate-desc {
        padding: 15px;
        font-size: 18px;
        line-height: 1.6;
    }
    .ts-1-profile-pic {
        transform: scale(0.7);
        display: flex;
        justify-content: center;
    }
    .ts-1-profile-inner {
        max-width: 365px;
        background: #94BE70;
        border-radius: 200px;
        position: relative;
        left: 0;
        top: 0px;
    }
    .ts-1-team-heading{
        font-size: 36px;
    }
    .ts-1-occ-team {
        font-size: 30px;
        border-bottom: 2px solid;
    }
    .ts-1-content-box {
        margin-top: -95px;
        min-height: auto;
        height:auto;
    }
}
@media(max-width: 600px){
    .ts-1-team-heading {
        font-size: 28px;
    }
    .ts-1-occ-team {
        font-size: 24px;
        border-bottom: 2px solid;
    }
    
    .ts-1-content-box {
        height: auto;
        padding-inline: 15px;
    }
}
@media(max-width: 375px){
    .ts-1-teammate-desc {
        padding: 15px;
        font-size: 15px;
        line-height: 1.6;
    }
    .ts-1-profile-inner {
        max-width: 255px;
    }
}

JS

jQuery(document).ready(function(){

    let tsSlide1 = jQuery('.ts-1-team--cards.owl-carousel');

   tsSlide1.owlCarousel({
    center:true,
    loop:true,
    margin:10,
    nav:false,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1
        }
    }
})

});

Links

<!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">

<!-- carousels and animations -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.css"/>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css"/>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css"/>

Scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>