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?