Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
10
respostas

[Dúvida] Texto placeholder não aparece

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

por GUSTAVO RIBEIRO BRUNES
| 20.1k xp | 15 posts
    <section class="contato">
        <h2 class="contato__titulo">Fique por dentro das novidades!</h2>
        <p class="contato__texto">Atualizados de e-books, novos livros, promoções e outros</p>
        <input type="email" placeholder="Cadastre seu e-mail" class="contato__email">
    </section>

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

.contato__titulo,
.contato__texto{
    background: var(--azul-degrade);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.contato__titulo{
    font-size: 18px;
    font-weight: 500;
}

.contato__texto{
    font-weight: 300;
    margin: 1em 0;
}

.contato__email{   
    background-position-y: center;

}
10 respostas
por Victor Costa Santos
| 2063.4k xp | 4021 posts
Alura Scuba Team Monitor do suporte educacional

Olá Gustavo! Tudo bem?

Fiz alguns teste somente com base no código postado por ti, e não obtive erro algum acredito que há outras class interferindo no comportamento do placeholder, por conta disso peço gentilmente o compartilhamento de maiores informações a respeito do seu código.

Observe o resultado que obtive em minha máquina com essas informações passadas.

Campo do placeholder, em teste na minha máquina

Por conta disso peço maiores informações sobre o seu código, pois o erro não foi constatado aqui, se possível envie o seu html Completo e o css completo responsável pelo placeholder, seja ele aqui no tópico ou o link do github, upado no drive.

Fico no aguardo e a disposição para lhe auxiliar de forma mais assertiva.

Sucesso

Um grande abraço e até mais!

por GUSTAVO RIBEIRO BRUNES
| 20.1k xp | 15 posts
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alura Books</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Krona+One&family=Montserrat:wght@600&family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="cabeçalho">
    <div class="container">
        <input type="checkbox" id="menu" class="container__botao">
        <label for="menu">
            <span class="cabeçalho__menu-hamburguer container__imagem"></span>
        </label>
        <ul class="lista-menu">
            <li class="lista-menu__titulo">categorias</li>
            <li class="lista-menu__item">
                <a href="#" class="lista-menu__link">Programação</a>
            </li>
            <li class="lista-menu__item">
            <a href="#" class="lista-menu__link">Front-end</a>
            </li>
            <li class="lista-menu__item">
                <a href="#" class="lista-menu__link">Infraestrutura</a>
            </li>
            <li class="lista-menu__item">
                <a href="#" class="lista-menu__link">Business</a>
            </li>
            <li class="lista-menu__item">
                <a href="#" class="lista-menu__link">Design & UX</a>
            </li>
        </ul>
        <img src="style/Logo.png" alt="Logo da Alura" class="container__imagem">
    </div>
    <div>
        <a href="#"><img src="style/Favoritos.png" alt="meus favoritos" class="container__imagem"></a>
        <a href="#"><img src="style/compras.png" alt="carrinho de compras" class="container__imagem"></a>
        <a href="#"><img src="style/Usuario.png" alt="meu perfil" class="container__imagem"></a>
    </div>
    </header>
    <section class="banner">
        <h2 class="banner__titulo">Já sabe por onde começar</h2>
        <p class="banner__texto">Encontre em nossa estante o que precisa para seu desenvolvimento!</p>
        <input type="search" class="banner__pesquisa" placeholder="Qual será sua próxima leitura?">
    </section>
    <section class="carrossel"> 
        <h2 class="carrossel__titulo">Novos lançamentos</h2>
        <!-- Slider main container -->
        <div class="swiper">
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
            <!-- Slides -->
                <div class="swiper-slide"><img src="style/Guia Front-end.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/Liderança.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/Nodejs.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/Portugol.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/ReactNative.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/UX.png" alt="livro"></div>


            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>

        <div class="card">
            <!--1 LINHA-->
            <div class="card__descrição">
                <!--1 COLUNA-->
                <div class="descrição">
                    <h3 class="descrição__titulo">Talvez você também se interesse por...</h3>
                    <h2 class="descrição__titulo-livro">Angular 11 e Firebase</h2>
                    <p class="descrição__texto">Construindo uma apliacação integrada com a plataforma</p>
                </div>
                <!--2 COLUNA-->
                <img src="style/Perfil-escritora 2.png" class="descrição__imagem">
            </div>
            <!--2 LINHA-->
            <div class="card__botões">
                <!--1 coluna-->
                <ul class="botões">
                    <li class="botões__item"><img src="style/Favoritos.png" alt="Favoritar livro"></li>
                    <li class="botões__item"><img src="style/Compras.png" alt="adicionar ao carrinho"><li>
                </ul>
                <!--2 coluna-->
                <a href="#" class="botões__ancora"> Saiba mais</a>
            </div>
        </div>
    </section>
por GUSTAVO RIBEIRO BRUNES
| 20.1k xp | 15 posts
<section class="carrossel">
        <h2 class="carrossel__titulo">Mais Vendidos</h2>
        <div class="swiper">
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
            <!-- Slides -->
                <div class="swiper-slide"><img src="style/Guia Front-end.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/Liderança.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/Nodejs.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/Portugol.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/ReactNative.png" alt="livro"></div>
                <div class="swiper-slide"><img src="style/UX.png" alt="livro"></div>


            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>

        <div class="card">
            <!--1 LINHA-->
            <div class="card__descrição">
                <!--1 COLUNA-->
                <div class="descrição">
                    <img class="estrelinhas" src="style/Estrelinhas.png" alt="estrelinhas">
                    <h3 class="autora">Autora do Mês</h3>
                    <h3 class="nome__autora">Juliana Agaricov</h3>
                    <h2 class="descrição__texto__autora">Analista de sistemas e escritora, Juliana é especialista em Front-End. </h2>
                </div>
                <!--2 COLUNA-->
                <img src="style/Perfil-escritora 1.png" class="descrição__imagem">
            </div>
            <!--2 LINHA-->
            <div class="card__botões">
                <!--1 coluna-->
                <ul class="botões2">
                    <li class="botões__item"><img src="style/Favoritos.png" alt="Favoritar livro"></li>
                    <li class="botões__item"><img src="style/Compras.png" alt="adicionar ao carrinho"><li>
                </ul>
                <!--2 coluna-->
                <a href="#" class="botões__ancora"> Saiba mais</a>
            </div>
        </div>
    </section>

    <section class="topicos">
        <h2 class="topicos__titulo">TOPICOS VISITADOS RECENTEMENTE</h2>
        <ul class="topicos__lista">
            <li class="topicos__item">
                <a href="#" class="topicos__link">Android</a>
            </li>
            <li class="topicos__item">
                <a href="#" class="topicos__link">Marketing Digital</a>
            </li>
            <li class="topicos__item">
                <a href="#" class="topicos__link">Agile</a>
            </li>
            <li class="topicos__item">
                <a href="#" class="topicos__link">startups</a>
            </li>
            <li class="topicos__item">
                <a href="#" class="topicos__link">HTML e CSS</a>
            </li>
            <li class="topicos__item">
                <a href="#" class="topicos__link">Python</a>
            </li>
            <li class="topicos__item">
                <a href="#" class="topicos__link">OO</a>
            </li>
            <li class="topicos__item">
                <a href="#" class="topicos__link">java</a>
            </li>
        </ul>
    </section>

    <section class="contato">
        <h2 class="contato__titulo">Fique por dentro das novidades!</h2>
        <p class="contato__texto">Atualizados de e-books, novos livros, promoções e outros</p>
        <input type="email" placeholder="Cadastre seu e-mail" class="contato__email">
    </section>

    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper', {
            spaceBetween: 10,
            slidesPerView: 3,
            pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
  },
        });
    </script>
