Problemas com as ancoras, não está aparecendo as imagens | HTML e CSS: responsividade com mobile-first

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

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 Leonardo Crispim de Oliveira

| 24.4k xp | 18 posts

Só está mostrando a logo, as imagens nas ancoras não. Alguém saberia me dizer o pq?

Abaixo print do código e diretórios:

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

Resultado do navegador:

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

<!DOCTYPE html>
<html lang="pt-br">


<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>AluraBooks</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="reset.css">
</head>


<body>
    <header class="cabecalho">
        <span class="cabecalho__menu-hamburguer"></span>
        <img src="img/Logo.svg" alt="Logo da AluraBooks">
        <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>

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

:root {
    --cor-de-fundo: #EBECEE;
}

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

2 respostas

solução!

por Lorena Garcia

| 8304.5k xp | 12158 posts

Alura Scuba Team Suporte Educacional

26/09/2022

Oi Leonardoco, tudo bem?

A ordem do seu reset.css está errada, você precisa colocar antes (para que ele limpe as configurações padrões do navegador e depois aplique as suas), ajuste para:

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

A sua tag a e img estão uma coisa só, é preciso separá-las, assim:

<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>

Outro ponto de atenção, você colocou o nome da pasta que era para ser styles de header e a está importando como @import url("styles/header.css");, é para ficar mais ou menos assim:

A pasta de imagens, depois a pasta onde vão ficar todos os estilos (o meu já está com todos os css que você ainda vai ver nas aulas futuras) e fora das pastas o index, reset e o arquivo de styles.css que é onde você vai importar todos os CSS criados. Insira aqui a descrição dessa imagem para ajudar na acessibilidade