<!-- team member -->
    <div class="col-lg-4 col-sm-6 mb-5 mb-lg-0">
        <div class="team-member text-center">
            <div class="team-member-img position-relative mb-5">
                <img class="img-fluid w-100" src="../images/" alt="team-member">
                <div class="hover-icon py-4">
                    <ul class="list-inline social-icon">
                        <li class="list-inline-item">
                            <a href="#" class="hover-ripple ripple-white"><i class="fa fa-facebook"></i></a>
                        </li>
                        <li class="list-inline-item">
                            <a href="#" class="hover-ripple ripple-white"><i class="fa fa-twitter"></i></a>
                        </li>
                        <li class="list-inline-item">
                            <a href="#" class="hover-ripple ripple-white"><i class="fa fa-linkedin"></i></a>
                        </li>
                        <li class="list-inline-item">
                            <a href="#" class="hover-ripple ripple-white"><i class="fa fa-pinterest"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <a href="#">
                <h4>name</h4>
            </a>
            <span>designation</span>
        </div>
    </div>

                                

How to Use

Just Copy the code. Don't remove the classnames. Use your own class for customization