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;
}