Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Projeto] Desafio, veja como eu fiz.

HTML

Mais Vendidos

        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide"><img src="/img/Nodejs.svg" alt="Livro Node"></div>
            <div class="swiper-slide"><img src="/img/ApacheKafka.svg" alt="Livro Apache Kafka"></div>
            <div class="swiper-slide"><img src="/img/Javascript.svg" alt="Livro Javascript"></div>
            <div class="swiper-slide"><img src="/img/UX.png" alt="Livro UX"></div>
            <div class="swiper-slide"><img src="/img/Arquitetura.png" alt="Livro Arquitetura"></div>
        </div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-ne"></div>
        <!-- If we need scrollbar -->

        <div class="swiper-scrollbar"></div>
    </div>
    <div class="card2">

        <div class="card2__descricao">
            <div class="descricao2">
                <img src="/img/Estrelinhas.svg" alt="Estrelas" class="descricao2__estrelas">
                <h3 class="descricao2__titulo">Autora do Mês</h3>
                <h2 class="descricao2__titulo-livro">Juliana Agarikov</h2>
                <p class="descricao2__texto">Analista de sistemas e escritora, Juliana é especialista em Front-End.</p>
            </div>
            <img src="/img/Perfil-escritora.svg" alt="Conde Escritora" class="descricao2__imagem">
    </div>

    <div class="card__botoes">
        <ul class="botoes">
            <li class="botoes2__item"><img src="/img/Favoritos.svg" alt="Favoritar Livro"></li>
            <li class="botoes2__item"><img src="/img/Compras.svg" alt="Adicionar no Carrinho"></li>
        </ul>
        <a href="#" class="botoes2__ancora">Saiba mais</a>
    </div>

</section>

CSS
.carrossel2__titulo {
color: var(--laranja);
background-color: var(--branco);
text-align: center;
text-transform: uppercase;
font-size: 18px;
font-weight: 700;
padding: 1em 0 0.5em 0;

}

.swiper-slide img { width: 100%; }

.swiper-button-prev, .swiper-button-next { display: none; }

.swiper-pagination { position: initial; margin: 0.5em 0; }

.card2 { background: var(--branco); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 10px; margin: 1em; padding: 1em; }

.swiper { width: 600px; height: 300px; }

.card2__descricao { display: flex; justify-content: space-between; margin-bottom: 0.5em; }

.card2__botoes { display: flex; justify-content: space-between; }

.botoes2 { display: flex; }

.descricao2__estrelas { margin: 0.5em 0; }

.descricao2__titulo { color: var(--laranja); font-weight: 700; }

.descricao2__titulo-livro { color: var(--azul); font-size: 18px; font-weight: 700; margin: 1em 0; }

.descricao2__texto { font-size: 14px;

}

.botoes2__ancora { background-color: var(--laranja); padding: 1em 2.5em; color: var(--branco); font-weight: 700; text-decoration: none; }

.botoes2__item { margin: 0 0.5em; }

1 resposta
solução!

Oi, tudo bem?

Marcus, muito obrigada por compartilhar sua solução! Fico impressionada com a maneira como você implementou o carrossel com SwiperJS, e a adição de funcionalidades como autor do mês, estrelas de avaliação e botões de interação é muito interessante.

A estrutura HTML está bem organizada, e o uso de classes CSS específicas facilita a estilização e a manutenção do código. Além disso, a responsividade do carrossel e o design do card são muito agradáveis.

Parabéns por praticar os conceitos do curso de forma tão criativa e eficiente. Continue assim, explorando e aplicando novos conhecimentos.

Lembre-se de que, além de compartilhar aqui no fórum, você também pode marcar a Alura nas redes sociais para que mais pessoas possam ver seu trabalho.

A Alura tem perfis em várias redes sociais, você pode encontrá-los aqui. E não se esqueça do nosso Discord de alunos da Alura.

Um abraço e bons estudos.