Team 1 Bootstrap

company team team profiles

Follow @freeweb19

Team block 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 1</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-1 py-3 py-md-5 bg-light">

        <div class="container">
            <div class="row">
                <div class="team-intro text-center col-md-10 col-xl-8 mx-auto">
                    <h1 class="team-intro-title mb-3">Our Awesome Team</h1>
                    <p class="lead">We have created a bunch of quality blocks that will help designers, developers and agencies create their websites and web apps in no time.</p>
                    <a href="#" class="btn btn-outline-primary mt-3 px-md-4">Learn More</a>
                </div>
            </div>

            <div class="row mt-4 mt-md-5 mb-md-4 team-list">
                <div class="col-md-4">
                    <div class="card team-profile mx-auto">
                        <div class="card-body text-center py-md-5">
                            <div class="team-profile-img mx-auto rounded-circle">
                                <img src="//assets.free-website-resources.com/img/profile-01.jpg" alt="Jacqueline Perry" class="img-fluid">
                            </div>
                            <h5 class="card-title mt-3">Jacqueline Perry</h5>
                            <span class="team-profile-designation">UI Designer</span>
                        </div>
                        <div class="card-footer d-flex p-0 team-profile-social">
                            <a class="linked-in text-center" href="#">
                                <span class="fab fa-linkedin-in"></span>
                            </a>
                            <a class="behance text-center" href="#">
                                <span class="fab fa-behance"></span>
                            </a>
                            <a class="dribbble text-center" href="#">
                                <span class="fab fa-dribbble"></span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mt-4 mt-md-0">
                    <div class="card team-profile mx-auto">
                        <div class="card-body text-center py-md-5">
                            <div class="team-profile-img mx-auto rounded-circle">
                                <img src="//assets.free-website-resources.com/img/profile-02.jpg" alt="Nelson Hunter" class="img-fluid">
                            </div>
                            <h5 class="card-title mt-3">Nelson Hunter</h5>
                            <span class="team-profile-designation">UI Designer</span>
                        </div>
                        <div class="card-footer d-flex p-0 team-profile-social">
                            <a class="linked-in text-center" href="#">
                                <span class="fab fa-linkedin-in"></span>
                            </a>
                            <a class="behance text-center" href="#">
                                <span class="fab fa-behance"></span>
                            </a>
                            <a class="dribbble text-center" href="#">
                                <span class="fab fa-dribbble"></span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mt-4 mt-md-0">
                    <div class="card team-profile mx-auto">
                        <div class="card-body text-center py-md-5">
                            <div class="team-profile-img mx-auto rounded-circle">
                                <img src="//assets.free-website-resources.com/img/profile-03.jpg" alt="Ida Gibson" class="img-fluid">
                            </div>
                            <h5 class="card-title mt-3">Ida Gibson</h5>
                            <span class="team-profile-designation">Lead Developer</span>
                        </div>
                        <div class="card-footer d-flex p-0 team-profile-social">
                            <a class="linked-in text-center" href="#">
                                <span class="fab fa-linkedin-in"></span>
                            </a>
                            <a class="facebook text-center" href="#">
                                <span class="fab fa-facebook"></span>
                            </a>
                            <a class="twitter text-center" href="#">
                                <span class="fab fa-twitter"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- /.team-1 -->

    <!-- 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;

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

// Custom CSS
.team-intro {
  padding-left: 2rem;
  padding-right: 2rem;
}

.team-profile {
  border-radius: 1rem;
  max-width: 400px;

  .card-title {
    color: $gray-700;
    margin-bottom: .5rem;
  }

  .card-footer {
    background-color: $white;
    border-radius: 0 0 1rem 1rem;
  }
}

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

  img {
    transition: transform .5s;

    @include hover {
      transform: scale(1.1);
    }
  }

}

.team-profile-designation {
  font-size: .875rem;
  color: $gray-500;
  font-weight: 600;
  text-transform: uppercase;
}

.team-profile-social {
  a {
    flex: 1;
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: 1rem;
    color: $gray-600;

    + a {
      border-left: 1px solid $border-color;
    }

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

.btn-outline-primary {
  @include button-outline-variant($primary);
  border: 2px solid rgba($primary, .75);
}


@include media-breakpoint-down(sm) {

  .team-intro-title {
    font-size: 1.75rem;
  }

}


@include media-breakpoint-up(md) {

  .team-profile-img {
    width: 100px;
    height: 100px;
  }

}


@include media-breakpoint-up(xl) {

  .team-profile-social {
    a {
      font-size: 1.25rem;
    }
  }

}

.team-intro {
  padding-left: 2rem;
  padding-right: 2rem;
}

.team-profile {
  border-radius: 1rem;
  max-width: 400px;
}

.team-profile .card-title {
  color: #495057;
  margin-bottom: .5rem;
}

.team-profile .card-footer {
  background-color: #fff;
  border-radius: 0 0 1rem 1rem;
}

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

.team-profile-img img {
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
}

.team-profile-img img:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.team-profile-designation {
  font-size: .875rem;
  color: #adb5bd;
  font-weight: 600;
  text-transform: uppercase;
}

.team-profile-social a {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: 1rem;
  color: #6c757d;
}

.team-profile-social a + a {
  border-left: 1px solid #dee2e6;
}

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

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

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

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

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

.btn-outline-primary {
  color: #5863f8;
  background-color: transparent;
  background-image: none;
  border-color: #5863f8;
  border: 2px solid rgba(88, 99, 248, 0.75);
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #5863f8;
  border-color: #5863f8;
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color: #5863f8;
  background-color: transparent;
}

.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: #5863f8;
  border-color: #5863f8;
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
}

@media (max-width: 767.98px) {
  .team-intro-title {
    font-size: 1.75rem;
  }
}

@media (min-width: 768px) {
  .team-profile-img {
    width: 100px;
    height: 100px;
  }
}

@media (min-width: 1200px) {
  .team-profile-social a {
    font-size: 1.25rem;
  }
}

Similar Blocks

Team 2

Team 1 Bootstrap

Dependencies

Similar Blocks

Newsletter

Follow us