1
resposta

Consolidando Conhecimentos

Fiz algumas alterações no css, estava me incomodando o alinhamento não estar igual a o do figma, utilizando line-height resolveu ^^

.card {
    background: var(--branco);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    margin: 1em;
    padding: 1em 1em;
}

.card__descrição {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
    align-items: bottom;
}

.descrição__imagem {
    margin-bottom: 2em;
}

.card__botões {
    display: flex;
    justify-content: space-between;
    height: 2.8em;
}

.botões {
    display: flex;
}


.descrição__titulo {
    color: var(--laranja);
    font-weight: 700;
    line-height: 1.3em;
}

.descrição__titulo-livro {
    color: var(--azul);
    font-size: 18px;
    font-weight: 700;
    margin: .5em 1em 1em 0;
    line-height: 1.3em;
}

.descrição__texto {
    font-size: 14px;
    margin: .5em 1.9em 1em 0;
    text-align: left;
    line-height: 1.3em;
}

.botões__item {
    margin: 0 0 .5em;
}

.botões__ancora {

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

Card feito em html e css do projeto alura books

1 resposta

Oi Robson, tudo bem?

Isso aí! Você é livre para explorar soluções diferentes e codar da forma que achar melhor. :D

Parabéns por ter encontrado essa solução e compartilhado com a gente.

Bons estudos.

Abraço.