Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] Minha Solução

![Foto do meu projeto]Insira aqui a descrição dessa imagem para ajudar na acessibilidadeAqui eu só reutilizei o o mesmo codigo que foi utilizado para fazer a section do "mais vendidos" e modifiquei as imagens e fiz um section para adicionar as 5 estrelas em forma de imagem que foi o que me veio em mente na hora haha

3 respostas
 <section class="carrossel">
      <h2 class="carrossel__titulo">Mais vendidos</h2>
      <div class="swiper">
        <div class="swiper-pagination"></div>
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img
              src="img/ApacheKafka.svg"
              alt="Livro sobre Apache kafka e spring bot da alura books"
            />
          </div>
          <div class="swiper-slide">
            <img
              src="img/Liderança.svg"
              alt="Livro sobre Liderança em design da alura books"
            />
          </div>
          <div class="swiper-slide">
            <img
              src="img/Javascript.svg"
              alt="Livro sobre Javascript assertivo"
            />
          </div>
          <div class="swiper-slide">
            <img src="img/Guia Front-end.svg" alt="Guia Front-end" />
          </div>
          <div class="swiper-slide">
            <img src="img/Portugol.svg" alt="Livro sobre Portugol" />
          </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__descricao">
          <!-- 1ª coluna -->
          <div class="descricao">
            <section class="estrela">
              <img src="img/Star 1.svg" alt="Estrela dourada" />
              <img src="img/Star 1.svg" alt="Estrela dourada" />
              <img src="img/Star 1.svg" alt="Estrela dourada" />
              <img src="img/Star 1.svg" alt="Estrela dourada" />
              <img src="img/Star 1.svg" alt="Estrela dourada" />
            </section>
            <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>
          <!-- 2ª coluna -->
          <img
            src="img/Escritora.svg"
            alt="Imagem da Juliana"
            class="descricao__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>
.carrossel__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;
}

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

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

.botoes {
  display: flex;
}

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

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

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

.descricao__texto {
  font-size: 14px;
  font-weight: 400
}

.botoes__item {
  margin: 0 0.5em;
}

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

.estrela {
  margin-bottom: 1em;
}
solução!

Oi Erick, tudo bem?

Pelo código que você compartilhou, parece que você reutilizou o mesmo código da seção "mais vendidos" e fez as modificações necessárias para adicionar a nova seção. Essa é uma boa prática, pois evita a repetição de código e torna o seu projeto mais organizado.

Parabéns! Ficou ótimo.

Um abraço e bons estudos.