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”.
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.
<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>