Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog Preview Card - Responsive Design

@brunohenriquedeveloper

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


If you find any mistake or has anything to advice me, please feel free to make a comment or a suggestion!

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

Fala Bruno!

Seu projeto ficou excelente!

Tenho uma dica pra facilitar bastante sua vida:

  • Vi que você teve um baita trabalho pra criar aquela sombra preta atrás do card. O que você fez mostra que você tem um talento pra resolver problemas, sem dúvidas. Você deu seu jeito e entregou um resultado igualzinho o esperado.

Mas, pra te dar uma ajuda, você só precisava adicionar um box-shadow ao card, desse jeito:

.card {
   box-shadow: 15px 15px 0 black;
}

Ou seja, tudo isso aqui abaixo, pode remover do seu código:

.card::before {
    content: '';
    display: block;
    width: 100%;
    /* height: 100%; */
    background-color: var(--black);
    position: absolute;
    top: 15px;
    right: -15px;
    border-radius: 1rem;
    z-index: -1;

Espero que ajude!

Marked as helpful

0

@brunohenriquedeveloper

Posted

@danielmrz-dev Muito obrigado pela dica, com certeza esse conhecimento me poupará muito mais tempo kkkkkk

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord