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

@YohannesDream

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

@DevonHughesCodes

Posted

Hello @YohannesDream

Your solution looks really good!

Just a quick piece of feedback from something I noticed. On the active state of the element with the box-shadow there is a very subtle hover effect that's super easy to overlook in the design previews provided for the challenge.

Here's a snippet from my stylesheet for reference:

.container { max-width: 400px; margin-inline: auto; background-color: var(--white); padding: 1.5rem; margin-bottom: 2rem; border: 2px solid var(--black); border-radius: 1rem; box-shadow: 10px 10px 0px var(--black); transition: 0.5s; }

.container:hover { box-shadow: 15px 15px 0px var(--black); }

Other than that, great work and Keep it up!

Marked as helpful

0

@YohannesDream

Posted

Hi Devon Hughes, Thanks for your feedback!

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