<section class="team-area">
        <div class="container">
            <h3 class="section-heading">EKİBİMİZ</h3>
            <div class="row">

                <!--Şef-->
                <div class="col-sm-6 col-md-4">
                    <div class="team-single">
                        <div class="content-area">
                            <div class="side-one">
                                <div class="card">
                                    <div class="card-body text-center">
                                        <div class="img-area">
                                            <img src="https://bit.ly/2QrilGY" class="card-img-top" alt="şef">
                                        </div>
                                        <h4 class="mt-3">Ercüment Akıncılar</h4>                                        
                                        <p>Şef</p>
                                    </div>
                                </div>
                            </div>
                          <div class="side-two">
                                <div class="card">
                                    <div class="card-body text-center mt-4">
                                        <h4>Ercüment Akıncılar</h4>
                                        <p class="my-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda mollitia
                                            doloribus labore, numquam laudantium et.</p>
                                        <ul class="list-inline">
                                            <li class="list-inline-item">
                                                <a href="#" class="social-icon" target="_blank">
                                                    <i class="fab fa-linkedin"></i>
                                                </a>
                                            </li>
                                            <li class="list-inline-item">
                                                <a href="#" class="social-icon" target="_blank">
                                                    <i class="fab fa-facebook-square"></i>
                                                </a>
                                            </li>
                                            <li class="list-inline-item">
                                                <a href="#" class="social-icon" target="_blank">
                                                    <i class="fab fa-youtube"></i>
                                                </a>
                                            </li>
                                            <li class="list-inline-item">
                                                <a href="#" class="social-icon" target="_blank">
                                                    <i class="fab fa-instagram"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                          </div>
                      </div>
                  </div>             
          
                <!--Uzman-->
                <div class="col-sm-6 col-md-4">
                    <div class="team-single">
                        <div class="content-area">
                            <div class="side-one">
                                <div class="card">
                                    <div class="card-body text-center">
                                        <div class="img-area">
                                            <img src="https://bit.ly/31r21MH" class="card-img-top" alt="uzman">
                                        </div>
                                        <h4 class="mt-3">Adem Ayvacık</h4>
                                        <p>Uzman</p>

                                    </div>
                                </div>
                            </div>
                            <div class="side-two">
                                <div class="card">
                                    <div class="card-body text-center mt-4">
                                        <h4>Adem Ayvacık</h4>
                                        <p class="my-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda mollitia
                                            doloribus labore, numquam laudantium et.</p>
                                        <ul class="list-inline">
                                            <li class="list-inline-item">
                                                <a href="#" class="social-icon" target="_blank">
                                                    <i class="fab fa-linkedin"></i>
                                                </a>
                                            </li>
                                            <li class="list-inline-item">
                                                <a href="#" class="social-icon" target="_blank">
                                                    <i class="fab fa-facebook-square"></i>
                                                </a>
                                            </li>
                                            <li class="list-inline-item">
                                                <a href="#" class="social-icon" target="_blank">
                                                    <i class="fab fa-youtube"></i>
                                                </a>
                                            </li>
                                            <li class="list-inline-item">
                                                <a href="#" class="social-icon" target="_blank">
                                                    <i class="fab fa-instagram"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--Uzman Yardımcısı-->
                <div class="col-sm-6 col-md-4">
                    <div class="team-single">
                        <div class="content-area">
                            <div class="side-one">
                                <div class="card">
                                    <div class="card-body text-center">
                                        <div class="img-area">
                                            <img src="https://bit.ly/3jjVSbj" class="card-img-top" alt="uzman">
                                        </div>
                                        <h4 class="mt-3">Yüksel Balcı</h4>
                                        <p>Uzman Yardımcısı</p>

                                    </div>
                                </div>
                            </div>
                            <div class="side-two">
                                <div class="card">
                                    <div class="card-body text-center mt-4">
                                        <h4>Yüksel Balcı</h4>
                                        <p class="my-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda mollitia
                                            doloribus labore, numquam laudantium et.</p>
                                        <ul class="list-inline">
                                            <li class="list-inline-item">
                                                <a href="#" class="social-icon" target="_blank">
                                                    <i class="fab fa-linkedin"></i>
                                                </a>
                                            </li>
                                            <li class="list-inline-item">
                                                <a href="#" class="social-icon" target="_blank">
                                                    <i class="fab fa-facebook-square"></i>
                                                </a>
                                            </li>
                                            <li class="list-inline-item">
                                                <a href="#" class="social-icon" target="_blank">
                                                    <i class="fab fa-youtube"></i>
                                                </a>
                                            </li>
                                            <li class="list-inline-item">
                                                <a href="#" class="social-icon" target="_blank">
                                                    <i class="fab fa-instagram"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
              
           </div>
        </div>
 </section>
/* Arka plan rengini değiştirme */
body{
    background: #262626;
}

/* Kartlara üstten ve alttan padding verme */
.team-area{
    padding: 60px 0;
}

/* EKİBİMİZ adlı başlığın stilini düzenleme */
.section-heading{
    text-align: center;
    color: #fff;
    margin-bottom: 50px;    
    font-size: 65px;
    font-family: 'Righteous', cursive;
    letter-spacing: 5px;
}

/* Profil resimlerinin stilini düzenleme */
.img-area{
    width: 150px;
    height: 150px;
    display: inline-block;
    overflow: hidden;
    border-radius: 50%;
}

/* Kartın ön yüzü üzerinde gezindiğimizde arka yüzünün gösterilmesi */
.team-single:hover .side-two{
    transform: rotateY(0deg);
    border-radius: 5px;
}

.team-single:hover .side-one{
    transform: rotateY(180deg);
}

.content-area{
    transform: perspective(1000px);
    transition: 1s;
    transform-style: preserve-3d;
    position: relative;
}

.side-one{
    position: relative;
    transform: rotateY(0deg);
    z-index: 2;
    margin-bottom: 30px;
}

.side-two{
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    transform: rotateY(-180deg);
}

.side-one, .side-two{
    backface-visibility: hidden;
    transition: 1s;
    transform-style: preserve-3d;
}

.side-one .card, .side-two .card{
    min-height: 312px;
}

/* Sosyal Medya Linklerinin stilini düzenleme */
.side-two .card a{
    font-size: 18px;
    color: maroon;
}

/* Kartın ön ve arka yüzünde bulunan yazıların stilini düzenleme */
h4{
    color: maroon;
    font-family: 'Righteous', cursive;    
    font-size: 25px;
}

p{
    font-family: 'Lobster', cursive;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.2.0/js/fontawesome-iconpicker.min.js