Entrar Ainda não tem acesso?
4
respostas

Meu card fica embaixo do carrossel.

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Produzindo CSS no desktop e atividade Revisando o flexbox

por Fabio De Moraes
| 51.8k xp | 3 posts
<section class="carrossel">
        <h2 class="carrossel__titulo">Novos lançamentos</h2>
            <div class="carrossel__contanier">
                <div class="swiper">
                    <div class="swiper-pagination"></div>
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="/img/ApacheKafka.svg" alt="livro 1"></div>
                        <div class="swiper-slide"><img src="/img/Liderança.svg" alt="livro 2"></div>
                        <div class="swiper-slide"><img src="/img/Javascript.svg" alt="livro 3"></div>
                        <div class="swiper-slide"><img src="/img/Guia Front-end.svg" alt="livro 4 "></div>
                        <div class="swiper-slide"><img src="/img/Portugol.svg" alt="livro 5"></div>
                        <div class="swiper-slide"><img src="/img/Acessibilidade.svg" alt="livro 6"></div>   
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                    </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 class="card__botoes">
                                <ui class="botoes">
                                    <li class="botoes__item"><img src="/img/Favoritos.svg" alt="logo de favoritos"></li>
                                    <li class="botoes__item"><img src="/img/Compras.svg" alt="logo compras"></li>
                                </ui>
                                <a href="#" class="botao__ancora">Saiba mais</a>
                            </div>
                        </div>
                </div>
            </div>    
    </section>
    <section>
        <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 1"></div>
                    <div class="swiper-slide"><img src="/img/Liderança.svg" alt="livro 2"></div>
                    <div class="swiper-slide"><img src="/img/Javascript.svg" alt="livro 3"></div>
                    <div class="swiper-slide"><img src="/img/Guia Front-end.svg" alt="livro 4 "></div>
                    <div class="swiper-slide"><img src="/img/Portugol.svg" alt="livro 5"></div>
                    <div class="swiper-slide"><img src="/img/Acessibilidade.svg" alt="livro 6"></div>
                </div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                <div class="card">
                    <div class="card__descricao">
                        <div class="descricao">
                            <img src="/img/Estrelinhas.svg" class="descricao__estrelinha">
                            <h3 class="descricao__titulo">Autora do Mês</h3>
                            <h2 class="descricao__titulo__livro">Juliana Agarikov</h2>
                            <p class="descricao__texto">Anakista de sistemas e escritota, Juliana é especialista em Front-End.</p>
                        </div>
                        <img src="/img/Escritora.svg" class="descricao__imagem">
                    </div>
                    <div class="card__botoes">
                        <ui class="botoes">
                            <li class="botoes__item"><img src="/img/Favoritos.svg" alt="logo de favoritos"></li>
                            <li class="botoes__item"><img src="/img/Compras.svg" alt="logo compras"></li>
                        </ui>
                        <a href="#" class="botao__ancora">Saiba mais</a>
                        </div>
                    </div>
                </div>
            </div>    
    </section>
4 respostas
por Fabio De Moraes
| 51.8k xp | 3 posts

CSS

.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: .5em 0 ;
}

.card__descricao {
    display: flex;
    justify-content: space-between;
    margin-bottom: .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: .5em 0;
}

.descricao__texto {
    font-size: 14px;
}

.botoes__item {
    margin: 0 .5em;
    list-style: none;
}

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

.descricao__estrelinha {
    padding: .5em;
}


@media screen and (min-width: 1024px) {
    .carrossel__titulo {
        font-size: 26px;
    }

    .swiper-pagination {
        margin: 2em 0 3em 0;
    }

    .swiper-button-next, .swiper-button-prev {
        display: block;
    }

    .card {
        width: 40%;
        margin: 2em auto;
    }
}

@media screen and (min-width: 1728px) {
    .carrossel.contanier {
        display: flex;
        margin: 0 20vw 3em 20vw;
        align-items: center;
    }
}
por Ana Paula Lemes Fredrich
| 86.3k xp | 7 posts

Boa noite, Fábio! Não entendi ao certo seu questionamento, pois no curso o card fica abaixo do carrossel, mas caso deseje que o card fique acima do carrossel na página, você deve inverter as sections, deve colocar primeiro a section do card e depois a do carrossel, pois é a ordem da section que irá determinar a ordem da cascata dos elementos.

por Fabio De Moraes
| 51.8k xp | 3 posts

Bom dia, na resolução 1728px, ele fica ao lado do carrossel. Quando eu coloco a classe .carrossel__contanier em display flex, fica disparado, parece que dar um super zoom e não aparece nada mais do carrossel e nem o card.

por Ana Paula Lemes Fredrich
| 86.3k xp | 7 posts

Certo, então no meu caso, a proporção do meu notebook não era 1728px, era 1130px, tenta dar uma conferida em qual é a proporção da sua tela, pois caso o seu dispositivo seja inferior a proporção de 1728px e estiver tentando aplica-la no media screen, ele não lidará como esperado, nesse caso deve lembrar que também será necessário alterar as proporções da margin do .carrossel__container, pois as proporções passadas na aula são para telas acima de 1728px.