Our Team With Animated Social Links

Beautiful stylish our team HTML component with animated Social media links. You can simply use this component in any of your bootstrap website

Copy and Paste the code or Download and Use

You can use this Our Team With Animated Social Links web Component by simply copy and past the HTML code the HTML File and copy Past the CSS to the CSS file. You also Download the Project Folder on the Our Team With Animated Social Links by Clicking the Download button at the bottom

1, Add the CSS Files at the Header of the Document
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
2, Add the HTML Files to the Document
<section class="main-team">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="heading">
                            <h2>Our Team</h2>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="wrapper">
                            <div class="team-card">
                                <figure>
                                    <img src="assets/images/1.jpg">
                                    <div class="social-media">
                                        <ol>
                                            <li><a href="#"><i class="fab fa-behance"></i></a></li>
                                            <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                            <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                                            <li><a href="#"><i class="fab fa-dribbble"></i></a></li>
                                        </ol>
                                    </div>
                                </figure>
                                <div class="content-box">
                                    <h4>Daniel</h4>
                                    <span>Web Developer</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="wrapper">
                            <div class="team-card">
                                <figure>
                                    <img src="assets/images/2.jpg">
                                    <div class="social-media">
                                        <ol>
                                            <li><a href="#"><i class="fab fa-behance"></i></a></li>
                                            <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                            <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                                            <li><a href="#"><i class="fab fa-dribbble"></i></a></li>
                                        </ol>
                                    </div>
                                </figure>
                                <div class="content-box">
                                    <h4>Zami Zen</h4>
                                    <span>Content Writer</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="wrapper">
                            <div class="team-card">
                                <figure>
                                    <img src="assets/images/3.jpg">
                                    <div class="social-media">
                                        <ol>
                                            <li><a href="#"><i class="fab fa-behance"></i></a></li>
                                            <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                            <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                                            <li><a href="#"><i class="fab fa-dribbble"></i></a></li>
                                        </ol>
                                    </div>
                                </figure>
                                <div class="content-box">
                                    <h4>Albert Dell Rio</h4>
                                    <span>Web Designer</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
 </section>
3, Add the CSS Files at the Header of the Document
.main-team {
  padding-top: 50px;
}
.main-team .heading {
  display: inline-block;
  margin: 1.25rem 0;
  position: relative;
}
.main-team .heading h2 {
  font-size: 1.875rem;
  color: #222;
  text-transform: uppercase;
  letter-spacing: -0.1px;
  display: block;
  font-weight: 600;
}
@media screen and (max-width: 575.98px) {
  .main-team .heading h2 {
    font-size: 1.25rem;
  }
}
.main-team .wrapper {
  margin: 1.25rem 0;
  display: block;
}
.main-team .wrapper .team-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: 0px 10px 30px 0px rgba(0, 46, 40, 0.1);
}
.main-team .wrapper .team-card figure {
  position: relative;
  margin: 0;
  overflow: hidden;
}
.main-team .wrapper .team-card figure img {
  width: 100%;
}
.main-team .wrapper .team-card figure:hover .social-media {
  opacity: 1;
  visibility: visible;
}
.main-team .wrapper .team-card figure .social-media {
  position: absolute;
  bottom: 1.25rem;
  right: 0;
  left: 0;
  padding: 0.625rem 1.25rem;
  display: block;
  z-index: 1;
  text-align: center;
  transition: all ease-in-out 0.5s;
  opacity: 0;
  visibility: hidden;
}
.main-team .wrapper .team-card figure .social-media ol {
  display: inline-block;
  padding: 0.625rem 1.125rem;
  background: #E31C25;
}
.main-team .wrapper .team-card figure .social-media ol li {
  display: inline-block;
  margin: 0 0.3125rem;
  position: relative;
}
.main-team .wrapper .team-card figure .social-media ol li a {
  color: #fff;
  font-size: 0.875rem;
}
.main-team .wrapper .team-card .content-box {
  position: relative;
  padding: 1.25rem 1.5625rem;
  background: #fff;
  text-align: center;
  display: block;
}
.main-team .wrapper .team-card .content-box h4 {
  font-size: 1.25rem;
  color: #222;
  margin: 0.3125rem 0 0;
  display: inline-block;
  text-transform: capitalize;
  font-weight: 500;
}
@media screen and (max-width: 575.98px) {
  .main-team .wrapper .team-card .content-box h4 {
    font-size: 1.125rem;
  }
}
.main-team .wrapper .team-card .content-box span {
  display: block;
  margin: 0.3125rem 0;
  font-size: 0.9375rem;
}

Copyright © 2018 Smarteyeapps.com Design & Developed by Smarteye Technologies