1
resposta

[Sugestão] Minha soluçao para o desafio

minha solucao os trechos de html e css:

.carrosel{
    color: var(--laranja);    
    text-align: center;
    text-transform: uppercase;
    font-family: var(--fonte-principal);
    font-weight: 700;
    font-size: 18px;
    padding: 1em 0;
    margin: 1em;
}

.carrosel__titulo{
  margin-top: 0.5em;
  padding: 1em;
  font-family: var(--fonte-principal);
  font-weight: 700;
  color: var(--laranja);
  background-color: var(--branco);
  text-align: center;
  text-transform: uppercase;
}

.swiper-slide img {
    width: 100%;

  }

  .swiper-button-prev, .swiper-button-next{
    display: none;
  }
  .swiper-pagination{
    position: initial;
    margin: 0.5em 0;
  }

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

  .card__descricao{
    display:flex;
    justify-content: space-between;
    text-align:left;

  }
  .card__botoes{
    display: flex;    
    justify-content: space-between;
    align-items: center;

  }

  .botoes{
    display: flex;
    align-items: center;
  }
  .descricao{
    margin: 0 0.5em 0;
  }

  .descricao__titulo{
    font-family: var(--fonte-principal);
    font-weight: 700;
    font-size: 14px;
    line-height: 1em;
    margin-bottom: 1em;
    color: var(--laranja);
  }
  .descricao__titulo-livro{
    font-family: var(--fonte-principal);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.em;
    margin-bottom: 1em;
    color: var(--azul); 

  }

  .descricao__texto{
    font-family: var(--fonte-principal);
    font-weight: 400;
    font-size: 14px;
    line-height: 1em;
    margin-bottom: 0,5em;
    color: rgba(0, 0, 0, 0.85);
  }
  .botoes{
    margin-top: 1em;
  }

  .botoes__saibaMais{
    background-color: var(--laranja);
    padding: 1em;
    text-decoration: none;
    color: var(--branco);
    width: 39.5%;
  }

  .mais-vendidos{
    color: var(--laranja);    
    text-align: center;
    text-transform: uppercase;
    font-family: var(--fonte-principal);
    font-weight: 700;
    font-size: 18px;
    padding: 1em 0;
    margin: 1em;
  }
  .mais-vendidos__carrosel{
    margin-top: 0.5em;
    padding: 1em;
    font-family: var(--fonte-principal);
    font-weight: 700;
    color: var(--laranja);
    background-color: var(--branco);
    text-align: center;
    text-transform: uppercase;
  }
  .descricao__estrela{
    display: flex;
  }

html ficou assim :


            <div class="card">
                <div class="card__descricao"> 
                        <div class="descricao">
                            <ul class="descricao__estrela">
                                <li class="descricao__estrela__item"><img src="assets/Star 1.svg"></li>
                                <li class="descricao__estrela__item"><img src="assets/Star 1.svg"></li>
                                <li class="descricao__estrela__item"><img src="assets/Star 1.svg"></li>
                                <li class="descricao__estrela__item"><img src="assets/Star 1.svg"></li>
                                <li class="descricao__estrela__item"><img src="assets/Star 1.svg"></li>
                            </ul>
                            <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>                    
                    <img src="/assets/Perfil-escritora 1-1.png">
                </div>
                <div class="card__botoes">
                    <ul class="botoes">
                        <li class="botoes__item"><img src="assets/Favoritos.svg" alt="Favoritar botoes"></li>
                        <li class="botoes__item"><img src="assets/Compras.svg" alt="adicionar no carrinho de compras"></li>                        
                    </ul>
                    <a href="#" class="botoes__saibaMais">Saiba mais</a>
                </div>
            </div>

        </section>
    </main>
    <footer></footer>
    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper', {                
                spaceBetween: 10,
                slidesPerView: 3,
                pagination: {
                    el: '.swiper-pagination',
                    type: 'bullets',
                     },                
                });
    </script>
</body>
</html>
1 resposta

Olá Thiago.

Tudo bem?

Obrigado por compartilhar sua solução para o desafio! Pelo que pude ver, você utilizou classes bem estruturadas e organizadas, o que é muito importante para a manutenção do código. Além disso, você utilizou o framework Swiper para criar um carrossel responsivo, o que é uma ótima escolha para garantir uma boa experiência do usuário em dispositivos móveis. Parabéns pelo trabalho!

Bons estudos!