src/index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Gaming Hub</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Bitter:ital,wght@1,700&family=Questrial&display=swap"
    rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>

<body>
  <header class='header-pages'>
    <section class='logo'>
      <img src="./images/bx-category-alt.svg" alt="logo-gaming">
      <h2>Game Hub</h2>
    </section>
    <nav id="menu">
      <a id="linkStart">INICIO</a>
      <a href="https://lan.leagueoflegends.com/es-mx/"> SEGUIR COMPRANDO</a>
    </nav>
  </header>

  <!-- Página de inicio y resumen de la herramienta -->
  <section class="pageN" id="inicio" >
    <section class="contentPageN" id="contentInicio">
      <div class='title-validate'>
        <h2> COMPRAS GAME HUB </h2>
      </div>
      <p class='info-text'>Aquí validaremos tu tarjeta de crédito para continuar con la compra</p>
      <button class='button' id='btn-validate-page'>
        CONTINUAR
      </button>
    </section>
  </section>


  <!-- Página para ingresar datos de validación de la tarjeta -->
  <section id='validationPage' class='pageN' hidden>
    <section class='content-page-validation'>
      <div class='title-validate'>
        <p>VALIDA TU TARJETA DE</p>
        <h2>CRÉDITO</h2>
      </div>
      <div class='card'>
        <div class='images-card'>
          <img class='img-lol' src="./images/chibiLol.png" alt="chibi-lol">
          <img class='img-visa' src="./images/visa-logo.png" alt="visa-logo">
        </div>
        <div>
          <h3 id="card-number"> •••• •••• •••• ••••</h3>
        </div>
      </div>
      <input id="input-number" type="number" placeholder="Escribe aquí tú número de tarjeta">
      <p id='warning-msj'></p>
      <button id='validate' class='button'> VALIDAR
      </button>
    </section>
    <!-- <footer>
      <p class='info-text'> No almacenamos datos sobre tu tarjeta de crédito</p>
    </footer> -->
  </section>

  <!-- Página para mostrar resultados de la validación de la tarjeta -->
  <section id='resultValidatePage' class='pageN' hidden>
    <section class='content-page-validation'>
      <div class='title-validate'>
        <p>VALIDA TU TARJETA DE</p>
        <h2>CRÉDITO</h2>
      </div>
      <div class='card'>
        <div class='images-card'>
          <img class='img-lol' src="./images/chibiLol.png" alt="chibi-lol">
          <img class='img-visa' src="./images/visa-logo.png" alt="visa-logo">
        </div>
        <div >
          <p id='msj-validate'> </p>
          <h3 id="card-number-result"> </h3>
        </div>
      </div>
      <button id='validate-other' class='button'> VALIDAR OTRA
      </button>
    </section>
  </section>

  <script src="index.js" type="module"></script>
</body>

</html>