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

[Dúvida] icone do menu não aparece

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Criando Header, Flexbox e @import e atividade Header, Flexbox e @import

por Francis de Moura Pereira
| 25.7k xp | 15 posts

HTML

<!DOCTYPE html>
<html>
   
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MovieMixtapes</title>
    <link rel="stylesheet" href="styles/reset.css">
    <link rel="stylesheet" href="styles/styles.css">
</head>

<body>
    <header class="cabecalho">
        <span class="cabecalho__menu-hamburguer"></span>
        <img src="/img/logo.png" alt="Logo da MovieMixtapes">
        <a href="#"><img src="img/favoritos.svg" alt="Meus favoritos"></a>
        <a href="#"><img src="img/compras.svg" alt="Carrinho de compras"></a>
        <a href="#"><img src="img/usuario.svg" alt="Meu perfil"></a>
    </header>
</body>

</html>

CSS

@import url("styles/header.css");

:root {
    --cor-de-fundo: #D3DAD9;

}

body {
    background-color: var(--cor-de-fundo);
}

print do vscode

Garanta sua matrícula hoje e ganhe + 2 meses grátis

Continue sua jornada tech com ainda mais tempo para aprender e evoluir

Quero aproveitar agora
3 respostas
por Lorena Garcia
| 11831.4k xp | 17769 posts
Alura Scuba Team

Oii, Francis. Tudo bem?

Pelo o que você mandou não conseguir encontrar um erro. Por favor, mande seu código completo em um repositório do GitHub, assim posso testar ele por completo.

Ah, se quiser, dá uma olhadinha neste guia sobre como fazer uma boa pergunta no fórum — ele mostra exatamente o que precisamos saber pra conseguir te ajudar da melhor forma, e com mais agilidade.

Fico no aguardo. Abraços e bons estudos!

por Francis de Moura Pereira
| 25.7k xp | 15 posts

https://github.com/Francisyk/projeto_MovieMixtapes

solução!
por Lorena Garcia
| 11831.4k xp | 17769 posts
Alura Scuba Team

Oii, Francis.

Obrigada por compartilhar, consegui entender como está o seu projeto.

O problema é caminho de arquivo.

Os arquivos estão assim:

/ (raiz do projeto MOVIEMIXTAPES)
├─ img/
├─ styles/
│  └─ header.css
├─ index.html
├─ reset.css
└─ styles.css

No seu HTML você colocou:

<link rel="stylesheet" href="styles/reset.css">
<link rel="stylesheet" href="styles/styles.css">

Esses caminhos dizem “procure **dentro da pasta styles/**”, mas reset.css e styles.css não estão lá; eles estão na raiz, ao lado do index.html. Resultado: o browser não encontra o styles.css, o @import não roda, e o seletor .cabecalho__menu-hamburguer nunca é aplicado, por isso o ícone não aparece.

Mude a importação para:

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="styles.css">

Que aí vai funcionar:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Espero ter ajudado.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!