content logo

Bootstrap Cards:

Bootstrap Team Profile Cards

An easy and effective method that you can use to build trust is by adding a meet the team section to your website. Many assign a whole page to this section and some others put a small area under the page. Regardless of what you choose, this is an important section that needs time and effort dedicated to it. Adding a proper meet the team page can help give your business an accessible face. The page doesn’t have to have a spectacular design but it should include some fundamental factors. One of these factors is providing the right amount of information about everyone. overexplaining is usually a bad idea as it can bore the listener – or readers in this case – which results in the person abandoning the page.

Check out this code below. It’s a Bootstrap CSS card designed to add Bootstrap animating cards so that you can display your team members’ profiles easily. it also features a really special design. Only the profile image is visible at first but due to the fact that this is a card with hover animation, the name, details and a link to their profile page pops up once you hover your mouse cursor over the panels. This Bootstrap card profile design can be a great addition to any meet the team pages in websites.

#

Bootstrap CSS Card

#

Bootstrap Card Profile

#

Bootstrap Animating Card

#

Card with Hover Animation

<!-- This script got from frontendfreecode.com -->
<article id="team-members" class="parallax-container parallax-bg-2" role="article">
    <div class="row">

        <div class="col-lg-10 offset-lg-1 pt-5">
            <h2 class="article-title"><span class="display-4">Team Profile</span></h2>
        </div>
        <!-- card content -->
        <div class="col-lg-10 offset-lg-1 pt-2">
            <div class="card-deck cs-cards justify-content-center">
                <!-- item template -->
                <!-- begin card -->
                <div class="col-auto mb-3">
                    <figure class="card imghvr-slide-up">
                        <img class="card-img" src="http://frontendfreecode.com/img/profile-image-08.jpg" />
                        <div class="expander"><i class="fas fa-chevron-up"></i></div>
                        <figcaption class="pt-5">
                            <h3>Team Member Name</h3>
                            <p>Job Title</p>
                            <a class="btn btn-info" data-toggle="modal" data-target="#team-member-name">View Profile</a>
                        </figcaption>
                    </figure>
                </div>
                <!-- end card -->
                <!-- begin modal -->
                <div id="team-member-name" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Team Member Name</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body clearfix">
                                <h5>Job Title</h5>
                                <p>This is where information on the person can be documented. This could be used as a biographical area that the person, or a staff member could write. It could include skills, projects worked on, or any number of other information.</p>
                                <p>Once content goes beyond the image to the left, it will wrap under the image. This area can be as big or as small as needed.</p>
                            </div>
                            <div class="modal-footer">
                                <ul class="social-links mr-auto pl-0 flex-wrap">
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fas fa-envelope"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-facebook"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-linkedin"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-google-plus"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="skype:echo123?call" target="_blank"><i class="fab fa-skype"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-pinterest"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-youtube"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-vimeo"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-behance-square"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-deviantart"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-stack-overflow"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-codepen"></i></a>
                                    </li>
                                </ul>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                    <!-- end modal -->
                </div>
                <!-- end item template -->
                <!-- item 1 -->
                <!-- begin card -->
                <div class="col-auto mb-3">
                    <figure class="card imghvr-slide-up">
                        <img class="card-img" src="http://frontendfreecode.com/img/profile-image-09.jpg"  alt="Dave" />
                        <div class="expander"><i class="fas fa-chevron-up"></i></div>
                        <figcaption class="pt-5">
                            <h3>Dave</h3>
                            <p>Web Developer</p>
                            <a class="btn btn-info" data-toggle="modal" data-target="#team-member-dave">View Profile</a>
                        </figcaption>
                    </figure>
                </div>
                <!-- end card -->
                <!-- begin modal -->
                <div id="team-member-dave" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Dave</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body clearfix">
                                <h5>Web Developer</h5>
                                <p>This is where information on the person can be documented. This could be used as a biographical area that the person, or a staff member could write. It could include skills, projects worked on, or any number of other information.</p>
                                <p>Once content goes beyond the image to the left, it will wrap under the image. This area can be as big or as small as needed.</p>
                            </div>
                            <div class="modal-footer">
                                <ul class="social-links mr-auto pl-0 flex-wrap">
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fas fa-envelope"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-facebook"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-linkedin"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-google-plus"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="skype:echo123?call" target="_blank"><i class="fab fa-skype"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-pinterest"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-youtube"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-vimeo"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-behance-square"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-deviantart"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-stack-overflow"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-codepen"></i></a>
                                    </li>
                                </ul>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                    <!-- end modal -->
                </div>
                <!-- end item 1 -->
                <!-- item 2 -->
                <!-- begin card -->
                <div class="col-auto mb-3">
                    <figure class="card imghvr-slide-up">
                        <img class="card-img" src="http://frontendfreecode.com/img/profile-image-10.jpg"alt="Samantha" />
                        <div class="expander"><i class="fas fa-chevron-up"></i></div>
                        <figcaption class="pt-5">
                            <h3>Samantha</h3>
                            <p>Lead Animator</p>
                            <a class="btn btn-info" data-toggle="modal" data-target="#team-member-samantha">View Profile</a>
                        </figcaption>
                    </figure>
                </div>
                <!-- end card -->
                <!-- begin modal -->
                <div id="team-member-samantha" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Samantha</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body clearfix">
                                <h5>Lead Animator</h5>
                                <p>This is where information on the person can be documented. This could be used as a biographical area that the person, or a staff member could write. It could include skills, projects worked on, or any number of other information.</p>
                                <p>Once content goes beyond the image to the left, it will wrap under the image. This area can be as big or as small as needed.</p>
                            </div>
                            <div class="modal-footer">
                                <ul class="social-links mr-auto pl-0 flex-wrap">
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fas fa-envelope"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-facebook"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-linkedin"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-google-plus"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="skype:echo123?call" target="_blank"><i class="fab fa-skype"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-pinterest"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-youtube"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-vimeo"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-behance-square"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-deviantart"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-stack-overflow"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-codepen"></i></a>
                                    </li>
                                </ul>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                    <!-- end modal -->
                </div>
                <!-- end item 2

                        <!-- item 3 -->
                <!-- begin card -->
                <div class="col-auto mb-3">
                    <figure class="card imghvr-slide-up">
                        <img class="card-img" src="http://frontendfreecode.com/img/profile-image-11.jpg" alt="Ben" />
                        <div class="expander"><i class="fas fa-chevron-up"></i></div>
                        <figcaption class="pt-5">
                            <h3>Ben</h3>
                            <p>Digital Artist</p>
                            <a class="btn btn-info" data-toggle="modal" data-target="#team-member-ben">View Profile</a>
                        </figcaption>
                    </figure>
                </div>
                <!-- end card -->
                <!-- begin modal -->
                <div id="team-member-ben" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Ben</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body clearfix">
                                <h5>Digital Artist</h5>
                                <p>This is where information on the person can be documented. This could be used as a biographical area that the person, or a staff member could write. It could include skills, projects worked on, or any number of other information.</p>
                                <p>Once content goes beyond the image to the left, it will wrap under the image. This area can be as big or as small as needed.</p>
                            </div>
                            <div class="modal-footer">
                                <ul class="social-links mr-auto pl-0 flex-wrap">
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fas fa-envelope"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-facebook"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-linkedin"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-google-plus"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="skype:echo123?call" target="_blank"><i class="fab fa-skype"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-pinterest"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-youtube"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-vimeo"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-behance-square"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-deviantart"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-stack-overflow"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-codepen"></i></a>
                                    </li>
                                </ul>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                    <!-- end modal -->
                </div>
                <!-- end item 3 -->
                <!-- item 4 -->
                <!-- begin card -->
                <div class="col-auto mb-3">
                    <figure class="card imghvr-slide-up">
                        <img class="card-img" src="http://frontendfreecode.com/img/profile-image-12.png" alt="Parissa" />
                        <div class="expander"><i class="fas fa-chevron-up"></i></div>
                        <figcaption class="pt-5">
                            <h3>Parissa</h3>
                            <p>Change Manager</p>
                            <a class="btn btn-info" data-toggle="modal" data-target="#team-member-ben">View Profile</a>
                        </figcaption>
                    </figure>
                </div>
                <!-- end card -->
                <!-- begin modal -->
                <div id="team-member-parissa" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Ben</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body clearfix">
                                <h5>Change Manager</h5>
                                <p>This is where information on the person can be documented. This could be used as a biographical area that the person, or a staff member could write. It could include skills, projects worked on, or any number of other information.</p>
                                <p>Once content goes beyond the image to the left, it will wrap under the image. This area can be as big or as small as needed.</p>
                            </div>
                            <div class="modal-footer">
                                <ul class="social-links mr-auto pl-0 flex-wrap">
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fas fa-envelope"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-facebook"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-linkedin"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-google-plus"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="skype:echo123?call" target="_blank"><i class="fab fa-skype"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#https://www.pinterest.co.uk/insertusername/" target="_blank"><i class="fab fa-pinterest"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-youtube"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-vimeo"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-behance-square"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-deviantart"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-stack-overflow"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-codepen"></i></a>
                                    </li>
                                </ul>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                    <!-- end modal -->
                </div>
                <!-- end item 4 -->

            </div>
        </div>
        <!-- end card content -->

    </div>
    <!-- end row -->