</body>
</html>
por GUSTAVO RIBEIRO BRUNES
| 20.1k xp | 15 posts

Obrigado pela ajuda, esse é todo o html e o css já está completo no primeiro post

por Victor Costa Santos
| 2063.4k xp | 4021 posts
Alura Scuba Team Monitor do suporte educacional

Olá Gustavo, tudo bem?

Peço desculpas pela demora em obter um retorno

Gustavo novamente em meus testes, não acontece o erro mencionado o placeholder funcionou tranquilamente, o CSS em pouco interferiu no funcionamento do mesmo, para fazer um "exame" mais aprofundado desse paciente rsrs, para que eu possa fazer uma análise mais aprofundada do problema que você está enfrentando, seria de grande ajuda se você pudesse fornecer o código completo. Você pode fazer o upload de uma pasta contendo o código e outros arquivos relevantes para algum serviço de armazenamento, como o Google Drive, e compartilhar o link público conosco. Alternativamente, você pode fornecer o link para o repositório no GitHub onde o código está hospedado.

Lamento não poder fornecer uma resposta mais rápida, mas com as informações fornecidas até o momento, não consigo simular o erro que você está enfrentando.

Estou aqui para ajudar e aguardo ansiosamente o seu código para poder oferecer uma solução adequada.

Um grande abraço e até mais!

