Todas as coisas estão dentro das pastas certas, então qual motivo de não estar funcionando?
ATÉ 50% OFF
TÁ ACABANDO!
0 dias
0 horas
0 min
0 seg
ATÉ 50% OFF
TÁ ACABANDO!
0 dias
0 horas
0 min
0 seg
Todas as coisas estão dentro das pastas certas, então qual motivo de não estar funcionando?
Oi Maria, tudo bem?
No seu style.css, depois do@import url("styles/header.css") está faltando um ; (ponto e vírgula).
Corrija para: @import url("styles/header.css");, creio que ajustando isso o ícone do Menu irá aparecer.
Percebi também umas diferenças no seu HTML para o da aula, vou te passar aqui.
A tag meta está com um =, <meta charset="UTF=8">ajusta para:
<meta charset="UTF-8">
Para que no futuro, não haja nenhuma inconsistência.
Dentro dos href, sugiro colocar uma # (jogo da velha) igual a instrutora faz, para que não haja erro ao clicar no link, usando a # ela dá um direcionamento para a própria página.
Depois da tag <body>, na linha 12, você está abrindo a tag head de novo. Você precisa abrir a tag <header> na verdade, assim:
<header class="cabeçalho">
É isso! Espero ter te ajudado, Maria :D
Para uma referência futura, indico você usar essa ferramenta de bloco de código, que fica mais fácil pra você (não precisar tirar vários prints e colar aqui) e pra gente que consegue copiar seu código e ver o que pode estar errado :D. Veja:
Bons estudos!
Abraço.
Sinto muito, mas não foi resolvido. Não era a vírgula. Fiz todas as alterações sugeridas.
Código INDEX
<!DOCTYPE html>
<html lang="pt - br">
<head>
<title> Alura books</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="cabeçalho">
<span class="cabecalho__menu-hamburguer"></span>
<img src="img/logo.svg" alt="logo alurabook">
<a href="#"><img src="img/favoritos.svg" alt="Mus 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>CÓDIGO do stiloo CSS
@import url("styles/header.css");
root: {--cor-fundo: #ebecee;}
body {
background-color: var(--cor-fundo);
}
código do header
.cabecalho__menu-hamburguer {
width: 36px;
height: 24px;
background-image: url("../img/Menu.svg");
display: inline-block;
}
}
Oi Maria, tudo bem?
Poderia mandar o código do header? Veio duas vezes o código do styles.
Verifica se no seu CSS, você está chamando pela class igual no HTML, por exemplo, no seu HTML a class do Menu está escrita assim: cabecalho__menu-hamburguer, sem o Ç.
Você precisa chamar igual no seu CSS, senão os estilos não serão aplicados.
Vou ficar no aguardo do CSS do header para testá-lo.
Uma dica que eu dou é, se estiver usando a palavra com acentuação em uma class, usa em todas, para que não haja confusão.
Verifica se está importanto o style.css pelo nome correto no HTML, por exemplo, o meu está assim:
E eu chamo noHTML dessa forma:
Ah ajusta o root, para:
:root {
--cor-fundo: #ebecee;
}Os dois : vem antes da palavra.
Fico no aguardo.
Bons estudos.
Prontinho...Coloquei o código do header.. Para mim, tá ok as outras informações que voce pediu para ver
Oi Maria, testei seu código e aqui ele funcionou.
Abri até no sublime para testar e apareceu, veja:
)
Vou deixar aqui os códigos:
HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title> Alura books</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="cabeçalho">
<span class="cabecalho__menu-hamburguer"></span>
<img src="img/logo.svg" alt="logo alurabook">
<a href="#"><img src="img/favoritos.svg" alt="Mus 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>Style.css
@import url("styles/header.css");
:root {
--cor-fundo: #ebecee;
}
body {
background-color: var(--cor-fundo);
}header.css.cabecalho__menu-hamburguer {
width: 24px;
height: 24px;
background-image: url("../img/Menu.svg");
display: inline-block;
}Copia e cola o meu e faz esse teste, Maria.