Skip to content
Submitted over 3 years ago

HTML + CSS grid, BEM naming

Agata Liberska•3,995
@AgataLiberska
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi! I have two only questions about this, really:

  • I used a pseudo element to make the background of one of the divs lighter and it works fine, but now I'm wondering if that was the right decision?

  • I added a box-shadow for the hover and focus states, not sure if it's clear enough, what do you think?

Thanks!

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    Greetings, Agata Liberska! 👋

    Nice job on another challenge (as usual)! 👏

    I'm not sure why you decided to use pseudo-elements to color the background of the box in the lower-right corner of the card component. You can just use the background property to color the background for that div. 😉

    I think an <article> tag might work slightly better than a <section> tag for the card component since it is a standalone element that makes sense without additional context from a parent.

    And you might want to add some border-radius to the two bottom corners of the card component. 🙂

    Keep coding (and happy coding, too)! 😁

    1
  • spymon•90
    @spymonPosted over 3 years ago

    Hi, @Agata Liberska, 👋 well done on this challenge, I think it looks really good overall!

    The box-shadow looks clear enough on my screen. The only thing I would add to the CTA button is cursor: pointer; 😉

    Happy coding! 😊

    1
    Agata Liberska•3,995
    @AgataLiberskaPosted over 3 years ago

    @spymon you're right, I missed that, thank you! 😊

    1

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