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

Four card feature section

shadazls 200

@shadazls

Desktop design screenshot for the Four card feature section 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 am proud of my use of grid, it was my first time and I think I did pretty well. However, next time I hope to get better at using grid because it's still messy.

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

I had trouble positioning the 4 cards as I wanted, and I also had trouble reproducing the shadows of the cards exactly as they appear on the design. I solved the positioning problem by experimenting with my code and rereading a course on css grid.

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

I would like help mainly with grid, but also with the quality of my code. Generally speaking, I would not say no to any help to improve.

Community feedback

6xg0d 190

@6xg0d

Posted

Hi! in the case of the shadows, i think "box-shadow: 0px 5px 15px rgb(0 0 0 / 10%);" would look much closer to the shadows in the final design. making the shadows lighter in this case so isn't too dark. Also, you can use tools like boxshadow cssmatic. Hope this helps.

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