Construir interfaces reutilizando código previo es una de las mejores prácticas para mantener proyectos organizados y eficientes. En esta sesión se desarrolla paso a paso la pantalla que confirma el envío de un email, aplicando técnicas de maquetación con HTML y CSS que aprovechan estilos ya definidos en clases anteriores.
¿Cómo reutilizar estructuras HTML de pantallas anteriores?
El punto de partida consiste en crear un nuevo archivo llamado clase2.html y copiar la estructura base de la pantalla construida previamente [0:42]. No todo el código se necesita: elementos como el input y el form se eliminan porque esta pantalla no requiere un formulario.
Sin embargo, el form container se conserva [1:15]. Este contenedor cumple la función de centrar todo el contenido en pantalla, algo esencial tanto en la vista mobile como en desktop. La diferencia principal entre ambas vistas radica en el logo, tal como ocurría en la pantalla anterior.
Los elementos que se mantienen son:
- El logo en la parte superior.
- El título y el subtítulo con textos actualizados.
- La clase
primary-button para el botón.
¿Qué elementos nuevos necesita la pantalla de email enviado?
Se agregan tres componentes que no existían antes [1:42]:
¿Cómo crear el ícono circular de email?
Se crea un div con la clase email-image que contiene una imagen del ícono de email. Para lograr la forma circular se aplican width y height iguales junto con border-radius: 50% [4:12]. El fondo utiliza la variable de color del input field para obtener un gris suave.
Para centrar el ícono dentro del círculo se usa display: flex, justify-content: center y align-items: center [4:38]. Además, la imagen interior se reduce a ochenta píxeles de ancho para que no se vea desproporcionada.
css
.email-image {
width: 100px;
height: 100px;
border-radius: 50%;
background: var(--input-field);
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 24px;
}
.email-image img {
width: 80px;
}
¿Cómo estructurar el botón y el texto inferior?
El botón utiliza las clases primary-button y login-button [3:08]. La segunda clase se agrega pensando en reutilización futura. Su texto simplemente dice "Login".
Debajo del botón se coloca un párrafo con la clase recent que contiene dos elementos hijos [3:30]:
- Un
span con el texto "Didn't receive the email?".
- Un
a (anchor) con el texto "Resend" que funciona como enlace.
html
<p class="recent">
<span>Didn't receive the email?</span>
<a href="#">Resend</a>
</p>
¿Cómo estilizar el texto con variables CSS y quitar decoraciones?
La clase recent recibe un font-size que utiliza la variable más pequeña disponible (dsm) [5:22]. Los estilos de los hijos se definen desde el elemento padre:
- El
span toma un color a través de la variable very-light-pink.
- El
a usa la variable de color verde (hospital) y se le aplica text-decoration: none para eliminar el subrayado predeterminado de los enlaces [5:58].
css
.recent {
font-size: var(--dsm);
}
.recent span {
color: var(--very-light-pink);
}
.recent a {
color: var(--hospital);
text-decoration: none;
}
Para centrar verticalmente todo el contenido se ajusta el form-container con align-items: center en lugar de justify-content: center [6:38]. Este detalle es importante: justify-content controla el eje principal y align-items el eje transversal dentro de un contenedor flex.
¿Qué revisar al validar el diseño responsive?
Al abrir el inspector del navegador y activar el modo responsive [7:12], pueden aparecer problemas de scroll o desplazamiento lateral. En este caso, verificar que el zoom del navegador esté al cien por ciento resulta clave para evitar falsos positivos. También conviene revisar que propiedades como width: 100% en el contenedor principal no provoquen desbordamientos inesperados en pantallas pequeñas [7:50].
Con estos ajustes la pantalla queda completamente funcional en ambas resoluciones. ¿Has tenido problemas similares con el zoom del navegador al probar tus diseños? Comparte tu experiencia en los comentarios.
