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

Responsive blog landing site using HTML and CSS

@Mtrxxo

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?

I would really appreciate it if you all could help me view the page and give me feedbacks.

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

I encountered a challenge with the sizing of the section.

Community feedback

@ArryBlack

Posted

Hi Ibrahim, great work on the layout. I've a few suggestions.

  1. Although the card looks good already, you can reduce it's width a little bit.
  2. Instead of using border tags to achieve the shadow, you can just add a box-shadow property. You can read more about it here.
  3. You can use the :hover pseudo class to add the 'active-state' required in the design, by making changes to the box-shadow property mentioned in the previous step.
  4. Maybe increase the vertical padding of your card, a tad-bit.

Marked as helpful

1

@Mtrxxo

Posted

Thank you, I will do as you said @ArryBlack

1

Account Deleted

Love it all the best man!😍

1

@Mtrxxo

Posted

Thank you so much @Vamerlen

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