Bootstrap Teams - Component Snippets
A team section of a website is important to highlight the team that is behind the project. It helps customers connect with the people who are involved in the project or product. The team section can help customers see that there is more to the website than just their product. A good example of this is how Amazon does it on their homepage - they present their product, Alexa, as a part of Amazon.
Team Style 1
<!--====== TEAM STYLE ONE START ======-->
<section class="team-area">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="single-team text-center team-style-one">
<div class="team-image">
<img src="https://cdn.ayroui.com/1.0/images/team/team-1.jpg" alt="Team" />
</div>
<div class="team-content">
<h4 class="name">Jeffery Riley</h4>
<span class="sub-title">Art Director</span>
<ul class="social">
<li>
<a href="javascript:void(0)">
<i class="lni lni-facebook-filled"></i>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="lni lni-twitter-original"></i>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="lni lni-linkedin-original"></i>
</a>
</li>
</ul>
</div>
</div>
<!-- single team -->
</div>
<div class="col-lg-3 col-md-6">
<div class="single-team text-center team-style-one">
<div class="team-image">
<img src="https://cdn.ayroui.com/1.0/images/team/team-2.jpg" alt="Team" />
</div>
<div class="team-content">
<h4 class="name">Riley Beata</h4>
<span class="sub-title">Art Director</span>
<ul class="social">
<li>
<a href="javascript:void(0)">
<i class="lni lni-facebook-filled"></i>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="lni lni-twitter-original"></i>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="lni lni-linkedin-original"></i>
</a>
</li>
</ul>
</div>
</div>
<!-- single team -->
</div>
<div class="col-lg-3 col-md-6">
<div class="single-team text-center team-style-one">
<div class="team-image">
<img src="https://cdn.ayroui.com/1.0/images/team/team-3.jpg" alt="Team" />
</div>
<div class="team-content">
<h4 class="name">Kamil Kiwis</h4>
<span class="sub-title">Art Director</span>
<ul class="social">
<li>
<a href="javascript:void(0)">
<i class="lni lni-facebook-filled"></i>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="lni lni-twitter-original"></i>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="lni lni-linkedin-original"></i>
</a>
</li>
</ul>
</div>
</div>
<!-- single team -->
</div>
<div class="col-lg-3 col-md-6">
<div class="single-team text-center team-style-one">
<div class="team-image">
<img src="https://cdn.ayroui.com/1.0/images/team/team-4.jpg" alt="Team" />
</div>
<div class="team-content">
<h4 class="name">Kamil Kiwis</h4>
<span class="sub-title">Art Director</span>
<ul class="social">
<li>
<a href="javascript:void(0)">
<i class="lni lni-facebook-filled"></i>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="lni lni-twitter-original"></i>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="lni lni-linkedin-original"></i>
</a>
</li>
</ul>
</div>
</div>
<!-- single team -->
</div>
</div>
<!-- row -->
</div>
<!-- container -->
</section>
<!--====== TEAM STYLE ONE ENDS ======-->/*===========================
teams css
===========================*/
.team-style-one {
position: relative;
margin-top: 30px;
box-shadow: var(--shadow-2);
border-radius: 8px;
overflow: hidden;
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
-ms-transition: all 0.4s ease-out 0s;
-o-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;
}
.team-style-one:hover {
box-shadow: var(--shadow-4);
}
.team-style-one .team-image img {
width: 100%;
}
.team-style-one .team-content {
padding: 20px 15px;
width: 100%;
background-color: var(--white);
}
.team-style-one .team-content .name {
font-size: 20px;
font-weight: 600;
line-height: 30px;
color: var(--black);
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.team-style-one .team-content .name {
font-size: 20px;
}
}
.team-style-one .team-content .sub-title {
font-size: 15px;
line-height: 24px;
color: var(--dark-3);
margin-top: 2px;
display: block;
}
.team-style-one .team-content .social {
margin-top: 12px;
}
.team-style-one .team-content .social li {
display: inline-block;
margin: 0 4px;
}
.team-style-one .team-content .social li a {
font-size: 16px;
color: var(--gray-1);
height: 35px;
width: 35px;
text-align: center;
line-height: 35px;
border: 1px solid var(--gray-4);
border-radius: 50%;
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
-ms-transition: all 0.4s ease-out 0s;
-o-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;
}
.team-style-one .team-content .social li a:hover {
background-color: var(--primary);
color: var(--white);
border-color: transparent;
}Team Style 2
Team Style 3
Team Style 4
Team Style 5
Team Style 6
Team Style 7
Team Style 8
