Cuerpo
Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 50 de 76.
Desafío
FácilEn este proyecto, construiremos y daremos estilo a un Login Form sencillo. Este proyecto te ayudará a practicar conceptos clave de CSS, incluyendo:
✅ Centrar elementos perfectamente en una página web
✅ Dar estilo a elementos de formulario como entradas y botones
✅ Trabajar con bordes, sombras y espaciado
✅ Permitir espacio para la creatividad en el diseño
Al final del proyecto, tendrás un formulario de inicio de sesión con un buen estilo que se ve moderno y pulido, similar a la imagen de abajo.
Aplica estilos a la etiqueta <body>. Sigue los pasos a continuación:
- Establece el background color a un tono claro de tu elección.
- Usa Flexbox para centrar el formulario tanto horizontal como verticalmente.
- Establece el height de la página a
100vhpara que el formulario permanezca centrado incluso cuando se cambie el tamaño.
Pruébalo tú mismo
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form class="login-form">
<h2>Login</h2>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</body>
</html>
Todas las lecciones de Styling with CSS
4Fundamentos del texto
Color de textoFamilia de fuentesTamaño de fuenteGrosor de fuenteAlineación de textoDecoración de textoDesafío de repaso #1Desafío de repaso #27Modelo de caja - Parte 1
¿Qué es el modelo de caja?PaddingMárgenesBordesAncho y altoDesafío de repaso
3Selectores básicos
Introducción a los selectoresSelector de tipoSelector de claseSelector de IDSelectores de grupoSelector universalDesafío de selección9Flex Box
¿Qué es Flex Box?Flex DirectionJustify ContentAlign ItemsEl centrado perfectoDesafío de Flex Box12Fundamentos de Diseño Responsivo
¿Qué es el Diseño Responsivo?Etiqueta Meta ViewportDiseños FluidosUnidades de ViewportFundamentos de Media QueriesImágenes Flexibles