1
resposta

[Sugestão] Tentativa de escrever o código antes de assistir o vídeo.

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Integrando o Carrossel com SwiperJS e atividade Contato e footer

por Lorenzo de Abreu Martins Ribeiro
| 176.3k xp | 40 posts

index.html

<!--código anterior-->
    <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>
        <input type="search" class="contato__pesquisa" placeholder="Cadastre seu e-mail">
    </section>
<!--código posterior-->

contato.css

.contato{
    background: var(--branco);
    padding: 1em;
}

.contato__titulo{
    font-size: 18px;
    font-weight: 500;
    color: var(--azul-degrade);
}

.contato__texto{
    font-weight: 300;
    color: var(--azul-degrade);
    margin: 1em 0;
}

.contato__pesquisa{
    color: var(--azul-degrade);
    border-radius: 1.5em;
    padding: 1em;
    width: 100%;
}

.contato__pesquisa::placeholder{
    font-family: var(--fonte-principal);
    border: 1px solid var(--azul-degrade);
    font-weight: 400;
    text-align: center;
    color:var(--azul-degrade);
    background: url("../img/Email.svg") no-repeat;
    background-position: 3em;
}
1 resposta
por Lorena Garcia
| 11909.9k xp | 17866 posts
Alura Scuba Team

Oii, Lorenzo!

Que legal que você tá tentando escrever o código antes de assistir ao vídeo! Isso é uma ótima prática para reforçar o aprendizado. Vamos dar uma olhada no seu código.

Seu HTML está bem organizado, mas percebi que você usou input type="search" em vez de input type="email". Para seguir a especificação da aula, seria interessante ajustar isso. Vou mostrar como ficaria a seção de contato com essa alteração:

<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>
    <input type="email" class="contato__pesquisa" placeholder="Cadastre seu e-mail">
</section>

Parabéns por praticar! Continue firme nos estudos.

Um abraço.