- One account for five websites!
- Free access to Premium Codes
- Acess to cool web tools
- Ask and answer questions
- Stay ahead of other web developers
- and MUCH MORE!
Sign up
Sign in
Home
How to use
Sitemap
About Us
Suggested
Privacy Policy
Previous Code
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">×</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">×</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">×</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">×</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">×</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">×</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">×</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">×</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">×</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">×</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>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>
Preview
Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes
WHAT IS NEW IN KERIXA?
RECENT CODES
CATEGORIES
Frontend Free Code
© 2025 Kerixa Inc