Bootstrap Snippet Team Section Design using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
  <section class="team">
         <div class="container">
            <div class="row">
               <div class="col-lg-12">
                  <div class="center-heading mb-5">
            
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12" data-aos="fade-right">
                  <div class="team-contant text-center spacing">
                     <div class="team-member">
                        <img class="rounded" src="https://images.unsplash.com/photo-1564564321837-a57b7070ac4f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTZ8fG1hbnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="team">
                     </div>
                     <div class="detail">
                        <h5>deo smith</h5>
                        <p><em>Senior Manager</em></p>
                        <ul class="social-icon list-inline my-3">
                           <li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                           <li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
                           <li class="list-inline-item"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
                        </ul>
                     </div>
                  </div>
               </div>
               <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12" data-aos="fade-up">
                  <div class="team-contant text-center down spacing">
                     <div class="team-member">
                        <img class="rounded" src="https://images.unsplash.com/photo-1566753323558-f4e0952af115?ixid=MXwxMjA3fDB8MHxzZWFyY2h8OXx8bWFufGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="team">
                     </div>
                     <div class="detail">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.team{padding: 100px 0px;}
.team-contant{
    position: relative;
    width: 100%;
    cursor: pointer;
    transition: all 0.4s;
    border-bottom: 2px solid #c5c5c5;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
.team-contant:hover{transform: translateY(-3%); opacity: 0.8;}
.down{transform: translateY(5%);
    }
.team-member{height: 260px;
             width: 100%;}
.team-member img{
  height: 100%;
  width: 100%;
    box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
}
.team-contant .detail h5{margin: 25px 0px 8px;}
.social-icon li i{
    height: 30px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Team Section Design "
Bootstrap 4.1.1 Snippet by top10theme123

Related: See More

Questions / Comments:

"Team Section Design " Bootstrap 4.1.1 Snippet by top10theme123

Related: See More

Questions / Comments:

"Team Section Design "
Bootstrap 4.1.1 Snippet by top10theme123