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

[Dúvida] A imagem esta no lugar errado

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Mais vendidos

    <div class="swiper-wrapper">
  <!-- Slides -->
  <div class="swiper-slide"><img src="img/ApacheKafka.svg" alt="Livro da Alura sobre ApacheKafka."></div>
  <div class="swiper-slide"><img src="img/Liderança.svg" alt="Livro sobre liderança da Alura."></div>
  <div class="swiper-slide"><img src="img/Javascript.svg" alt="Livro sobre java-script da Alura."></div>
    </div>

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

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
    </div>

    <div class="card">
        <!--1 linha-->
        <div class="card__descriçao">
            <!--1 coluna-->
            <div class="descriçao">
                <img src="img/Estrelinhas.svg" alt="Estrelas de qualificaçao">
                <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/Perfil-escritora 1.svg" 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 livros"></li>
                <li clss="botoes__item"><img src="img/Compras.svg" alt="Sacolinha compras"></li>
            </ul>
            <!--2 coluna-->
            <a href="#" class="botoes__ancora">Saiba mais</a>
        </div>

    </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script>
    const swiper = new Swiper('.swiper',{
    spaceBetween: 10,
    slidesPerView: 3,
    pagination:{ 
        el: '.swiper-pagination',
        type: 'bullets'
    },
    });
</script>
1 resposta
solução!

Oi, Marcelo, tudo bem?

O código referente ao cartão no arquivo HTML apresenta as tags necessárias para realizar o posicionamento correto da imagem ao lado do texto. Contudo, o problema que você está tendo pode ser referente ao arquivo CSS. Peço que verifique se o nome da classe class__descriçaoestá escrito da mesma forma que na tag <div>do card e se as propriedades de estilização apresentam os seguintes comandos:

.card__descriçao{
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.8em;
    gap:1em;
}

Espero que com essas dicas, você consiga resolver essa situação. Entretanto, se o problema persistir, peço que compartilhe o código CSS da parte referente ao card, para que eu possa te ajudar de forma mais assertiva.

Abraços !

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!