---

<!DOCTYPE html>
<html>
  <head>
    <title>МемоКарточки</title>
    <style>
      .card {
        width: 300px;
        height: 300px;
        border-radius: 15px;
        perspective: 1000px;
        overflow: hidden;
      }

      .card-inner {
        width: 100%;
        height: 100%;
        position: relative;
        transition: transform 0.6s;
        transform-style: preserve-3d;
      }

      .card:hover .card-inner {
        transform: rotateY(180deg);
      }

      .card-front, .card-back {
        width: 100%;
        height: 100%;
        background-color: DodgerBlue;
        position: absolute;
        backface-visibility: hidden;
      }

      .card-front img {
        width: 100%;
        height: 100%;
        border-radius: 15px;
      }

      .card-back {
        font-family: 'Arial', sans-serif;
        font-size: 24px;
        text-align: center;
        color: White;
        transform: rotateY(180deg);
      }
    </style>
  </head>
  <body>
    <div class="card">
      <div class="card-inner">
        <div class="card-front">
          <img src="https://avatars.mds.yandex.net/get-schoolbook-images/5519467/797716fe194986805138f8502e73bea3/orig">
        </div>
        <div class="card-back">
          <h1>Cat</h1>
          <p>Кошка</p>
        </div>
      </div>
    </div>
  </body>
</html>