Dar vida a una estructura HTML mediante estilos CSS es donde realmente un proyecto cobra forma. Aquí se aplican técnicas de CSS Grid, Flexbox, variables CSS y media queries para transformar una pantalla de creación de contraseña en un diseño limpio, centrado y adaptable a cualquier dispositivo.
¿Cómo centrar elementos con CSS Grid y place-items?
El primer paso es preparar el contenedor principal. Se le asigna un width del 100% y un height de 100vh [01:00] para que ocupe toda la ventana del navegador. En el body, se elimina el margen por defecto con margin: 0.
Aquí aparece un truco poderoso: usar display: grid junto con la propiedad place-items: center [01:36]. Esta combinación centra el contenido tanto vertical como horizontalmente con apenas dos líneas de código. Si bien esto también se puede lograr con Flexbox, place-items lo resuelve de forma más directa y concisa.
Para organizar el formulario internamente, se define grid-template-rows con tres filas [02:20]:
auto para la sección del título y subtítulo, que toma el tamaño que necesite.1fr para el área de los inputs, ocupando una fracción del espacio disponible.auto para el botón inferior.
El ancho del contenedor se fija en 300px para adaptarse a pantallas pequeñas.
¿Cómo estilizar tipografía, inputs y botones con variables CSS?
Las variables CSS permiten mantener consistencia en todo el proyecto. Se definen tamaños tipográficos reutilizables [06:12]:
--sm: 14px para textos pequeños como labels.--md: 16px para textos medianos.--lg: 18px para títulos.
Para utilizar estas variables se emplea la función var(), por ejemplo font-size: var(--lg) en el título principal [06:38]. El subtítulo recibe un color más claro usando la variable de diseño very light pink, un font-weight: 300 para letra delgada y un margin-bottom: 32px para separarlo de los campos del formulario [07:20].
¿Qué propiedades se aplican a labels e inputs?
Los labels llevan font-size: var(--sm), font-weight: bold y un margin-bottom: 4px [08:08], siguiendo la guía de espaciado con múltiplos de cuatro.
Los inputs se estilizan con varias propiedades [08:30]:
background-color usando la variable del diseño para el campo de texto.border: none para eliminar el borde por defecto.- Border-radius de 8px para esquinas redondeadas.
height: 32px y padding: 6px para dar espacio interno al texto.
Para apilar labels e inputs verticalmente, el form recibe display: flex con flex-direction: column [09:40], cambiando la dirección del eje principal de horizontal a vertical.
¿Cómo se construye el botón principal?
El primary button utiliza el color verde de la variable Hospital como background-color [10:20]. Se le aplican:
border: none y border-radius: 8px.color: white para el texto.width: 100% para ocupar todo el ancho disponible.- Cursor pointer para que el mouse muestre la manita al pasar sobre él.
font-size: var(--md) y font-weight: bold.height: 50px para un tamaño cómodo al tacto.
Se agrega margin-top: 14px y margin-bottom: 30px al contenedor del botón para generar separación visual respecto a los inputs [11:58].
¿Cómo hacer responsive con media queries y display none?
El logo se oculta en escritorio con display: none [05:28] y se muestra en móvil mediante una media query. Se utiliza @media (max-width: 640px) [12:50] en lugar de min-width porque todos los estilos escritos arriba aplican para pantallas grandes; la media query solo modifica lo necesario para dispositivos pequeños.
Dentro de esa regla, al logo se le asigna display: block [13:22] para que vuelva a ser visible. Al redimensionar el navegador más allá de 640px, el logo desaparece automáticamente, logrando una experiencia adaptada a cada formato.
Con estas técnicas de CSS Grid, variables y media queries, la pantalla de creación de contraseña queda funcional y fiel al diseño. ¿Qué ajustes harías tú en los espaciados o colores? Comparte tu versión en los comentarios.
