Hi, Firstly - what version of MDB are you using? If you are using 4.5 then that code should work fine (there are a few styling issues). I can see what you mean with the code being incorrect. You can also find the code here: https://mdbootstrap.com/sections/team-sections/ (version 4) Code should look like this:

<!--Rotating card-->
 <div class="card-wrapper">
 <div id="card-1" class="card-rotating effect__click text-center w-100 h-100">

<!--Front Side-->
 <div class="face front">

<!-- Image-->
 <div class="card-up">
 <img src="https://mdbootstrap.com/img/Photos/Others/images/19.jpg" alt="Team member card image">
 </div>

<!--Avatar-->
 <div class="avatar mx-auto white">
 <img src="https://mdbootstrap.com/img/Photos/Avatars/img (10).jpg" class="rounded-circle img-fluid" alt="First sample avatar image">
 </div>

<!--Content-->
 <div class="card-body">
 <h4 class="mt-1">Maria Kate</h4>
 <p class="font-weight-bold dark-grey-text">Photographer</p>
 <!--Triggering button-->
 <a class="rotate-btn grey-text" data-card="card-1">
 <i class="fa fa-repeat grey-text"></i> Click here to rotate</a>
 </div>

</div>
 <!--Front Side-->

<!--Back Side-->
 <div class="face back">

<!--Content-->
 <div class="card-body">

<!--Content-->
 <h4 class="font-weight-bold mt-4 mb-2">
 <strong>About me</strong>
 </h4>
 <hr>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis
 rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum
 eum, officia laudantium quaerat?
 </p>
 <hr>
 <!--Social Icons-->
 <ul class="list-inline list-unstyled">
 <li class="list-inline-item">
 <a class="icons-sm fb-ic">
 <i class="fa fa-facebook"></i>
 </a>
 </li>
 <li class="list-inline-item">
 <a class="icons-sm pin-ic">
 <i class="fa fa-pinterest"> </i>
 </a>
 </li>
 <li class="list-inline-item">
 <a class="icons-sm ins-ic">
 <i class="fa fa-instagram"> </i>
 </a>
 </li>
 <li class="list-inline-item">
 <a class="icons-sm tw-ic">
 <i class="fa fa-twitter"> </i>
 </a>
 </li>
 </ul>
 <!--Triggering button-->
 <a class="rotate-btn grey-text" data-card="card-1">
 <i class="fa fa-repeat grey-text"></i> Click here to rotate back</a>

</div>
 
 </div>
 <!--Back Side-->

</div>
 </div>
 <!--Rotating card-->

If you are using anything below 4.5 use this url: https://mdbootstrap.com/legacy/jquery/4.4.5/?page=sections/team since they did some major code enhancements.

---