1
resposta

Faça como eu fiz: Expandindo capmpos no formulário.

Index. Html

<form class="formulario">
    <label for="nome">Nome</label>
    <input id="nome" type="text">

    <label for="email">E-mail</label>
    <input id="email" type="email">

    <div class=campos-numericos>

        <div>
            <label for="telefone">Telefone</label>
            <input id="telefone" type="number">
        </div>

        <div>
            <label for="cep">CEP</label>
            <input id="cep" type="number">
        </div>
    </div>

    <button>Quero participar</button>
</form>

Style . Css

body{
    background-color:#E3F0FF;
    font-family:"Inter";
}

.formulario{
    padding:48px 32px;
    background-color:#FFFFFF;
    border-radius:16px;
}

label{
font-weight:500;
    font-size:18px;
    color:#144480;
}

input{
    border:1px solid #DCDCDC;
    border-radius:8px;
    padding:16px;
    box-shadow:2px 2px 5px rgba(20, 68, 128, 0.1);
    margin-bottom:20px;
}

button{
    font-size:24px;
    font-weight:700;
    padding:16px;
    border-radius:8px;
    border:none;
    background-color:#144480;
    color:#FFFFFF;
}

Campos no Formulário

1 resposta

Oi, Estanislau! Como vai?

Obrigada por compartilhar seu código com a comunidade Alura.

Seu formulário está muito bem estruturado e com uma paleta agradável — o uso de sombras e cantos arredondados traz uma aparência bem bonita.

Continue firme nos estudos.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!