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

Denchiks 300

@Denchiks37

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


What are you most proud of, and what would you do differently next time?

Nothing

What challenges did you encounter, and how did you overcome them?

I've had problem with footer position. All I just needed is set my .container to height: 100vh and set correct flex settings.

What specific areas of your project would you like help with?

Nothing

Community feedback

Gren4586 20

@Gren4586

Posted

Really great job on this project, Denchiks! Your solution is very accurate to the design.

One thing you could look into to make it even more accurate is to add the box-shadow changing size when hovering over the text "HTML & CSS foundations". One way you could do it, and how I did it with my solution to this challenge, is to add pointer-events: none; to your .card class in your CSS, then add a style declaration to it with the :hover psuedo selector and have it increase the box-shadow, like so:

.card {
  pointer-events: none
}

.card:hover {
  box-shadow: <add box-shadow parameters as you see fit>
}
1

@Alexandru736

Posted

The design looks pretty well done. However, I don't have access to your implementation. From what I can see there is additional padding on the right side of the container component. Overall, congrats!

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