Green Team Member HTML Component

Stylish Team member HTML Component with Green theme if you are use it for a green website it will be perfect fit for it. you can also easily change the color of the component

Copy and Paste the code or Download and Use

You can use this Green Team Member HTML Component 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 Green Team Member HTML Component 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-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <div class="wrapper">
                            <div class="team-card">
                                <figure>
                                    <img src="assets/images/5.jpg">
                                    <div class="social-media">
                                        <ol>
                                            <li><a href="#"><i class="flaticon-facebook"></i></a></li>
                                            <li><a href="#"><i class="flaticon-twitter"></i></a></li>
                                            <li><a href="#"><i class="flaticon-linkedin"></i></a></li>
                                            <li><a href="#"><i class="flaticon-instagram-logo"></i></a></li>
                                        </ol>
                                    </div>
                                </figure>
                                <div class="content-box">
                                    <h4>Harry Jones</h4>
                                    <span>Graphic Designer</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 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="flaticon-facebook"></i></a></li>
                                            <li><a href="#"><i class="flaticon-twitter"></i></a></li>
                                            <li><a href="#"><i class="flaticon-linkedin"></i></a></li>
                                            <li><a href="#"><i class="flaticon-instagram-logo"></i></a></li>
                                        </ol>
                                    </div>
                                </figure>
                                <div class="content-box">
                                    <h4>Daniel</h4>
                                    <span>Web Developer</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 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="flaticon-facebook"></i></a></li>
                                            <li><a href="#"><i class="flaticon-twitter"></i></a></li>
                                            <li><a href="#"><i class="flaticon-linkedin"></i></a></li>
                                            <li><a href="#"><i class="flaticon-instagram-logo"></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-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <div class="wrapper">
                            <div class="team-card">
                                <figure>
                                    <img src="assets/images/8.jpg">
                                    <div class="social-media">
                                        <ol>
                                            <li><a href="#"><i class="flaticon-facebook"></i></a></li>
                                            <li><a href="#"><i class="flaticon-twitter"></i></a></li>
                                            <li><a href="#"><i class="flaticon-linkedin"></i></a></li>
                                            <li><a href="#"><i class="flaticon-instagram-logo"></i></a></li>
                                        </ol>
                                    </div>
                                </figure>
                                <div class="content-box">
                                    <h4>Mia Scott</h4>
                                    <span>SEO</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
</section>
3, Add the CSS Files at the Header of the Document
.main-team {
  display: flex;
  align-items: center;
  position: relative;
}
@media screen and (max-width: 767.98px) {
  .main-team {
    height: 100%;
  }
}
.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;
  position: relative;
  padding-bottom: 0.3125rem;
}
.main-team .heading h2::before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 40%;
  height: 0.25rem;
  background: #56d600;
}
@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);
  overflow: hidden;
}
.main-team .wrapper .team-card:hover figure::before {
  display: block;
}
.main-team .wrapper .team-card:hover figure img {
  transform: scale(1.1);
}
.main-team .wrapper .team-card:hover .social-media {
  opacity: 1;
  visibility: visible;
}
.main-team .wrapper .team-card:hover .content-box {
  background: #56d600;
}
.main-team .wrapper .team-card:hover .content-box h4 {
  color: #fff;
}
.main-team .wrapper .team-card:hover .content-box span {
  color: #fff;
}
.main-team .wrapper .team-card:hover .content-box .line {
  background: #fff;
}
.main-team .wrapper .team-card figure {
  position: relative;
  margin: 0;
  transform: scale(1);
  transition: all ease-in-out 0.5s;
  overflow: hidden;
}
.main-team .wrapper .team-card figure::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  display: block;
  z-index: 1;
  display: none;
}
.main-team .wrapper .team-card figure img {
  width: 100%;
  transition: all ease 0.5s;
  transform: scale(1);
}
.main-team .wrapper .team-card figure .social-media {
  position: absolute;
  bottom: 0;
  top: 50%;
  right: 0;
  left: 0;
  width: 100%;
  padding: 0.625rem 0.125rem;
  display: block;
  z-index: 2;
  text-align: center;
  transition: all ease-in-out 0.5s;
  opacity: 0;
  visibility: hidden;
}
.main-team .wrapper .team-card figure .social-media ol li {
  display: inline-block;
  margin: 0 0.3125rem;
  position: relative;
  height: 2.25rem;
  width: 2.25rem;
  background-color: transparent;
  border: 1px solid #eaecec;
  border-radius: 50%;
  line-height: 2.25rem;
  transition: all 0.5s;
  transform: scale(1);
  overflow: hidden;
}
.main-team .wrapper .team-card figure .social-media ol li:hover {
  transform: scale(1.1);
  background: rgba(86, 214, 0, 0.6);
}
.main-team .wrapper .team-card figure .social-media ol li:hover a {
  color: #fff;
  transform: scale(0.9);
}
.main-team .wrapper .team-card figure .social-media ol li a {
  color: #fff;
  font-size: 0.875rem;
  transition: all ease-in-out 0.6s;
  transform: scale(1);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: absolute;
}
.main-team .wrapper .team-card .content-box {
  position: relative;
  padding: 1.25rem 1.5625rem;
  background: #fff;
  text-align: center;
  display: block;
  transition: all ease-in 0.5s;
}
.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;
  transition: all ease-in 0.5s;
}
@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;
  transition: all ease-in 0.5s;
}
.main-team .wrapper .team-card .content-box .line {
  display: inline-block;
  height: 0.0625rem;
  width: 100%;
  margin: 0.3125rem 0;
  background: #eaecec;
  transition: all ease-in 0.5s;
}

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