1
resposta

[Dúvida] Minha Solução

HTML

<section class="card__autora">
        <div class="card__textos">
            <div class="card__textos-imagens">
                <img src="assets/Estrelinhas.svg" alt="Nota da autora no mês">
                <h3 class="card__titulo">Autora do mês</h3>
                <h2 class="card__texto-destaque">Juliana Agarikov</h2>
                <p class="card__texto-secundario">Analista de sistemas e escritora, Juliana é especialista em Front-End.
                </p>
            </div>
            <img src="assets/Perfil-escritora.svg" alt="Foto da autora do mês" class="card__imagem-autora">
        </div>

        <div class="card__icones">
            <div class="icones">
                <img src="assets/Favoritos.svg" alt="Favoritar autora">
                <img src="assets/Compras.svg" alt="Adicionar no carrinho de compras">
            </div>
            <h2 class="card__texto-saiba-mais">Saiba mais</h2>
        </div>
    </section>

CSS

.carrossel__mais-vendidos {
    text-align: center;
}

.titulo__mais-vendidos {
    background-color: var(--branco);
    width: 100%;
    padding: 1em 0em 0.5em 0em;
    color: var(--laranja);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}

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

.card__textos {
    display: flex;
    justify-content: space-between;
}


.card__titulo {
    color: var(--laranja);
    font-weight: 700;
    padding-top: 0.4em;
}

.card__texto-destaque {
    color: var(--azul);
    font-size: 18px;
    font-weight: 700;
    padding: 0.5em 0;
}

.card__texto-secundario {
    font-size: 14px;
    width: 88%;
}

.card__imagem-autora {
    height: 9.5em;
}

.card__icones {
    display: flex;
    justify-content: space-between;
    margin: 2em 0 1em 0;
    align-items: center;
}

.icones {
    display: flex;
    gap: 2em;
}

.card__texto-saiba-mais {
    background-color: var(--laranja);
    text-align: center;
    padding: 1em 1.8em;
    color: var(--branco);
    font-weight: 700;
}

Vi que algumas pessoas usaram lista não ordenada para os ícones de compra e favoritos, eu, porém, não havia pensado isso na hora e construi apenas com flex-box mesmo, e deu certo!! Gostaria de saber se essa minha solução foi correta?

1 resposta

Opa Bruno, não existe exatamente um método certo e sim boas práticas, mas no seu caso foi uma boa alternativa, muitos desenvolvedores usam até outros métodos para isso, o que importa é pegar o código de deixar ele funcional para o usuário, responsivo e de acordo com o solicitado.