</article><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
.row {
  margin: 0;
}
/* Compiled coding for cards */
.cs-cards figure,
.cs-cards figure > figcaption {
  background-color: white;
  color: black;
} /* sets default colors and bg */
.cs-cards figure > figcaption > h1,
.cs-cards figure > figcaption > h2,
.cs-cards figure > figcaption > h3,
.cs-cards figure > figcaption > h4,
.cs-cards figure > figcaption > h5 {
  color: black;
} /* sets default colour for headings */
.cs-cards figure.card {
  margin: 0;
} /* remove bootstrap card margin */
.cs-cards figure {
  width: 250px;
  height: 250px;
} /* set max size of team cards */
.cs-cards .expander {
  /* upward arrow to suggest interactivity */
  width: 100%;
  text-align: right;
  padding-right: 10px;
  position: absolute;
  bottom: 0;
}
.cs-cards .expander i {
  min-height: 32px;
  font-size: 24px;
  color: black;
  padding: 0 3px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-bottom: none;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.cs-cards img {
  max-width: 100%;
  height: auto;
} /* sets image size to full container */
.cs-cards figcaption a {
  cursor: pointer;
} /* restore link pointer */
.cs-cards h3 {
  color: inherit;
  margin-bottom: 0;
} /* set heading to inherit colour from parent */
.cs-cards a.btn {
  position: relative;
} /* restores button to relativity*/
.cs-cards a.btn,
.cs-cards a.btn:hover {
  color: #ffffff;
} /* sets default and hover font colour of button */
.cs-cards .imgbghover {
  /* image inserted via javascript */
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  -webkit-filter: blur(10px) opacity(0.4);
  filter: blur(10px) opacity(0.4);
}
.cs-modal-footer {
  padding: 1rem !important; /* overrides row default padding */
  border-top: 1px solid #e9ecef;
}
.cs-gallery figure {
  width: auto;
  height: auto;
}

ul.social-links {
  list-style: none;
  display: flex;
  flex-direction: row;
  padding-left: 0;
  margin-bottom: 0;
}
ul.social-links a {
  color: rgb(96, 96, 96);
} /* sets default colour which can be overridden in individual sections */
ul.social-links.social-light a {
  color: rgb(255, 255, 255);
} /* sets lighter default colour */
ul.social-links > li {
  margin: 0;
}
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.2.0/css/all.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/imagehover.css/1.0/css/imagehover.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.2.0/css/all.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/imagehover.css/1.0/css/imagehover.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js'></script>
<style>
.row {
  margin: 0;
}
/* Compiled coding for cards */
.cs-cards figure,
.cs-cards figure > figcaption {
  background-color: white;
  color: black;
} /* sets default colors and bg */
.cs-cards figure > figcaption > h1,
.cs-cards figure > figcaption > h2,
.cs-cards figure > figcaption > h3,
.cs-cards figure > figcaption > h4,
.cs-cards figure > figcaption > h5 {
  color: black;
} /* sets default colour for headings */
.cs-cards figure.card {
  margin: 0;
} /* remove bootstrap card margin */
.cs-cards figure {
  width: 250px;
  height: 250px;
} /* set max size of team cards */
.cs-cards .expander {
  /* upward arrow to suggest interactivity */
  width: 100%;
  text-align: right;
  padding-right: 10px;
  position: absolute;
  bottom: 0;
}
.cs-cards .expander i {
  min-height: 32px;
  font-size: 24px;
  color: black;
  padding: 0 3px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-bottom: none;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.cs-cards img {
  max-width: 100%;
  height: auto;
} /* sets image size to full container */
.cs-cards figcaption a {
  cursor: pointer;
} /* restore link pointer */
.cs-cards h3 {
  color: inherit;
  margin-bottom: 0;
} /* set heading to inherit colour from parent */
.cs-cards a.btn {
  position: relative;
} /* restores button to relativity*/
.cs-cards a.btn,
.cs-cards a.btn:hover {
  color: #ffffff;
} /* sets default and hover font colour of button */
.cs-cards .imgbghover {
  /* image inserted via javascript */
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  -webkit-filter: blur(10px) opacity(0.4);
  filter: blur(10px) opacity(0.4);
}
.cs-modal-footer {
  padding: 1rem !important; /* overrides row default padding */
  border-top: 1px solid #e9ecef;
}
.cs-gallery figure {
  width: auto;
  height: auto;
}

ul.social-links {
  list-style: none;
  display: flex;
  flex-direction: row;
  padding-left: 0;
  margin-bottom: 0;
}
ul.social-links a {
  color: rgb(96, 96, 96);
} /* sets default colour which can be overridden in individual sections */
ul.social-links.social-light a {
  color: rgb(255, 255, 255);
} /* sets lighter default colour */
ul.social-links > li {
  margin: 0;
}
</style>

</head>
<body>
<article id="team-members" class="parallax-container parallax-bg-2" role="article">
    <div class="row">

        <div class="col-lg-10 offset-lg-1 pt-5">
            <h2 class="article-title"><span class="display-4">Team Profile</span></h2>
        </div>
        <!-- card content -->
        <div class="col-lg-10 offset-lg-1 pt-2">
            <div class="card-deck cs-cards justify-content-center">
                <!-- item template -->
                <!-- begin card -->
                <div class="col-auto mb-3">
                    <figure class="card imghvr-slide-up">
                        <img class="card-img" src="http://frontendfreecode.com/img/profile-image-08.jpg" />
                        <div class="expander"><i class="fas fa-chevron-up"></i></div>
                        <figcaption class="pt-5">
                            <h3>Team Member Name</h3>
                            <p>Job Title</p>
                            <a class="btn btn-info" data-toggle="modal" data-target="#team-member-name">View Profile</a>
                        </figcaption>
                    </figure>
                </div>
                <!-- end card -->
                <!-- begin modal -->
                <div id="team-member-name" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Team Member Name</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body clearfix">
                                <h5>Job Title</h5>
                                <p>This is where information on the person can be documented. This could be used as a biographical area that the person, or a staff member could write. It could include skills, projects worked on, or any number of other information.</p>
                                <p>Once content goes beyond the image to the left, it will wrap under the image. This area can be as big or as small as needed.</p>
                            </div>
                            <div class="modal-footer">
                                <ul class="social-links mr-auto pl-0 flex-wrap">
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fas fa-envelope"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-facebook"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-linkedin"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-google-plus"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="skype:echo123?call" target="_blank"><i class="fab fa-skype"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-pinterest"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-youtube"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-vimeo"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-behance-square"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-deviantart"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-stack-overflow"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-codepen"></i></a>
                                    </li>
                                </ul>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                    <!-- end modal -->
                </div>
                <!-- end item template -->
                <!-- item 1 -->
                <!-- begin card -->
                <div class="col-auto mb-3">
                    <figure class="card imghvr-slide-up">
                        <img class="card-img" src="http://frontendfreecode.com/img/profile-image-09.jpg"  alt="Dave" />
                        <div class="expander"><i class="fas fa-chevron-up"></i></div>
                        <figcaption class="pt-5">
                            <h3>Dave</h3>
                            <p>Web Developer</p>
                            <a class="btn btn-info" data-toggle="modal" data-target="#team-member-dave">View Profile</a>
                        </figcaption>
                    </figure>
                </div>
                <!-- end card -->
                <!-- begin modal -->
                <div id="team-member-dave" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Dave</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body clearfix">
                                <h5>Web Developer</h5>
                                <p>This is where information on the person can be documented. This could be used as a biographical area that the person, or a staff member could write. It could include skills, projects worked on, or any number of other information.</p>
                                <p>Once content goes beyond the image to the left, it will wrap under the image. This area can be as big or as small as needed.</p>
                            </div>
                            <div class="modal-footer">
                                <ul class="social-links mr-auto pl-0 flex-wrap">
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fas fa-envelope"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-facebook"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-linkedin"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-google-plus"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="skype:echo123?call" target="_blank"><i class="fab fa-skype"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-pinterest"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-youtube"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-vimeo"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-behance-square"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-deviantart"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-stack-overflow"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-codepen"></i></a>
                                    </li>
                                </ul>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                    <!-- end modal -->
                </div>
                <!-- end item 1 -->
                <!-- item 2 -->
                <!-- begin card -->
                <div class="col-auto mb-3">
                    <figure class="card imghvr-slide-up">
                        <img class="card-img" src="http://frontendfreecode.com/img/profile-image-10.jpg"alt="Samantha" />
                        <div class="expander"><i class="fas fa-chevron-up"></i></div>
                        <figcaption class="pt-5">
                            <h3>Samantha</h3>
                            <p>Lead Animator</p>
                            <a class="btn btn-info" data-toggle="modal" data-target="#team-member-samantha">View Profile</a>
                        </figcaption>
                    </figure>
                </div>
                <!-- end card -->
                <!-- begin modal -->
                <div id="team-member-samantha" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Samantha</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body clearfix">
                                <h5>Lead Animator</h5>
                                <p>This is where information on the person can be documented. This could be used as a biographical area that the person, or a staff member could write. It could include skills, projects worked on, or any number of other information.</p>
                                <p>Once content goes beyond the image to the left, it will wrap under the image. This area can be as big or as small as needed.</p>
                            </div>
                            <div class="modal-footer">
                                <ul class="social-links mr-auto pl-0 flex-wrap">
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fas fa-envelope"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-facebook"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-linkedin"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-google-plus"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="skype:echo123?call" target="_blank"><i class="fab fa-skype"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-pinterest"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-youtube"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-vimeo"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-behance-square"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-deviantart"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-stack-overflow"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-codepen"></i></a>
                                    </li>
                                </ul>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                    <!-- end modal -->
                </div>
                <!-- end item 2

                        <!-- item 3 -->
                <!-- begin card -->
                <div class="col-auto mb-3">
                    <figure class="card imghvr-slide-up">
                        <img class="card-img" src="http://frontendfreecode.com/img/profile-image-11.jpg" alt="Ben" />
                        <div class="expander"><i class="fas fa-chevron-up"></i></div>
                        <figcaption class="pt-5">
                            <h3>Ben</h3>
                            <p>Digital Artist</p>
                            <a class="btn btn-info" data-toggle="modal" data-target="#team-member-ben">View Profile</a>
                        </figcaption>
                    </figure>
                </div>
                <!-- end card -->
                <!-- begin modal -->
                <div id="team-member-ben" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Ben</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body clearfix">
                                <h5>Digital Artist</h5>
                                <p>This is where information on the person can be documented. This could be used as a biographical area that the person, or a staff member could write. It could include skills, projects worked on, or any number of other information.</p>
                                <p>Once content goes beyond the image to the left, it will wrap under the image. This area can be as big or as small as needed.</p>
                            </div>
                            <div class="modal-footer">
                                <ul class="social-links mr-auto pl-0 flex-wrap">
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fas fa-envelope"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-facebook"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-linkedin"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-google-plus"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="skype:echo123?call" target="_blank"><i class="fab fa-skype"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-pinterest"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-youtube"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-vimeo"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-behance-square"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-deviantart"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-stack-overflow"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-codepen"></i></a>
                                    </li>
                                </ul>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                    <!-- end modal -->
                </div>
                <!-- end item 3 -->
                <!-- item 4 -->
                <!-- begin card -->
                <div class="col-auto mb-3">
                    <figure class="card imghvr-slide-up">
                        <img class="card-img" src="http://frontendfreecode.com/img/profile-image-12.png" alt="Parissa" />
                        <div class="expander"><i class="fas fa-chevron-up"></i></div>
                        <figcaption class="pt-5">
                            <h3>Parissa</h3>
                            <p>Change Manager</p>
                            <a class="btn btn-info" data-toggle="modal" data-target="#team-member-ben">View Profile</a>
                        </figcaption>
                    </figure>
                </div>
                <!-- end card -->
                <!-- begin modal -->
                <div id="team-member-parissa" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Ben</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body clearfix">
                                <h5>Change Manager</h5>
                                <p>This is where information on the person can be documented. This could be used as a biographical area that the person, or a staff member could write. It could include skills, projects worked on, or any number of other information.</p>
                                <p>Once content goes beyond the image to the left, it will wrap under the image. This area can be as big or as small as needed.</p>
                            </div>
                            <div class="modal-footer">
                                <ul class="social-links mr-auto pl-0 flex-wrap">
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fas fa-envelope"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-facebook"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-linkedin"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-google-plus"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="skype:echo123?call" target="_blank"><i class="fab fa-skype"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#https://www.pinterest.co.uk/insertusername/" target="_blank"><i class="fab fa-pinterest"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-youtube"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-vimeo"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-behance-square"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-deviantart"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-stack-overflow"></i></a>
                                    </li>
                                    <li class="mr-3 hover-anim-2">
                                        <a href="#" target="_blank"><i class="fab fa-codepen"></i></a>
                                    </li>
                                </ul>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                    <!-- end modal -->
                </div>
                <!-- end item 4 -->

            </div>
        </div>
        <!-- end card content -->

    </div>
    <!-- end row -->
</article><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview