Bootstrap Snippet Team Member Showcase 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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
 <link href="https://fonts.googleapis.com/css?family=Mirza:400,700|Roboto" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<section id="team-section">
        <h2 align="center">Our Team</h2>
        <div class="container">
          <div class="row team-data">
            <div class="col-md-3 col-sm-3 col-xs-6">
              <div class="team-profile">
                <div class="member-img" align="center">
                  <img src="https://s4.postimg.org/7ec1711st/person.png" alt="">
                </div>
                <h4 align="center">Member 1</h4>
                <div class="member-social" align="center">
                  <a href=""><i class="fa fa-facebook"></i></a>
                  <a href=""><i class="fa fa-twitter"></i></a>
                  <a href=""><i class="fa fa-google"></i></a>
                </div>
            </div>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-6 ">
              <div class="team-profile">
                <div class="member-img" align="center">
                  <img src="https://s4.postimg.org/7ec1711st/person.png" alt="">
                </div>
                <h4 align="center">Member 2</h4>
                <div class="member-social" align="center">
                  <a href=""><i class="fa fa-facebook"></i></a>
                  <a href=""><i class="fa fa-twitter"></i></a>
                  <a href=""><i class="fa fa-google"></i></a>
                </div>
              </div>
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
h1,h2,h3,h4{
    font-family: 'Mirza', cursive;
}
p,label{
    font-family: 'Roboto', sans-serif;
}
#about-us{
    max-width: 100%;
    padding-top: 50px;
}
/*Team -section*/
 #team-section h4{
    text-shadow: 0px -1px 1px rgba(76, 78, 115, 1);
}
.member-img img{
    padding-top: 10px;
    width: 50%;
}
.team-profile{
    background: #e0eafc;
}
.member-social {
    background: #EECDA3;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #EF629F, #EECDA3);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #EF629F, #EECDA3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Team Member Showcase"
Bootstrap 3.3.0 Snippet by kastya

Related: See More

Questions / Comments:

"Team Member Showcase" Bootstrap 3.3.0 Snippet by kastya

Related: See More

Questions / Comments:

"Team Member Showcase"
Bootstrap 3.3.0 Snippet by kastya