1
resposta

Meu código não está aparecendo nada

Não aparece as setinhas, nem as imagens do "img src", como consigo corrigir isso?

Meu código abaixo:

<!DOCTYPE html>
<html>

<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="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
    <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="img/Logo.svg" alt="Logo da Alurabooks" class="container__imagem">
        </div>
        <div class="container">
            <a href="#"><img src="img/Favoritos.svg" alt="Meus favoritos" class="container__imagem"></a>
            <a href="#"><img src="img/Compras.svg" alt="Carrinhos de compras" class="container__imagem"></a>
            <a href="#"><img src="img/Usuario.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>
    <section class="carrossel">
        <h2 class="carrossel__titulo">Novos lançamentos</h2>
        <div class="swiper">
            <div class="swiper-pagination"></div>

            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="img/ApacheKafka.svg"
                        alt="Livro sobre apache kafka e spring boot da alura books"></div>
                <div class="swiper-slide"><img src="img/Liderança.svg"
                        alt="Livro sobre liderança em design da alura books"></div>
                <div class="swiper-slide"><img src="img/Javascript.svg"
                        alt="Livro sobre javascript assertivo da alurabooks"></div>
                <div class="swiper-slide"><img src="img/Guia Front-end.svg" alt="Livro Guia front end"></div>
                <div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro sobre portugol"></div>
                <div class="swiper-slide"><img src="img/Acessibilidade.svg" alt="livro sobre acessibilidade"></div>
            </div>

            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>

    </section>

    <script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper', {
            speed: 400,
            spaceBetween: 100,
        });
    </script>
</body>

</html>

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

Olá Anthony.
Verifica o caminho correto das imagens no seu vscode.
Por exemplo: "./img/minha_imagem.sgv"
Verifique e o nome da imagem está igual ao da pasta img.
Outra coisa é que sua pasta img deve estar no mesmo diretorio do seu arquivo html.
Voce tambem pode copiar o caminho relativo da pasta clicando na pasta img com o botao direito do mouse e escolhendo a opção copiar caminho relativo.
Depois só colar no local correto.
Testa ai e avise.
Qualquer duvida avise ai.
Até...