2
respostas

[Projeto] Fiquei bem confuso achando que tinha que fazer outro css para essa section, mas no fim foi so copiar e colar o código. Alterarando pouquissimas coisas.

 <!--Section desafio-->
    <section class="carrossel">
        <h2 class="carrossel__titulo">MAIS VENDIDOS</h2>
        <div class="swiper-container">
            <div class="swiper-pagination"></div>
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="img/Javascript.svg" alt="Javascript livro alurabooks"></div>
                <div class="swiper-slide"><img src="/img/Guia Front-end.svg" alt="Livro Guia Front-End alurabooks"></div>
                <div class="swiper-slide"><img src="img/ApacheKafka.svg" alt="Livro sobre ApacheKafka alurabooks"></div>
                <div class="swiper-slide"><img src="/img/Portugol.svg" alt="Livro Portugol alurabooks"></div>
                <div class="swiper-slide"><img src="img/Liderança.svg" alt="Liderança livro alurabooks"></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>

        <div class="card">
            <!--1 linha -->
            <div class="card__descriçao">
                <!--1 coluna -->
                <div class="descriçao">
                    <img src="/img/Estrelinhas.svg" class="descriçao__imagem" class="descricao__stars">
                    <h3 class="descriçao__titulo">Autora do Mês</h3>
                    <h2 class="descriçao__titulo-livro">Juliana Agarikov</h2>
                    <p class="descriçao__texto">Analista de sistemas e escritora, Juliana é especialista em Front-End. </p>
                </div>
                <!--2 coluna -->
                <img src="img/Escritora.svg" alt="Imagem livro Angular" class="descriçao__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>
    </section>

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
    const swiper = new Swiper('.swiper-container', {
        spaceBetween: 10,
        slidesPerView: 3,
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
        },
    });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> 
    
2 respostas

DESAFIO CONCLUÍDO

Oi João, tudo bem?

É exatamente isso: a ideia dessa atividade é justamente reutilizar o código da seção "Mais vendidos" para criar a seção "Novos lançamentos". O conceito de reutilização de código é muito importante na programação, pois nos permite economizar tempo e esforço, além de tornar o código mais fácil de manter.

Obrigada por compartilhar com a gente a sua solução!

Um abraço e bons estudos.