Esta es la primera clase de seis, en las que maquetaremos de manera responsiva las pantallas de autenticación. Comenzaremos creando la estructura HTML de la vista, “crear nueva contraseña”.

Cómo generar el formulario

Colocaremos la información del formulario dentro de dos div para conseguir la visual de la imagen superior.Implementaremos las siguientes etiquetas:

Si deseas repasar alguno de estos conceptos, recuerda que el curso definitivo de HTML y CSS tiene un módulo completo sobre este tema.

Así quedaría nuestro body en HTML

<div class="Login">
  <div class="form-container">
    <img src="" alt="logo" class="logo" />
    <h1 class="title">Create a new password</h1>
    <p class="subtitle">Enter a new password for your account</p>

    <form action="/" class="form">
      <label for="password" class="label">Password</label>
      <input
        type="password"
        class="input input-password"
        id="password"
        placeholder="*********"
      />

      <label for="new-password" class="label">Re-enter password</label>
      <input
        type="password"
        class="input input-password"
        id="new-password"
        placeholder="*********"
      />

      <input
        type="submit"
        value="Confirm"
        class="primary-button login-button"
      />
    </form>
  </div>

También te puede interesar