Skip to content
Submitted 7 months ago

A responsive web page of a blog card preview

lostsoul-akk•30
@lostsoul-akk
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

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

  • Gabriel Crispim•430
    @sirbiel100Posted 7 months ago

    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

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