Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

A imagem da segunda classe não está alinhada

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Segue o código:

      <div class="card">
        <!-- Primeira linha -->
        <div class="card__descricao">
            <!-- Primeira Coluna -->
            <div class="descricao">
                <h3 class="descricao__titulo">Talvez você também se interesse por...</h3>
                <h2 class="descricao__titulo-livro">Angular 11 e Firebase</h2>
                <p class="descricao__texto">Construindo uma aplicação integrada com a plataforma do Google.</p>
            </div>
            <!-- Segunda Coluna -->
            <img src="img/Angular.svg" class="descricao__imagem" alt="">
        </div>

        <!-- Segunda linha -->
        <div class="card__botoes">
            <!-- Primeira Coluna -->
            <ul class="botoes">
                <li class="botoes__item"><img src="img/Favoritos.svg" alt="Favoritar Livros"></li>
                <li class="botoes__item"><img src="img/Compras.svg" alt="Adicionar ao carrinho"></li>
            </ul>
            <!-- Segunda Coluna -->
            <a href="#" class="botoes__ancora">Saiba mais</a>
        </div>
      </div>
</section>
<section class="carrosel">
    <h2 class="carrosel__titulo">Mais vendidos</h2>
    <div class="swiper">
        <!-- Additional required wrapper -->
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>

        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide"><img src="img/ApacheKafka.png"
                    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>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <div class="card">
            <!-- 1º linha -->
            <div class="card__descricao">
                <!-- 1º coluna -->
                <div class="descricao">
                    <img src="img/Estrelinhas.svg" alt="Avaliação 5 estrelas">
                    <h3 class="descricao__titulo">Autora do Mês</h3>
                    <h2 class="descricao__titulo-livro">Juliana Agarikov</h2>
                    <p class="descricao__texto">Analista de sistemas e escritora, Juliana é especialista em Front-End.
                    </p>
                </div>
                <!-- 2º coluna -->
                <img src="img/Perfil-escritora 1.svg" class="descricao__imagem">
            </div>

            <!-- 2º linha -->
            <div class="card__botoes">
                <!-- 1º coluna -->
                <ul class="botoes">
                    <li class="botoes__item"><img src="img/Favoritos.svg" alt="Favoritar livro"></li>
                    <li class="botoes__item"><img src="img/Compras.svg" alt="Adicionar no carrinho de compras"></li>
                </ul>
                <!-- 2º coluna -->
                <a href="#" class="botoes__ancora">Saiba mais</a>
            </div>
        </div>
    </div>
4 respostas

Caso precise do código completo, segue link do GitHub: https://github.com/renancadnogueira/alurabooks

Olá, Renan.

Tudo bem?

Eu baixei o seu projeto e não abriu a imagem da moça, por ter espaços no nome da imagem, ai eu peguei e alterei o nome da imagem que estava como Perfil-escritora 1.svg ai eu alterei para Escritora.svg tanto no nome quanto no caminho, ficou assim corrigido:

Só a tag img:

<img src="img/Escritora.svg" class="descrição__imagem">

O card descrição inteiro ficou assim:

<div class="descricao">
                        <img src="img/Estrelinhas.svg" alt="Avaliação 5 estrelas">
                        <h3 class="descricao__titulo">Autora do Mês</h3>
                        <h2 class="descricao__titulo-livro">Juliana Agarikov</h2>
                        <p class="descricao__texto">Analista de sistemas e escritora, Juliana é especialista em Front-End.
                        </p>
                    </div>
                    <!-- 2º coluna -->
                    <img src="img/Escritora.svg" class="descrição__imagem">
</div>

Ajustando isso ficou certinha a imagem, eu testei nas minhas duas telas, uma maior e uma menor do notebook.

Espero ter ajudado. Qualquer dúvida manda aqui. Valeu.

Renan, boa tarde!

Então o problema está na parte responsiva de 1024px. (Telas de Tablets).

No tamanho responsivo para celular está OK e para desktop também, o problema é apenas 1024px.

Fiz as alterações solicitadas (nome na pasta, e no VSCode) e continua sem a resolução do problema.

solução!

Professor, boa tarde!

Consegui resolver estava faltando fechar uma div.

Muito obrigado pela ajuda!