1
resposta

[Dúvida] Meu projeto deu certo, porém não há separação entre as "Colunas"

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

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

Estou com um problema na separação entre as "colunas"

 <div class="card">
        <!--1º Linha-->
        <div class="card__descriçao">
            <!--1º Coluna-->
            <div class="descrição">
                <h3 class="descrição__titulo">Talvez você também se interesse por...</h3>
                <h2 class="descrição__titulo__livro">Angular 11 e Firebase</h2>
                <p class="descrição__texto">Construindo uma aplicação integrada com a plataforma do Google.</p>
             </div>
             <!--2º Coluna-->
             <img src="img/Angular.svg" class="descrição__imagem" alt="Letra A em vermelho">
        </div>

        <!--2º Linha -->
        <div class="card__botões">
        <!--1º Coluna-->
            <ul class="botões">
                <li class="botões__item"><img src="img/Favoritos.svg" alt="Favoritar Livro"></li>
                <li class="botões__item"><img src="img/Compras.svg" alt="Comprar Livro"></li>
            </ul>
        <!--2º Coluna-->
        <a href="#" class="botões__ancora">Saiba mais</a>
        </div>

    </section>











        <!--Parte 2, feita sozinho-->


        <section class="carrossel">
            <h2 class="carrossel__titulo">Últimos Lançamentos</h2>
            <!-- Slider main container -->
            <div class="swiper">
                <!-- Additional required wrapper -->
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>

                <div class="swiper-wrapper">
                    <!-- Slides -->

                    <div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro aprendendo Portugol"></div>
                    <div class="swiper-slide"><img src="img/Liderança.svg" alt="Livro Liderança em design"></div>
                    <div class="swiper-slide"><img src="img/Nodejs.svg" alt="Livro Construindo API com NODE js"></div>
                    <div class="swiper-slide"><img src="img/Tuning.svg" alt="Livro tuning SQL"></div>
                    <div class="swiper-slide"><img src="img/Arquitetura.svg" alt="Livro arquitetura de software"></div>
                </div>

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



            <!--Parte 3, feita sozinho-->


            <div class="card">
                <!--1º Linha-->
                <div class="card__descriçao">
                    <!--1º Coluna-->
                    <div class="descrição">
                        <img src="img/Star.svg" class="estrela" alt="Avaliação">
                        <img src="img/Star.svg" class="estrela" alt="Avaliação">
                        <img src="img/Star.svg" class="estrela" alt="Avaliação">
                        <img src="img/Star.svg" class="estrela" alt="Avaliação">
                        <img src="img/Star.svg" class="estrela" alt="Avaliação">
                        <h3 class="descrição__titulo">Autora do Mês</h3>
                        <h2 class="descrição__titulo__livro">Juliana Agarikov</h2>
                        <p class="descrição__texto">Analista de sistemas e escritora, Juliana é especialista em Front-End.</p>
                     </div>
                     <!--2º Coluna-->
                     <img src="img/Perfil-escritora.svg" class="descrição__imagem" alt="Imagem da Escritora">
                </div>

                <!--2º Linha -->
                <div class="card__botões">
                <!--1º Coluna-->
                    <ul class="botões">
                        <li class="botões__item"><img src="img/Favoritos.svg" alt="Favoritar Livro"></li>
                        <li class="botões__item"><img src="img/Compras.svg" alt="Comprar Livro"></li>
                    </ul>
                <!--2º Coluna-->
                <a href="#" class="botões__ancora">Saiba mais</a>
                </div>
        </section>


        <!--SEMPRE DEIXAR O SCRIPT NO FINAL DO CÓDIGO-->

        <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

Oii, Dev! Tudo bem?

Para que eu possa simular o seu problema e te ajudar de forma mais assertiva, peço que você compartilhe o seu código HTML e CSS completo. Dessa forma, eu consigo ter uma visão mais geral para identificar o bug e a solução.

Uma alternativa de solução, é utilizar a propriedade gap, no seu arquivo CSS, para definir um espaçamento entre as colunas.

Por exemplo:

.card__descriçao {
  display: flex;
  gap: 20px;
}

Dessa forma, haverá um espaçamento de 20 pixels entre as colunas da seção card__descriçao. Espero que essa dica seja útil para você.

Qualquer outra dúvida, é só perguntar. Fico no aguardo!

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