Team 2 Bootstrap

company team team profiles

Follow @freeweb19

Team block with image background for displaying your team profiles on websites and landing pages.

Dependencies

Bootstrap 4
FontAwesome

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>FWR Bootstrap Blocks - Team 2</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="team-2 py-4 py-md-5 d-md-flex">
        <div class="container flex-fill align-self-center">

            <div class="row">
                <div class="col-md-10 col-xl-8 team-intro text-center mx-md-auto">
                    <h1 class="text-white mb-3">Our Crew</h1>
                    <p class="lead mb-0">We have the best of players in our team who created the <a href="#">FWR blocks</a>. You can learn more about our team and company culture by visiting each member's profile. If you are interested to join our company, you can shoot us an <a href="mailto:">email</a>.</p>
                </div>
            </div>

            <div class="row mt-4 mt-md-5 pt-xl-5 px-4 px-md-0">
                <div class="col-md-4 bg-white py-md-5 team-profile-wrap mx-auto">
                    <div class="team-profile text-center p-4">
                        <div class="team-profile-img rounded-circle mx-auto">
                            <img src="//assets.free-website-resources.com/img/profile-04.jpg" alt="John Doe" class="img-fluid">
                        </div>
                        <h5 class="team-profile-name text-uppercase mt-3">John Doe</h5>
                        <p class="team-profile-designation text-muted">Lead Designer</p>
                        <div class="p-0 team-profile-social text-center mt-4">
                            <a class="linked-in" href="#">
                                <span class="fab fa-linkedin-in"></span>
                                <span class="fab fa-linkedin-in social-hover"></span>
                            </a>
                            <a class="behance" href="#">
                                <span class="fab fa-behance"></span>
                                <span class="fab fa-behance social-hover"></span>
                            </a>
                            <a class="dribbble" href="#">
                                <span class="fab fa-dribbble"></span>
                                <span class="fab fa-dribbble social-hover"></span>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 bg-white py-md-5 team-profile-wrap mx-auto">
                    <div class="team-profile text-center p-4">
                        <div class="team-profile-img rounded-circle mx-auto">
                            <img src="//assets.free-website-resources.com/img/profile-05.jpg" alt="Mary Jane" class="img-fluid">
                        </div>
                        <h5 class="team-profile-name text-uppercase mt-3">Mary Jane</h5>
                        <p class="team-profile-designation text-muted">Lead Developer</p>
                        <div class="p-0 team-profile-social text-center mt-4">
                            <a class="linked-in" href="#">
                                <span class="fab fa-linkedin-in"></span>
                                <span class="fab fa-linkedin-in social-hover"></span>
                            </a>
                            <a class="behance" href="#">
                                <span class="fab fa-behance"></span>
                                <span class="fab fa-behance social-hover"></span>
                            </a>
                            <a class="dribbble" href="#">
                                <span class="fab fa-dribbble"></span>
                                <span class="fab fa-dribbble social-hover"></span>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 bg-white py-md-5 team-profile-wrap mx-auto">
                    <div class="team-profile text-center p-4">
                        <div class="team-profile-img rounded-circle mx-auto">
                            <img src="//assets.free-website-resources.com/img/profile-06.jpg" alt="Josh Thompson" class="img-fluid">
                        </div>
                        <h5 class="team-profile-name text-uppercase mt-3">Josh Thompson</h5>
                        <p class="team-profile-designation text-muted">Marketing Manager</p>
                        <div class="p-0 team-profile-social text-center mt-4">
                            <a class="linked-in" href="#">
                                <span class="fab fa-linkedin-in"></span>
                                <span class="fab fa-linkedin-in social-hover"></span>
                            </a>
                            <a class="facebook" href="#">
                                <span class="fab fa-facebook-f"></span>
                                <span class="fab fa-facebook-f social-hover"></span>
                            </a>
                            <a class="twitter" href="#">
                                <span class="fab fa-twitter"></span>
                                <span class="fab fa-twitter social-hover"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="team-bg-overlay"></div>
    </div>
    <!-- /.team-2 -->

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

// Bootstrap variables and mixins
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// Variables
$primary:             #5863f8;
$facebook:            #3b5998;
$twitter:             #1da1f2;
$linked-in:           #0077b5;
$behance:             #1769ff;
$dribbble:            #ea4c89;
$team-profile-radius: 1rem;

$social-colors: () !default;
$social-colors: map-merge((
  "facebook":   $facebook,
  "twitter":    $twitter,
  "linked-in":  $linked-in,
  "behance":    $behance,
  "dribbble":   $dribbble
), $social-colors);

// Custom CSS
.team-2 {
  background: url('https://assets.free-website-resources.com/img/team-bg.jpg') no-repeat center center / cover;
  min-height: 100vh;
  position: relative;
  z-index: 0;

  > .container {
    position: relative;
    z-index: 1;
  }
}

.team-bg-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba($black, .75);
  display: block;
  z-index: 0;
}

