When you have a team, it is a good idea to showcase them on your site. This will improve the credibility among the users and make them believe that they are working with real people. In this article let us explain step by step how to create a team member widget with parallax background using the popular Bootstrap framework.
The team member widget will look like below:
Bootstrap Team Member Widget
The widget has two parts:
- Header part including Bootstrap, font-awesome and custom CSS.
- HTML part for four team members with profile pictures, title, description and social icons.
Header Part
First link the Bootstrap and font awesome CSS like below inside the <head>…</head> tags of your page. We have used CDN links, you can either use the CDN links or host the files on your server and link here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>Insert the following custom CSS before the closing </head> tag.
<style>
#team {
background: url(https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team.jpg) no-repeat center center fixed;
padding: 60px 0;
text-align: center;
background-size: cover;
}
#team h2 {
color: #fff;
}
#team p {
color: #fff;
line-height: 25px;
}
#team h4 {
padding-top: 10px;
color: #fff;
font-weight:bold;
}
#team p.large {
margin-top: 60px;
margin-bottom: 30px;
}
#team .fa {
width: 30px;
height: 30px;
margin: 0 3px;
border-radius: 100%;
font-size: 15px;
line-height: 30px;
outline: 0;
color: #fff;
background-color: #e91e63;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
#team .fa:hover {
background-color: #673ab7;
}
.teamborder {
border: 1px solid lightgray;
padding: 20px;
}
hr {
display: block;
height: 3px;
border: 0;
margin: 3em 0;
padding: 0;
background-image: linear-gradient(left, #fff, #e6e6e6, #fff);
background-image: -webkit-linear-gradient(left, #fff, #e6e6e6, #fff);
background-image: -moz-linear-gradient(left, #fff, #e6e6e6, #fff);
background-image: -o-linear-gradient(left, #fff, #e6e6e6, #fff);
width: 50%;
left: 25%;
position: relative;
border: none;
}
#team hr {
display: block;
height: 3px;
border: 0;
margin: 3em 0;
padding: 0;
background-image: linear-gradient(left, rgba(255, 255, 255, 0), #71c9d6, rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #71c9d6, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), #71c9d6, rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), #71c9d6, rgba(255, 255, 255, 0));
width: 50%;
left: 25%;
position: relative;
border: none;
}
.row {
margin: 10px;
}
.btn-md {
border-width: 0;
outline: none;
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
transition: .2s ease-out;
cursor: pointer;
}
.team-md {
box-shadow: inset 0px 0px 22px 2px #e3d1d1;
transition: .2s ease-out;
}
</style>The custom CSS is very easy to understand. Basically we have defined the style for horizontal divider (hr), paragraph (p), headings (h2,h4) and the font icons (fa). Also “team-md” class is used to create box shadow effect.
HTML for the Widget
The HTML part is super simple than the CSS. Below is the HTML for single team member:
<div class="col-lg-3 teamborder team-md">
<!-- Profile Image -->
<img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team01.jpg" height="120px" width="120px" alt="">
<!-- Title -->
<h4>Team Member 1</h4>
<!-- Description -->
<p>Here is a short description to explain the profile of the member.</p>
<!-- Social Icons -->
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>Let us make the complete HTML for four team members:
<div id="team" name="team">
<div class="container">
<div class="row centered">
<h2 class="centered">MEET OUR AWESOME TEAM</h2>
<hr>
<div class="col-lg-3 teamborder team-md">
<img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team01.jpg" height="120px" width="120px" alt="">
<h4>Team Member 1</h4>
<p>Here is a short description to explain the profile of the member.</p>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
<div class="col-lg-3 teamborder team-md">
<img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team02.jpg" height="120px" width="120px" alt="">
<h4>Team Member 2</h4>
<p>Here is a short description to explain the profile of the member.</p>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
<div class="col-lg-3 teamborder team-md">
<img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team03.jpg" height="120px" width="120px" alt="">
<h4>Team Member 3</h4>
<p>Here is a short description to explain the profile of the member.</p>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
<div class="col-lg-3 teamborder team-md">
<img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team04.jpg" height="120px" width="120px" alt="">
<h4>Team Member 4</h4>
<p>Here is a short description to explain the profile of the member.</p>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
<div class="col-lg-8 col-lg-offset-2 centered">
<p class="large">Enter any additional information to be provided here.</p>
</div>
</div>
</div>
</div>Putting it Together
Now the CSS and HTML are ready!!! Jut put it together like below to have a complete widget. Remember to use your own images and add alt tags for all images.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
#team {
background: url(https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team.jpg) no-repeat center center fixed;
padding: 60px 0;
text-align: center;
background-size: cover;
}
#team h2 {
color: #fff;
}
#team p {
color: #fff;
line-height: 25px;
}
#team h4 {
padding-top: 10px;
color: #fff;
font-weight:bold;
}
#team p.large {
margin-top: 60px;
margin-bottom: 30px;
}
#team .fa {
width: 30px;
height: 30px;
margin: 0 3px;
border-radius: 100%;
font-size: 15px;
line-height: 30px;
outline: 0;
color: #fff;
background-color: #e91e63;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
#team .fa:hover {
background-color: #673ab7;
}
.teamborder {
border: 1px solid lightgray;
padding: 20px;
}
hr {
display: block;
height: 3px;
border: 0;
margin: 3em 0;
padding: 0;
background-image: linear-gradient(left, #fff, #e6e6e6, #fff);
background-image: -webkit-linear-gradient(left, #fff, #e6e6e6, #fff);
background-image: -moz-linear-gradient(left, #fff, #e6e6e6, #fff);
background-image: -o-linear-gradient(left, #fff, #e6e6e6, #fff);
width: 50%;
left: 25%;
position: relative;
border: none;
}
#team hr {
display: block;
height: 3px;
border: 0;
margin: 3em 0;
padding: 0;
background-image: linear-gradient(left, rgba(255, 255, 255, 0), #71c9d6, rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #71c9d6, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), #71c9d6, rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), #71c9d6, rgba(255, 255, 255, 0));
width: 50%;
left: 25%;
position: relative;
border: none;
}
.row {
margin: 10px;
}
.team-md {
box-shadow: inset 0px 0px 22px 2px #e3d1d1;
transition: .2s ease-out;
}
</style>
</head>
<body>
<!-- Team Section -->
<div id="team" name="team">
<div class="container">
<div class="row centered">
<h2 class="centered">MEET OUR AWESOME TEAM</h2>
<hr>
<div class="col-lg-3 teamborder team-md">
<img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team01.jpg" height="120px" width="120px" alt="">
<h4>Team Member 1</h4>
<p>Here is a short description to explain the profile of the member.</p>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
<div class="col-lg-3 teamborder team-md">
<img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team02.jpg" height="120px" width="120px" alt="">
<h4>Team Member 2</h4>
<p>Here is a short description to explain the profile of the member.</p>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
<div class="col-lg-3 teamborder team-md">
<img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team03.jpg" height="120px" width="120px" alt="">
<h4>Team Member 3</h4>
<p>Here is a short description to explain the profile of the member.</p>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
<div class="col-lg-3 teamborder team-md">
<img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team04.jpg" height="120px" width="120px" alt="">
<h4>Team Member 4</h4>
<p>Here is a short description to explain the profile of the member.</p>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
<div class="col-lg-8 col-lg-offset-2 centered">
<p class="large">Enter any additional information to be provided here.</p>
</div>
</div>
</div>
</div>
</body>
</html>You can use the above code as a new team member page on your Bootstrap site. Otherwise, just copy the custom CSS and HTML part and add in header and body sections respectively to insert the team member widget anywhere on your site.
Leave a Reply
Your email is safe with us.