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

A responsive web page of a blog card preview

@lostsoul-akk

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?

Having taken the chance to try and complete this challenge is something that I feel proud of.

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

I encountered a challenge in shading the card's background to get the black view as shown in the challenge that was presented.

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

I'd like some help in doing the shade at the back of the card.

Community feedback

@sirbiel100

Posted

Hello!

I see you need help in the shades, so here it goes some advices.

In the 'box-shadow' property you can add 4 values before the color: X position (horizontally), Y position (Vertically), blur and distance the shadow gonna have.

If you see on the preview, the shadow is to the right and to the bottom so you have to change the first two axis (X, Y):

It would be something like: box-shadow: 8px 9px 0 0 black;

Since the box-shadow doesn't have a blur and don't have a huge distance from the box, the two last values are not necessary.

I hope I could help! 😁

Happy coding!

Marked as helpful

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