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 | Sass, BEM, GRID and Tilt.js

spymonβ€’ 90

@spymon

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


Hello, everyone! πŸ‘‹

I decided to try a CSS grid for this challenge and find out how easy it is to create and position elements in the layout. For all of you who haven't tried the CSS grid, I encourage you to try it out. πŸ’ͺ

To get started with the CSS grid visit A Complete Guide to Grid. 😊

And to spice things up I added a parallax tilt effect on the cards. (Tilt.js) πŸ˜‰

Feedback welcome and appreciated! 😊

Happy coding! 😁

Community feedback

Samuel Palaciosβ€’ 615

@samuelpalaciosdev

Posted

Hello, Spymom! πŸ‘‹

Well done on this challenge!. Your solution looks great and it scales pretty well.

I only suggest a little thingπŸ˜‰:

  • I think that those images, don't need an alt text. In this instance, that's a good thing, as the alt text is currently repeating the same as the card headings, so if you take this tip, use alt="" aria-hidden="true" on your HTML markup.

I really like the way you approach this, and that fancy animations you added are so cool, keep coding ;)

1

spymonβ€’ 90

@spymon

Posted

Hi, @samuelpalaciosdev πŸ‘‹

Thank you for pointing that out! Now I know something new 😊 I did a little research about what alt="" aria-hidden="true" does and implement it in my code.

Thank you! πŸ˜‰

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