index.html

<div class="checkout">
  <div class="credit-card-box">
    <div class="flip">
      <!-- Front of the Card -->
      <div class="front">
        <div class="chip"></div>
        <div class="logo">
          <svg version="1.1" id="visa" xmlns="http://www.w3.org/2000/svg" width="47.834px" height="47.834px" viewBox="0 0 47.834 47.834">
            <!-- SVG content -->
          </svg>
        </div>
        <div class="number">XXXX XXXX XXXX XXXX</div>
        <div class="card-holder">
          <label for="card-holder">Card holder</label>
          <div id="display-card-holder">John Doe</div>
        </div>
        <div class="card-expiration-date">
          <label for="card-expiration-month">Expires</label>
          <div id="display-expiration">MM/YY</div>
        </div>
      </div>

      <!-- Back of the Card -->
      <div class="back">
        <div class="strip"></div>
        <div class="ccv">
          <label for="ccv">CCV</label>
          <div id="display-ccv">XXX</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Form for card details -->
  <form class="form" autocomplete="off" novalidate>
    <fieldset>
      <label for="card-number">Card Number</label>
      <input type="text" id="card-number" class="input-cart-number" maxlength="4" placeholder="XXXX" />
      <input type="text" id="card-number-1" class="input-cart-number" maxlength="4" placeholder="XXXX" />
      <input type="text" id="card-number-2" class="input-cart-number" maxlength="4" placeholder="XXXX" />
      <input type="text" id="card-number-3" class="input-cart-number" maxlength="4" placeholder="XXXX" />
    </fieldset>

    <fieldset>
      <label for="card-holder">Card holder</label>
      <input type="text" id="card-holder" placeholder="Card Holder Name" required />
    </fieldset>

    <fieldset class="fieldset-expiration">
      <label for="card-expiration-month">Expiration date</label>
      <div class="select">
        <select id="card-expiration-month" required>
          <option value="" disabled selected>MM</option>
          <option value="01">01</option>
          <option value="02">02</option>
          <option value="03">03</option>
          <option value="04">04</option>
          <option value="05">05</option>
          <option value="06">06</option>
          <option value="07">07</option>
          <option value="08">08</option>
          <option value="09">09</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
        </select>

        <select id="card-expiration-year" required>
          <option value="" disabled selected>YY</option>
          <option value="23">2023</option>
          <option value="24">2024</option>
          <option value="25">2025</option>
        </select>
      </div>
    </fieldset>

    <fieldset>
      <label for="ccv">CCV</label>
      <input type="text" id="ccv" maxlength="3" placeholder="XXX" required />
    </fieldset>

    <button type="submit" class="submit-button">Submit Payment</button>
  </form>
</div>