Corpo
Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 50 de 76.
Desafio
FácilNeste projeto, vamos criar e estilizar um Formulário de Login simples. Este projeto ajudará você a praticar conceitos fundamentais de CSS, incluindo:
✅ Centralizar elementos perfeitamente em uma página da web
✅ Estilizar elementos de formulário, como campos de entrada e botões
✅ Trabalhar com bordas, sombras e espaçamento
✅ Deixar espaço para a criatividade no design
Ao final do projeto, você terá um formulário de login bem estilizado, com uma aparência moderna e refinada, semelhante à imagem abaixo.

Aplique estilos à tag <body>. Siga as etapas abaixo:
- Defina a cor de fundo como um tom claro de sua escolha.
- Use o Flexbox para centralizar o formulário horizontal e verticalmente.
- Defina a altura da página como
100vhpara que o formulário permaneça centralizado mesmo quando redimensionado.
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 Estilização com CSS
4Fundamentos de Texto
Cor do TextoFamília da FonteTamanho da FontePeso da FonteAlinhamento do TextoDecoração do TextoDesafio de Revisão nº 1Desafio de Revisão nº 27Modelo de Caixa — Parte 1
O que é o Modelo de Caixa?PreenchimentoMargensBordasLargura e AlturaDesafio de Revisão8Modelo de Caixa — Parte 2
Dimensionamento da CaixaRaio da BordaTransbordamentoSombra da CaixaDesafio de Revisão3Seletores Básicos
Introdução aos SeletoresSeletor de TipoSeletor de ClasseSeletor de IDSeletores de GrupoSeletor UniversalDesafio de Seleção9Flex Box
O que é uma Flex Box?Direção da Flex BoxJustificar conteúdoAlinhar itensO centro perfeitoDesafio da Flex Box12Fundamentos do Design Responsivo
O que é Design Responsivo?Meta tag viewportLayouts fluidosUnidades de viewportFundamentos das Media QueriesImagens flexíveisPratique por conta própria: Playground de Web