1
resposta

Solução: reutilizando código

<section class="carrossel">
    <h2 class="carrossel__titulo">MAIS VENDIDOS</h2>

    <!-- Slider main container -->
    <div class="swiper">
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->

            <div class="swiper-slide"><img src="img/Acessibilidade.svg" alt="Livro sobre Acessibilidade da alurabooks"></div>
            <div class="swiper-slide"><img src="img/ApacheKafka.svg" alt="Livro sobre ApacheKafka da alurabooks">
            </div>
            <div class="swiper-slide"><img src="img/MetricasAgeis.svg"
                    alt="Livro sobre guia MetricasAgeis da alurabooks"></div>
            <div class="swiper-slide"><img src="img/ReactNative.svg" alt="Livro sobre ReactNative da alurabooks">
            </div>
            <div class="swiper-slide"><img src="img/Liderança.svg" alt="Livro sobre liderança da alurabooks"></div>
            <div class="swiper-slide"><img src="img/Nodejs.svg" alt="Livro sobre Node da alurabooks"></div>
            ...
        </div>


        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
    
    <div class="card">
        <!--1º linha-->
        <div class="card__descrição">
            <!--1º coluna-->
            <div class="descrição">
                <img class="descrição__estrela" src="img/Estrelinhas.svg" alt="5 Estrelas , nota para autora!">
                <h3 class="descrição__titulo">Autora do Mês</h3> 
                <h2 class="descrição__titulo-livro">Juliana Agarikov</h2>
                <p class="descrição__texto">Analista de sistemas e escritora, Juliana é especialista em Front-End. </p>
            </div>
            <!--2º coluna-->
            <img src="img/Perfil-escritora.svg" alt="card Simbolo angular" class="descrição__imagem">
        </div>
    
        <!--2º linha-->
        <div class="card__botoes">
            <!--1º 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 carrinho de compras!"></li>
            </ul>
            <!--2º coluna-->
            <a href="#" class="botoes__ancora">Saiba mais</a>
        </div>
    </div>
    
    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
    </div>

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

1 resposta

Oi Lucas, tudo bem?

Obrigada por compartilhar a sua solução para o exercício, pode ser muito útil para outros alunos da comunidade. Parabéns por todo seu esforço e dedicação, continue assim!

Se surgir qualquer dúvida, estou a disposição.

Abraços e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software