5
respostas

Espaçamento entre o segundo card destaque e o conteúdo acima dele

Quando o professor copia e cola os códigos dos cards já feitos e atualiza a página para mostrar que todos eles estão lá, o segundo card de destaque não apresenta o mesmo espaçamento que é mostrado no figma e sim um espaço menor. Qual propriedade utilizar para alcançar aquele espaçamento?

5 respostas

Faaala Paulo, tudo beleza??

Manda o código aqui pra eu dar uma olhada...

Saalve meu querido, tudo tranquilo por aqui, espero que por aí também. eis aqui o meu código html e em seguida o css:

        <section class="secao">
            <h3 class="titulo-secao">Vídeos mais vistos</h3>
            <article class="cartao">
                <img src="assets/img/video_1.png" alt="Vídeo" class="cartao__imagem">
                <div class="cartao__conteudo">
                    <p class="cartao__perfil">André Soares</p>
                    <h3 class="cartao__titulo cartao__titulo--secao">HZC - Tudo sem Padrin</h3>
                    <p class="cartao__info cartao__info--tempo">33 minutos</p>
                    <button class="cartao__botao cartao__botao--play" aria-label="Assistir agora"></button>
                </div>
            </article>
        </section>

        .cartao {
width: 100%;
border-radius: 15px;
overflow: hidden;
background-color: #2C343A;
}

.cartao--destaque {
    margin-bottom: 16px;
}

.cartao__conteudo {
    padding: 16px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 16px; 
}

.cartao__destaque {
    grid-column: span 2;
}

.cartao__titulo {
    font-size: 1.2rem;
    font-weight: bold;
    grid-column: span 2;
}

.cartao__titulo--secao {
    grid-row: span 3;
}

.cartao__botao {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0480DC;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 0.9rem;
    justify-self: flex-end;
}
.cartao__botao--destaque {
    width: 100%;
    grid-column: span 2; 
}
.secao {
    display: grid;
    grid-gap: 16px;
}

.titulo-secao {
    font-size: 1.2rem;
    font-weight: bold;
}

Opa.. Eu quis dizer, manda o código TODO.

Faz o seguinte, coloca teu projeto no github e me manda o link...

Cara, não sou muito familiarizado com o git ainda, mas tentei adicionar com o pouco que sei https://github.com/paulofarias11/My-first-git

Eu vi que tu tirou alguns arquivos antes de me mandar...

Coloca o projeto inteiro, do jeito que está no teu pc...

Por exemplo, o projeto tá na pasta 'projeto-flexbox', você vai e faz o git dessa passada aí.