Menu
Coddy logo textTech

Corpo

Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 50 de 76.

challenge icon

Desafio

Fácil

Neste 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:

  1. Defina a cor de fundo como um tom claro de sua escolha.
  2. Use o Flexbox para centralizar o formulário horizontal e verticalmente.
  3. Defina a altura da página como 100vh para 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

Pratique por conta própria: Playground de Web