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; }