Subtotal: $200.00
Team
Style 1
Our Crazy Team
Marcos Alonso
Class Master
Luis Aragones
Marketer
Maria Alessis
Class Master
John Doe
PHP Devloper
Gigi Hadid
Graphic Designer
<!--Crazy Team area are start-->
<div class="crazy-team-area">
<div class="section-title roboto">
<h1>Our Crazy <span>Team</span></h1>
</div>
<div class="row">
<div class="col-xl-3 col-lg-4 col-md-4 col-sm-6 col">
<div class="single-team text-center ">
<div class="team-img def-hover-eff br-eff">
<a href="#"><img src="images/team/01.png" alt=""></a>
<ul class="social-icons animated">
<li><a href="#" title="Facebook" data-toggle="tooltip" class="facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" title="Twitter" data-toggle="tooltip" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" title="Google plus" data-toggle="tooltip" class="google-plus"><i
class="fa fa-google-plus"></i></a></li>
</ul>
</div>
<div class="team-title">
<h3>Marcos Alonso</h3>
</div>
<div class="team-resp">
<span>Class Master</span>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-4 col-sm-6 col">
<div class="single-team text-center ">
<div class="team-img def-hover-eff br-eff">
<a href="#"><img src="images/team/02.png" alt=""></a>
<ul class="social-icons animated">
<li><a href="#" title="Facebook" data-toggle="tooltip" class="facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" title="Twitter" data-toggle="tooltip" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" title="Google plus" data-toggle="tooltip" class="google-plus"><i
class="fa fa-google-plus"></i></a></li>
</ul>
</div>
<div class="team-title">
<h3>Luis Aragones</h3>
</div>
<div class="team-resp">
<span>Marketer</span>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-4 col-sm-6 col">
<div class="single-team text-center ">
<div class="team-img def-hover-eff br-eff">
<a href="#"><img src="images/team/03.png" alt=""></a>
<ul class="social-icons animated">
<li><a href="#" title="Facebook" data-toggle="tooltip" class="facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" title="Twitter" data-toggle="tooltip" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" title="Google plus" data-toggle="tooltip" class="google-plus"><i
class="fa fa-google-plus"></i></a></li>
</ul>
</div>
<div class="team-title">
<h3>Maria Alessis</h3>
</div>
<div class="team-resp">
<span>Class Master</span>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-4 col-sm-6 col">
<div class="single-team text-center ">
<div class="team-img def-hover-eff br-eff">
<a href="#"><img src="images/team/04.png" alt=""></a>
<ul class="social-icons animated">
<li><a href="#" title="Facebook" data-toggle="tooltip" class="facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" title="Twitter" data-toggle="tooltip" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" title="Google plus" data-toggle="tooltip" class="google-plus"><i
class="fa fa-google-plus"></i></a></li>
</ul>
</div>
<div class="team-title">
<h3>John Doe</h3>
</div>
<div class="team-resp">
<span>PHP Devloper</span>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-4 col-sm-6 col">
<div class="single-team text-center ">
<div class="team-img def-hover-eff br-eff">
<a href="#"><img src="images/team/05.png" alt=""></a>
<ul class="social-icons animated">
<li><a href="#" title="Facebook" data-toggle="tooltip" class="facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" title="Twitter" data-toggle="tooltip" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" title="Google plus" data-toggle="tooltip" class="google-plus"><i
class="fa fa-google-plus"></i></a></li>
</ul>
</div>
<div class="team-title">
<h3>Gigi Hadid</h3>
</div>
<div class="team-resp">
<span>Graphic Designer</span>
</div>
</div>
</div>
</div>
</div>
<!--Crazy Team area are end-->
/* team area */
.team-img {
border-radius: 100%;
height: 194px;
margin: auto auto 25px;
overflow: hidden;
position: relative;
width: 194px;
}
.social-icons {
left: 0;
margin-top: -14px;
position: absolute;
right: 0;
text-align: center;
top: 50%;
width: 100%;
animation-name:fadeOutUp;
}
.single-team:hover .def-hover-eff a::before {
height: 100%;
left: 0;
top: 0;
width: 100%;
}
.single-team:hover .social-icons {
animation-name:fadeInUp;
}
.social-icons li {
display: inline-block;
}
.social-icons > li {
margin: 0 11px;
}
ul.social-icons li a {
color: #fff;
font-size: 20px;
}
.team-title > h3 {
font-size: 15px;
letter-spacing: 1px;
margin-bottom: 5px;
}
.team-resp > span {
color: #545659;
font-size: 13px;
font-style: italic;
letter-spacing: 1px;
}
.team-resp {
line-height: 20px;
}
.def-hover-eff.br-eff> a::before {
border-radius: 50%;
}
Style 2
Our Amazing Team
Himu Masud
Facebooker
Nasir Hossain
Class Master
Parvez Hossain
Wordpress Devloper
Ashim Baroi
Downloder
BM Rafiq
Fashion Designer
MS Newaz
Graphics Designer
Salim Rana
Marketing
Momen Sarif
Designer
Musa Tareq
Shopify Expart
<!--our amazing Team area are start-->
<div class="our-amazing-team ptb-80">
<div class="section-title text-center secton-title-2 uppercase roboto">
<h1>Our Amazing<span> Team</span></h1>
</div>
<div class="total-amazing-team carsoule-btn cb-3 cb-3-small">
<div class="single-amazing-team">
<div class="member-desc">
<h3>Himu Masud</h3>
<p class="role">Facebooker</p>
<div class="social-icon">
<a title="Facebook" href="#"> <i class="fa fa-facebook"></i></a>
<a title="Twitter" href="#"> <i class="fa fa-twitter"></i></a>
<a title="Behance" href="#"> <i class="fa fa-behance"></i></a>
<a title="Dribble" href="#"> <i class="fa fa-dribbble"></i></a>
</div>
</div>
<div class="sat-img">
<img src="images/team/01.jpg" alt="">
</div>
</div>
<div class="single-amazing-team">
<div class="member-desc">
<h3>Nasir Hossain</h3>
<p class="role">Class Master</p>
<div class="social-icon">
<a title="Facebook" href="#"> <i class="fa fa-facebook"></i></a>
<a title="Twitter" href="#"> <i class="fa fa-twitter"></i></a>
<a title="Behance" href="#"> <i class="fa fa-behance"></i></a>
<a title="Dribble" href="#"> <i class="fa fa-dribbble"></i></a>
</div>
</div>
<div class="sat-img">
<img src="images/team/02.jpg" alt="">
</div>
</div>
<div class="single-amazing-team">
<div class="member-desc">
<h3>Parvez Hossain</h3>
<p class="role">Wordpress Devloper</p>
<div class="social-icon">
<a title="Facebook" href="#"> <i class="fa fa-facebook"></i></a>
<a title="Twitter" href="#"> <i class="fa fa-twitter"></i></a>
<a title="Behance" href="#"> <i class="fa fa-behance"></i></a>
<a title="Dribble" href="#"> <i class="fa fa-dribbble"></i></a>
</div>
</div>
<div class="sat-img">
<img src="images/team/03.jpg" alt="">
</div>
</div>
<div class="single-amazing-team">
<div class="member-desc">
<h3>Ashim Baroi</h3>
<p class="role">Downloder</p>
<div class="social-icon">
<a title="Facebook" href="#"> <i class="fa fa-facebook"></i></a>
<a title="Twitter" href="#"> <i class="fa fa-twitter"></i></a>
<a title="Behance" href="#"> <i class="fa fa-behance"></i></a>
<a title="Dribble" href="#"> <i class="fa fa-dribbble"></i></a>
</div>
</div>
<div class="sat-img">
<img src="images/team/04.jpg" alt="">
</div>
</div>
<div class="single-amazing-team">
<div class="member-desc">
<h3>BM Rafiq</h3>
<p class="role">Fashion Designer</p>
<div class="social-icon">
<a title="Facebook" href="#"> <i class="fa fa-facebook"></i></a>
<a title="Twitter" href="#"> <i class="fa fa-twitter"></i></a>
<a title="Behance" href="#"> <i class="fa fa-behance"></i></a>
<a title="Dribble" href="#"> <i class="fa fa-dribbble"></i></a>
</div>
</div>
<div class="sat-img">
<img src="images/team/08.jpg" alt="">
</div>
</div>
<div class="single-amazing-team">
<div class="member-desc">
<h3>MS Newaz</h3>
<p class="role">Graphics Designer</p>
<div class="social-icon">
<a title="Facebook" href="#"> <i class="fa fa-facebook"></i></a>
<a title="Twitter" href="#"> <i class="fa fa-twitter"></i></a>
<a title="Behance" href="#"> <i class="fa fa-behance"></i></a>
<a title="Dribble" href="#"> <i class="fa fa-dribbble"></i></a>
</div>
</div>
<div class="sat-img">
<img src="images/team/06.jpg" alt="">
</div>
</div>
<div class="single-amazing-team">
<div class="member-desc">
<h3>Salim Rana</h3>
<p class="role">Marketing</p>
<div class="social-icon">
<a title="Facebook" href="#"> <i class="fa fa-facebook"></i></a>
<a title="Twitter" href="#"> <i class="fa fa-twitter"></i></a>
<a title="Behance" href="#"> <i class="fa fa-behance"></i></a>
<a title="Dribble" href="#"> <i class="fa fa-dribbble"></i></a>
</div>
</div>
<div class="sat-img">
<img src="images/team/06.jpg" alt="">
</div>
</div>
<div class="single-amazing-team">
<div class="member-desc">
<h3>Momen Sarif</h3>
<p class="role">Designer</p>
<div class="social-icon">
<a title="Facebook" href="#"> <i class="fa fa-facebook"></i></a>
<a title="Twitter" href="#"> <i class="fa fa-twitter"></i></a>
<a title="Behance" href="#"> <i class="fa fa-behance"></i></a>
<a title="Dribble" href="#"> <i class="fa fa-dribbble"></i></a>
</div>
</div>
<div class="sat-img">
<img src="images/team/07.jpg" alt="">
</div>
</div>
<div class="single-amazing-team">
<div class="member-desc">
<h3>Musa Tareq</h3>
<p class="role">Shopify Expart</p>
<div class="social-icon">
<a title="Facebook" href="#"> <i class="fa fa-facebook"></i></a>
<a title="Twitter" href="#"> <i class="fa fa-twitter"></i></a>
<a title="Behance" href="#"> <i class="fa fa-behance"></i></a>
<a title="Dribble" href="#"> <i class="fa fa-dribbble"></i></a>
</div>
</div>
<div class="sat-img">
<img src="images/team/05.jpg" alt="">
</div>
</div>
</div>
</div>
<!--aour amazing team area are end-->
.single-amazing-team{
position: relative;
}
.member-desc {
background: #2395ec none repeat scroll 0 0;
border-radius: 3px;
left: 0;
padding: 10px;
position: absolute;
text-align: center;
top: 0;
transform: scale(0);
transition: all 0.3s ease 0s;
width: 100%;
}
.member-desc:before {
content:"";
position:absolute;
width:0;
height:0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #2395ec transparent transparent;
left:50%;
bottom:-9px;
margin-left:-10px
}
.single-amazing-team:hover .member-desc {
transform: scale(1);
}
.member-desc > h3 {
color: #fff;
font-size: 15px;
letter-spacing: 1px;
line-height: 25px;
margin-bottom: 0;
}
.member-desc .role {
color: #e6ebe5;
font-size: 14px;
font-style: italic;
letter-spacing: 1px;
margin-bottom: 5px;
}
.social-icon > a {
color: #fff;
margin: 0 5px;
}
.social-icon > a:hover {
color: #222;
}
.total-amazing-team .slick-slide {
padding-top: 110px;
position: relative;
}
.total-amazing-team .slick-list {
margin-top: -110px;
}
.carsoule-btn.cb-3.cb-3-small .slick-arrow {
height: 35px;
line-height: 35px;
margin-top: -17px;
width:35px;
}
.carsoule-btn.cb-3.cb-3-small .arrow-left.slick-arrow {
left: 15px;
}
.carsoule-btn.cb-3.cb-3-small .arrow-right.slick-arrow {
right: 15px;
}
Photo Stream
