Skip to content
Submitted over 3 years ago

Four card feature section | Sass, BEM, GRID and Tilt.js

spymon•90
@spymon
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

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
    @samuelpalaciosdevPosted over 3 years ago

    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
    @spymonPosted over 3 years ago

    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

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