.team-intro {
  a {
    font-weight: 600;
    color: $white;
    display: inline-block;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color .3s;

    @include hover {
      border-color: $white;
      text-decoration: none;
    }
  }
  p {
    color: $gray-400;
  }
}

.team-profile-wrap {
  max-width: 400px;

  &:first-child {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }

  &:last-child {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
  }

  & + & {
    border-top: 2px solid $border-color;
  }
}

.team-profile-img {
  width: 80px;
  height: 80px;
  overflow: hidden;
}

.team-profile-name {
  font-size: 1rem;
  font-weight: 600;
  color: $gray-600;
}

.team-profile-designation {
  font-size: .875rem;
}

.team-profile-social {
  a {
    width: 44px;
    height: 44px;
    display: inline-block;
    vertical-align: middle;
    color: $gray-500;
    overflow: hidden;

    @each $color, $value in $social-colors {
      &.#{$color} {
        .social-hover {
          background-color: $value;
        }
      }
    }

    span {
      width: 44px;
      line-height: 44px;
      border-radius: 50%;
      background-color: $white;
    }

    .social-hover {
      color: $white;
    }
  }
}


@include media-breakpoint-up(md) {

  .team-profile-wrap {

    &:first-child {
      border-top-right-radius: 0;
      border-bottom-left-radius: 1rem;
    }

    &:last-child {
      border-top-right-radius: 1rem;
      border-bottom-left-radius: 0;
    }

    & + & {
      border-top: none;
      border-left: 2px solid $border-color;
    }
  }

  .team-profile-img {
    width: 120px;
    height: 120px;

    img {
      transform: scale(1.2);
      transition: transform .5s;
    }
  }

  .team-profile-wrap {
    @include hover {
      .team-profile-img {
        img {
          transform: scale(1);
        }
      }
    }
  }

}

@include media-breakpoint-up(xl) {

  .team-profile-social {
    a {
      span {
        position: relative;
        top: 0;
        transition: top .3s;
      }

      @include hover {
        span {
          top: -44px;
        }
      }
    }
  }

}

.team-2 {
  background: url("https://assets.free-website-resources.com/img/team-bg.jpg") no-repeat center center/cover;
  min-height: 100vh;
  position: relative;
  z-index: 0;
}

.team-2 > .container {
  position: relative;
  z-index: 1;
}

.team-bg-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  display: block;
  z-index: 0;
}

.team-intro a {
  font-weight: 600;
  color: #fff;
  display: inline-block;
  border-bottom: 1px solid transparent;
  -webkit-transition: border-bottom-color .3s;
  transition: border-bottom-color .3s;
}

.team-intro a:hover {
  border-color: #fff;
  text-decoration: none;
}

.team-intro p {
  color: #ced4da;
}

.team-profile-wrap {
  max-width: 400px;
}

.team-profile-wrap:first-child {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.team-profile-wrap:last-child {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.team-profile-wrap + .team-profile-wrap {
  border-top: 2px solid #dee2e6;
}

.team-profile-img {
  width: 80px;
  height: 80px;
  overflow: hidden;
}

.team-profile-name {
  font-size: 1rem;
  font-weight: 600;
  color: #6c757d;
}

.team-profile-designation {
  font-size: .875rem;
}

.team-profile-social a {
  width: 44px;
  height: 44px;
  display: inline-block;
  vertical-align: middle;
  color: #adb5bd;
  overflow: hidden;
}

.team-profile-social a.facebook .social-hover {
  background-color: #3b5998;
}

.team-profile-social a.twitter .social-hover {
  background-color: #1da1f2;
}

.team-profile-social a.linked-in .social-hover {
  background-color: #0077b5;
}

.team-profile-social a.behance .social-hover {
  background-color: #1769ff;
}

.team-profile-social a.dribbble .social-hover {
  background-color: #ea4c89;
}

.team-profile-social a span {
  width: 44px;
  line-height: 44px;
  border-radius: 50%;
  background-color: #fff;
}

.team-profile-social a .social-hover {
  color: #fff;
}

@media (min-width: 768px) {
  .team-profile-wrap:first-child {
    border-top-right-radius: 0;
    border-bottom-left-radius: 1rem;
  }
  .team-profile-wrap:last-child {
    border-top-right-radius: 1rem;
    border-bottom-left-radius: 0;
  }
  .team-profile-wrap + .team-profile-wrap {
    border-top: none;
    border-left: 2px solid #dee2e6;
  }
  .team-profile-img {
    width: 120px;
    height: 120px;
  }
  .team-profile-img img {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
  }
  .team-profile-wrap:hover .team-profile-img img {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@media (min-width: 1200px) {
  .team-profile-social a span {
    position: relative;
    top: 0;
    -webkit-transition: top .3s;
    transition: top .3s;
  }
  .team-profile-social a:hover span {
    top: -44px;
  }
}

Similar Blocks

Team 1

Team 2 Bootstrap

Dependencies

Similar Blocks

Newsletter

Follow us