1
resposta

Cumprindo o desafio treinando o grid!!

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);
}
1 resposta

Oi Frank, tudo bem?

Primeiramente parabéns por não desistir e continuar mesmo depois dos erros! Isso é bem importante para conseguirmos consolidar nosso conhecimento. E gostei muito do que você fez! Não acho que foi gambiarra, parabéns de novo!

Espero que você esteja gostando da experiência de aprendizado.

Um abraço e bons estudos!