Contenedor del formulario
Parte de la sección Styling with CSS del Journey de HTML de Coddy. Lección 51 de 76.
Desafío
FácilEn esta lección haremos que el formulario se vea más estructurado y visualmente atractivo.
Sigue los pasos a continuación:
- Aplica estilos al contenedor del formulario para que resalte. Escribe una regla CSS que apunte al elemento con la clase
login-form.- Establece un color de fondo (blanco o cualquier color que se vea bien).
- Agrega padding para que el contenido tenga espacio interior.
- Haz que las esquinas sean redondeadas.
- Aplica un box-shadow para crear un efecto de flotado suave.
- Agrega un border alrededor del formulario (elige cualquier color y grosor).
- Centra el texto dentro del formulario usando la propiedad
text-align.
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 FlexiblesPractica por tu cuenta: Playground de Web