Entrar Ainda não tem acesso?
2
respostas

[Dúvida] Segui o passo a passo, mas o input search no banner não ficou igual.

Referente ao curso HTML e CSS: responsividade com mobile-first

por Frederico Andrey Kurz Mór
| 21.9k xp | 4 posts
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AluraBooks</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=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    
    <header class="cabecalho">
        <div class="container"> 
            <input type="checkbox" id="menu" class="container__botao">
            <label for="menu">
                <span class="cabecalho__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="assets/Logo.svg" alt="Logo do Alurabooks" class="container__imagem">
            </div>
            <div>
                <a href="#"><img src="assets/Favoritos.svg" alt="Meus favoritos" class="container__imagem"></a>
                <a href="#"><img src="assets/Compras.svg" alt="Carrinhos de compras" class="container__imagem"></a>
                <a href="#"><img src="assets/Usuário.svg" 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>

</body>

</html>

.banner {
    background: var(--azul-degrade);
    color: var(--branco);
    text-align: center;
    padding: 2.5em 2em;
}

.banner__titulo {
    font-size: 18px;
    font-weight: 700;
}

.banner__texto {
    font-weight: 500;
    margin: 1em 0;
}

.banner__pesquisa {
    background-color: transparent;
    border: 1px solid var(--branco);
    color: var(--branco);
    border-radius: 24px;
    padding: 1em;
    width: 100%;
}

.banner__pesquisa::placeholder {
    font-family: var(--fonte-principal);
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    color: var(--branco);
    background: url(../assets/Pesquisa.svg) no-repeat;
    background-position: 3em;
}

Então, no input="search" do banner, a fonte fica meio acinzentada e a fonte da escrita no placeholder não altera. Queria saber o que pode ser, procurei algum misstype, mas não encontrei.

2 respostas
por Estudante
| 55.2k xp | 55 posts

Olá Frederico!

Parece que o estilo aplicado ao input de pesquisa no banner não está sendo exibido conforme o esperado. O problema pode estar relacionado com a especificidade dos seletores CSS ou com a herança de estilos de outros elementos.

Vamos analisar o código CSS para identificar o problema. Primeiro, verifique se as variáveis de cores e fontes estão sendo definidas corretamente no arquivo "styles.css". Certifique-se de que as variáveis --azul-degrade, --branco, e --fonte-principal estejam corretamente definidas no arquivo "styles.css" ou em outro arquivo de estilos vinculado ao HTML.

Além disso, certifique-se de que a classe .banner__pesquisa não esteja sendo sobrescrita por alguma outra regra CSS com maior especificidade.

Uma possível solução é aumentar a especificidade da regra para o input de pesquisa usando um seletor mais específico. Você pode fazer isso adicionando a classe .banner antes do seletor .banner__pesquisa na regra CSS, como mostrado abaixo:

.banner .banner__pesquisa {
    /* Estilos para o input de pesquisa no banner */
}

Isso pode ajudar a garantir que os estilos aplicados ao input de pesquisa no banner sejam exibidos corretamente, mesmo se houver regras com menor especificidade em outras partes do código.

Além disso, verifique se não há algum outro estilo sendo aplicado ao input de pesquisa ou ao seu placeholder de forma geral, o que poderia estar afetando a exibição correta dos estilos.

Se mesmo após essas verificações o problema persistir, é possível que outros estilos no arquivo "styles.css" estejam interferindo nos estilos do input de pesquisa. Nesse caso, pode ser necessário ajustar ou modificar algumas regras de estilo no arquivo CSS para garantir que os estilos desejados sejam aplicados corretamente.

Espero que essas sugestões o ajudem a resolver o problema com o estilo do input de pesquisa no banner. Se você tiver mais dúvidas ou precisar de mais assistência, por favor, deixe-me saber! Estou aqui para ajudar!

por Frederico Andrey Kurz Mór
| 21.9k xp | 4 posts
@import url("styles/header.css");
@import url("styles/banner.css");

:root {
    --cor-de-fundo: #EBECEE;
    --branco: #FFFFFF;
    --laranja: #EB9B00;
    --azul-degrade: linear-gradient(160deg, #002F52 0%, #326589 100%);
    --fonte-principal: "Poppins";
}

body {
    background-color: var(--cor-de-fundo);
    font-family: var(--fonte-principal);
    font-size: 16px;
    font-weight: 400;
}

O styles.css tá assim e eu segui todo passo a passo conforme o curso. Se fosse o caso de algo estiver sobrepondo os estilos, aconteceria no da instrutora também, não?