Submitted over 3 years ago

Four Card Feature Section with CSS Grid

Kalvin Hart• 140

@kalvinhart

Preview site View code

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

With this small challenge I stepped away from BEM and used basic CSS classes. As the challenge was so small, I used element selectors often in my CSS.

My grid is responsive and shows different layouts for desktop, tablet and mobile.

One thing I would change would be to take a mobile first approach.

Community feedback

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted over 3 years ago

Hello, Kalvin Hart! 👋

Nice to see you complete another challenge! 😀 Good job on this one! 👏

I just suggest using a single heading tag for the heading of the site (since it's really a single heading, not two separate headings). You can easily style the two parts of the heading differently using a <span> tag.

Keep coding (and happy coding, too)! 😁

Kalvin Hart• 140

@kalvinhart

Posted over 3 years ago

@ApplePieGiraffe

Thank you for the suggestion, this makes perfect sense. I have now amended this!

Jesús Alejandro Atao• 970

@JesusAtao96

Posted over 3 years ago

Nice Work Kalvin! 🎉🎉🎉

Please log in to post a comment

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