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

P
Margaux 120

@margaux-works

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'm most proud of effectively using CSS Grid and grid-template to create a well-structured layout.

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

I struggled with absolute positioning causing elements to overlap or overflow (specially the icons in the cards). I resolved this by carefully using position: absolute within the grid to control placement and avoid layout issues.

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

I need help adjusting the unwanted padding and margin on the h1 and h2 elements, which are making the headings appear too narrow and affecting the overall layout.

Community feedback

@qluback

Posted

Really nice job ! I discovered this new CSS rule "grid-template-areas" thanks to you, very interesting to center elements like this.

Otherwise, i just noticed that your colored borders are not exactly like the preview. You can use "::before" in CSS to make your borders straight, using position/overflow rules in your card elements.

Have fun !

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