Faça como eu fiz: estrutura e estilização do formulário

Exercício um) Organize a estrutura e centralização do formulário de newsletter utilizando Flexbox

Conteúdo CSS em newsletter.css:

.newsletter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--cor-secundaria-light);
    gap: var(--gap-xl);
    width: 100%;
    padding: var(--padding-4xl) 0;
}

.newsletter > h2 {
    color: var(--cor-primaria-light);
}

.newsletter > p {
    font-size: var(--font-size-xm);
}

.formulario {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-m);
    align-items: center;
}

Exercício dois) Estilize os campos de input e o botão de envio para que estejam alinhados com o design do projeto.

Conteúdo CSS em newsletter.css:

.botao-enviar {
    padding: var(--padding-s) var(--padding-l);
    border: none;
    border-radius: 32rem;
    background-color: var(--cor-primaria-light);
    color: var(--cor-neutra-light);
    cursor: pointer;
    font-size: var(--font-size-xm);
}

.formulario-input {
    padding: var(--padding-s) var(--padding-l);
    border: 1px solid var(--cor-neutra-dark);
    background-color: transparent;
    flex: 1 0 200px;
    border-radius: 2rem;
}

Exercício três) Adicione pseudo-classes para validar os inputs de forma visual, indicando se o campo foi preenchido corretamente ou não.

Conteúdo CSS em newsletter.css:

.formulario-input:user-valid {
    border: 2px solid var(--cor-terciaria-dark);
}

.formulario-input:user-invalid {
    border: 2px solid var(--cor-primaria-dark);
}

Exercício quatro) Personalize os checkboxes para que fiquem visualmente consistentes com o restante do design.

.grupo-opcoes {
    display: flex;
    align-items: center;
    gap: var(--gap-s);
    flex-wrap: wrap;
}

.opcao {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    padding-left: var(--padding-xl);
}

.opcao input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.opcao input[type="checkbox"] + span {
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    border: 1px solid var(--cor-neutra-dark);
    background-color: transparent;
    border-radius: 0.25rem;
}

.opcao input[type="checkbox"]:checked + span {
    background-color: var(--cor-primaria-light);
}