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

Mateus 60

@mateusxczw

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@jordancareyui

Posted

You have a typo in the author's name, his name is Greg Hooper, not Greg Hoop 😭.

I think the biggest ways this deviates from the design are the size of the profile picture next to the name, and the small border-radius on the card. In the design, the border-radius is closer to 20px than 10px. Your card also looks a lot taller than the design, but it's likely because Greg's picture wasn't resized. If you open the design in Figma, you can see that it's supposed to be 32x32 px, so something quick like this (along with some adjustment for the padding) should fix the height difference.

.container-perfil img {
height: 32 px;
width: 32 px;
}

Your code is super clean though, I like it. I think we speak different languages, but I could tell what was going on instantly.

Marked as helpful

1

Mateus 60

@mateusxczw

Posted

@jordancareyui Thank you very much for the tips!

0

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