Contêiner do Formulário

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

Desafio

Fácil

Nesta lição, faremos com que o formulário pareça mais estruturado e visualmente atraente.

Siga as etapas abaixo:

Aplique estilos ao contêiner do formulário para destacá-lo. Escreva uma regra CSS que tenha como alvo o elemento com a classe login-form.
1. Defina uma cor de fundo (branca ou qualquer cor que fique boa).
2. Adicione padding para que o conteúdo tenha espaço interno.
3. Arredonde os cantos.
4. Aplique um box-shadow para criar um efeito suave de flutuação.
5. Adicione uma borda 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>