Boa noite, decidi treinar meu grid que esta meio enferrujado nesse desafio da instrutora Monica, fiz sozinho após muitos erros.. apaga código, escreve código até chegar nesse modelo, os botões de favoritos e a sacolinha ficaram meio distantes mas de resto acho que ficou parecido. Ainda não satisfeito com meu código, queria saber se alguém tem uma maneira mais simples usando o Grid para chegar no objetivo, porque mesmo eu conseguindo parece que ficou com cara de gambiarra (ou não mas me falem kkk). Obrigado desde já!!!
HTML:
<article class="cartao">
<div class="cartao__conteudo">
<div class="cartao__conteudo-texto">
<span class="cartao__estrelas"></span>
<h3 class="cartao__titulo">Autora do Mês</h3>
<h2 class="cartao__perfil">Juliana Agarikov</h2>
<p class="cartao__descricao">Analista de sistemas e escritora, Juliana é especialista em Front-End.</p>
</div>
<img src="img/perfil-escritora.svg" alt="" class="cartao__imagem">
<ul class="botao">
<li class="botao__item"><img src="img/Favoritos.svg" alt=""></li>
<li class="botao__item"><img src="img/Compras.svg" alt=""></li>
</ul>
<a href="#" class="botao__link">Saiba mais</a>
</div>
</article>
CSS:
.mais-vendidos__titulo {
font-size: 18px;
font-weight: 700;
color: var(--laranja);
text-align: center;
text-transform: uppercase;
}
.cartao__estrelas {
background: url("../img/Estrelinhas.svg");
display: inline-block;
width: 91px;
height: 15px;
}
.cartao__conteudo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5em;
align-items: center;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
margin: 1em;
padding: 1em;
}
.cartao__conteudo-texto {
display: grid;
gap: 1em;
}
.cartao__titulo {
font-weight: 700;
color: var(--laranja);
}
.cartao__perfil {
font-size: 18px;
color: var(--azul);
font-weight: 700;
}
.cartao__descricao {
font-size: 14px;
color: var(--azul);
}
.botao {
display: grid;
grid-template-columns: auto auto;
}
.botao__link {
background: var(--laranja);
padding: 1em ;
text-decoration: none;
text-align: center;
font-weight: 700;
color: var(--branco);
}