Container do Formulário
Parte da seção Styling with CSS do Journey de HTML da Coddy. Lição 51 de 76.
Desafio
FácilNesta lição, faremos com que o formulário pareça mais estruturado e visualmente atraente.
Siga as etapas abaixo:
- Aplique estilos ao form container para fazê-lo se destacar. Escreva uma regra CSS que tenha como alvo o elemento com a classe
login-form.- Defina uma cor de fundo (branco ou qualquer cor que fique bem).
- Adicione padding para que o conteúdo tenha espaço interno.
- Deixe os cantos arredondados.
- Aplique um box-shadow para criar um efeito de flutuação suave.
- Adicione uma border ao redor do formulário (escolha qualquer cor e espessura).
- Centralize o texto dentro do formulário usando a propriedade
text-align.
Experimente você mesmo
<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 as lições de Styling with CSS
4Fundamentos de Texto
Cor do TextoFamília da FonteTamanho da FontePeso da FonteAlinhamento de TextoDecoração de TextoDesafio de Recapitulação nº 1Desafio de Recapitulação nº 27Modelo de Caixa Parte 1
O que é o Modelo de Caixa?PaddingMargensBordasLargura e AlturaDesafio de Revisão
3Seletores Básicos
Introdução aos SeletoresSeletor de TipoSeletor de ClasseSeletor de IDSeletores de GrupoSeletor UniversalDesafio de Seleção9Flex Box
O que é Flex Box?Flex DirectionJustify ContentAlign ItemsO Centro PerfeitoDesafio de Flex Box12Fundamentos do Design Responsivo
O que é Design Responsivo?Meta Tag ViewportLayouts FluidosUnidades de ViewportFundamentos de Media QueriesImagens FlexíveisPratique por conta própria: Playground de Web