Corpo
Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 50 de 76.
Desafio
FácilNeste projeto, vamos construir e estilizar um Login Form 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 inputs e botões
✅ Trabalhar com bordas, sombras e espaçamento
✅ Permitir espaço para criatividade no design
Ao final do projeto, você terá um formulário de login bem estilizado com aparência moderna e polida, semelhante à imagem abaixo.
Aplique estilos à tag <body>. Siga os passos abaixo:
- Defina a background color para um tom claro de sua escolha.
- Use Flexbox para centralizar o formulário tanto horizontalmente quanto verticalmente.
- Defina a height da página para
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 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íveis