Maquetación de Pantalla de Login en HTML y CSS

Construir una pantalla de login funcional y atractiva requiere dominar la estructura HTML y los estilos CSS de cada elemento: formularios, inputs, botones primarios y secundarios, y enlaces. Aquí se detalla paso a paso cómo lograrlo reutilizando código previo y aplicando buenas prácticas de maquetación.

¿Cómo estructurar el HTML de una pantalla de login?

El punto de partida es reutilizar la estructura de una maquetación previa similar, en este caso la pantalla de recuperación de contraseña [00:47]. Se copian los elementos base y se adaptan según lo que requiere el diseño de login:

• Un logo en la parte superior.
• Un formulario con dos campos: email y password.
• Un botón primario para enviar el formulario.
• Un enlace de tipo "forgot my password".
• Un botón secundario fuera del formulario.

El formulario contiene un label y un input para el correo electrónico. El input se configura con type="text", un id="email" y un placeholder descriptivo como platy@example.com [01:30]. Para la contraseña, se mantiene type="password" con asteriscos como placeholder y las clases correspondientes.

¿Qué diferencia hay entre el botón primario y el secundario?

El botón de login es el primary button, ubicado dentro del <form>, y funciona como submit [02:23]. El botón de Sign up, en cambio, se coloca fuera del formulario porque no pertenece a esa acción. Se le asignan las clases secondary y button para diferenciarlo visualmente [02:37].

¿Cómo se agrega el enlace "forgot my password"?

Se utiliza una etiqueta <a> con un href que redirige a la pantalla correspondiente [02:17]. Este anchor se ubica entre el botón primario y el botón secundario, creando una jerarquía visual clara dentro del formulario.

¿Cómo estilizar el enlace y el botón secundario con CSS?

Para el anchor dentro del formulario se aplican estas propiedades [03:30]:

• color: se usa la variable Hospital Green (el verde del diseño).
• font-size: el tamaño más pequeño, equivalente a SM.
• text-align: center: para centrar el texto.
• text-decoration: none: elimina el subrayado predeterminado.
• margin-bottom: 54px: genera separación respecto al botón secundario.

Para el botón secundario se parte de los estilos del primary button y se invierten los colores [04:42]:

• background: cambia de verde a blanco.
• border: ya no es none, sino 1px solid con el color Hospital Green.
• color: el texto pasa de blanco a verde.
• Se mantienen border-radius, width, cursor: pointer, font-size en MD, font-weight: bold y height.

Un detalle importante: si el botón no aparece al recargar, hay que verificar que el nombre de la clase en el CSS coincida exactamente con el del HTML [05:28]. Un error de escritura es la causa más común.

¿Cómo separar los inputs con margin?

Para evitar que el campo de email y el de password queden demasiado juntos, se agrega al selector input.email un margin-bottom: 22px [04:18]. Este pequeño ajuste mejora significativamente la legibilidad del formulario.

¿Qué consideraciones de responsive aplican al login?

El diseño en mobile muestra el logo en la parte superior y el botón secundario (Sign up) posicionado en la parte inferior de la pantalla [05:47]. En desktop, el logo desaparece y el botón secundario se mantiene en su posición natural, justo debajo del enlace.

El reto propuesto consiste en usar media queries o técnicas de posicionamiento para que el botón secundario quede fijo en la parte inferior en mobile, pero mantenga su flujo normal en desktop [06:03]. Este ejercicio refuerza el concepto de responsive design: adaptar la disposición de los elementos según el tamaño de la pantalla sin duplicar código HTML.

Con esta pantalla terminada, el siguiente paso es construir la vista de creación de cuenta. ¿Cómo resolverías el reto del posicionamiento del botón secundario en mobile? Comparte tu solución.