Menu
CoddyTech

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 vai ajudar você a praticar conceitos importantes 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 aparência moderna e refinada, semelhante à imagem abaixo.

Aplique estilos à tag <body>. Siga as etapas abaixo:

  1. Defina a cor de fundo com um tom claro de sua preferência.
  2. Use Flexbox para centralizar o formulário tanto horizontal quanto verticalmente.
  3. Defina a altura da página como 100vh para que o formulário permaneça centralizado mesmo quando a página for redimensionada.

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