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

Card não foi para o lado do carrossel com o display flex

Ola! Coloquei a div antes do carrossel e do card, coloquei display flex na div e o card não foi para o lado do carrossel

segue o código html, e depois posto o css

 <section class="carrossel">
        <h2 class="carrossel__titulo">Últimos Lançamentos</h2>
        <div clas="carrossel__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/img-livros/ApacheKafka.svg" alt="Livro sobre apache kafka"></div>
              <div class="swiper-slide"><img src="img/img-livros/Arquitetura.svg" alt="livro sobre arquitetura"></div>
              <div class="swiper-slide"><img src="img/img-livros/Javascript.svg" alt="livro sobre javascript"></div>
              <div class="swiper-slide"><img src="img/img-livros/Nodejs.svg" alt="livro sobre nodejs"></div>
              <div class="swiper-slide"><img src="img/img-livros/Portugol.svg" alt="livro sobre portugol"></div>
              <div class="swiper-slide"><img src="img/img-livros/Tuning.svg" alt="livro sobre tuning"></div>
            </div>


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

          </div>
          <div class="card">
            <div class="card__descricao">
                <div class="descricao">
                    <h3 class="descricao__titulo">Talvez você também se interesse por...</h3>
                    <h2 class="descricao__titulo-livro">Angular 11 e Firebase</h2>
                    <p class="descricao__texto">Construindo uma aplicação integrada com a plataforma do Google.</p>

                </div>
                <img src="img/Angular.svg" class="descricao__imagem">
            </div>
            <div class="card__botoes">
                <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>
                <a href="#" class="botoes__ancora">Saiba mais</a>
            </div>
          </div>
3 respostas
.carrossel__container {
    display: block;
}
@media screen and (min-width: 1024px) {
    .carrossel__titulo {
        font-size: 26px;
    }
    .swiper-pagination {
        margin: 2em 0 3em 0;
    }
    .swiper {
        width: 60%;
    }
    .swiper-button-prev, .swiper-button-next {
        display: block;
        top: 60%;
    }
    .card {
        width: 50%;
        margin: 2em auto;
    }
}
@media screen and (min-width: 1728px) {
    .carrossel__container {
        display: flex;
    }
}
solução!

Faltou 3 coisinhas, 1 "s" na palavra "class" do " class="carrossel__container" " e no final faltou fechamento da </div> do container e o fechamento da </section>

Alterando isso no seu html deve funcionar :)

Eu não acredito que eu não tinha percebido que era essa porcaria desse s faltando hahahahahhaa Eu olhei DUZENTAS vezes o código e não conseguia achar o erro!! ahhaahhahahahaha Muito obrigada! Agora deu certo.