por GUSTAVO RIBEIRO BRUNES
| 20.1k xp | 15 posts

Oi victor obrigado pela ajuda cara, tá difícil o negócio aqui kkkkk. Cara eu botei toda a pasta lá no github, no meu repositório, estou te seguindo. Meu nome está como Gustavo11b.

Novamente, obrigado pela ajuda.

por Victor Costa Santos
| 2063.4k xp | 4021 posts
Alura Scuba Team Monitor do suporte educacional

Olá Gustavo, tudo bem?

Agradeço por enviar o código completo, deste modo conseguir fazer uma bateria de exames rsrs, obrigado pela paciência e por colaborar, para desvendarmos os erros mencionados, porém...

Vamos resolver algumas questões, peço que me responda algumas dúvidas, seus placeholders estão funcionado como deixo exemplificado mais abaixo:

Dentro do projeto do aluno, o gif exemplica o que estou vendo

O texto aparece normalmente e ao inserir um texto ele funciona como esperado, você poderia mostrar como está na sua tela, para lhe ajudar a entender o seu erro.

No seu código encontrei outro erro, que é o erro na lista-menu, como exemplificado mais abaixo:

Dentro do projeto do aluno, o menu não aprensenta o conteudo correto

Para resolvermos esse erro devemos fazer a seguinte alteração em umas das class, no arquivo header.css, devemos trocar o nome da class .lista-menu__item, para lista menu lista-menu__link. como exemplificado no código mais abaixo:

.lista-menu__link{
    background: var(--azul-degrade);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
}

Seu projeto deverá ficar deste modo.

dentro do projeto o erro reparado fica com a lista menu aparente, como exemplifica a imagem

Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por GUSTAVO RIBEIRO BRUNES
| 20.1k xp | 15 posts

Vlw pela ajuda victor consegui consertar o menu. Com relação aos placeholders eles estão funcionando sim, porém não consigo botar o texto do placeholder do email no canto esquerdo como está no curso

solução!
por Victor Costa Santos
| 2063.4k xp | 4021 posts
Alura Scuba Team Monitor do suporte educacional

Olá Gustavo, tudo bem?

Peço desculpas por não observar o erro de primeira e nem de segunda rsrs, quando você falou "Texto placeholder não aparece" no título eu pensei que literalmente ele não saia texto hehe, mas vamos lá!

Para contornar esse erro você pode utilizar do "text-align: start", desse modo o texto fica alinhado ao inicio do placeholder, como exemplificado mais abaixo:

.contato__email::placeholder{
    font-family: var(--fonte-principal);
    color: var(--azul);
    background: url("../style/Vector.png") no-repeat;
    padding-left: 2em;
    text-align: start; /*Nova linha adicionada*/
}

A adição da linha text-align: start; significa que o texto será alinhado à esquerda para idiomas que são lidos da esquerda para a direita, deste modo o texto sai do centro do contato.

Reforço que em caso de qualquer dúvida, me coloco à disposição! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por GUSTAVO RIBEIRO BRUNES
| 20.1k xp | 15 posts

Funcionou victor, muito obrigado pela paciência, agora está funcionando direitinho.