1
resposta

Botão de cadastrar email!

Olá PessoALL!

Notei que no protótipo não existe um botão, apenas um campo para botar o e-mail. Mas isso é intuitivo ao usuário? Então fiz as seguintes alterações:

No index.html, na seção de contato, criei uma div com a classe "divisao", e dentro dela coloquei o input visto na aula e uma ancora com o texto "cadastre-se"

 <section class="contato">
        <h2 class="contato__titulo">Fique por dentro das novidades!</h2>
        <p class="contato__texto">Atualizações de e-books, novos livros, promoções e outros.</p>
        <div class="divisao">
            <input type="email" placeholder="Cadastre seu e-mail" class="contato__email">
            <a href="#" class="botao__email">Cadastre-se</a>
        </div>
    </section>

Na página de contato.css, adicionei a estilização das classes divisao e .botao__email:

.divisao{
    display: flex;
    justify-content: space-between;
    gap: 2%;
}

.botao__email{
    padding: 1em;
    border: 1px solid var(--azul);
    border-radius: 24px;
    width: 25%;
    color: var(--branco);
    text-decoration: none;
    align-items: center;
    justify-content: center;
    background-color: var(--azul);
    font-size: 15px;
}

Nota-se que a estilização de .contato_email sofre uma alteração no campo de width, onde seu valor muda para 60%:

.contato__email{
    padding: 1em;
    border: 1px solid var(--azul);
    border-radius: 24px;
    width: 60%;
    color: var(--azul);
}

Desta maneira, é incluido um botão para o envio do email.

Botão

1 resposta

Oii Mateus, tudo bem?

Muito obrigada por compartilhar com a gente a sua sugestão! Ficou muito boa :D

Lembre-se de que, além de compartilhar aqui no fórum, você também pode marcar a Alura nas redes sociais para que mais pessoas possam ver seu trabalho.

A Alura tem perfis em várias redes sociais, você pode encontrá-los aqui. E não se esqueça do nosso Discord de alunos da Alura.

Um abraço e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software