Skip to content
Submitted about 2 years ago

Single price card using CSS grid and bem methodology

develoba•270
@develoba
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

I practiced the use of CSS grid for the three elements of the card. When the view is for mobile, I didn't applied grid, since the three elements are in a single column. However, when the size is for tablet and desktop, the grid applies and the first element takes the full row.

I didn't find any complications on coding this card. However, if you think the code could be improved, feel free to leave a comment!

Community feedback

  • バレンタイン 😈•64,170
    @VCaramesPosted about 2 years ago

    Hey there! 👋 Here are some suggestions to help improve your code:

    • The purpose of the Main Element is to identify the main content of your page. It is not the container of you component. After the main element, you want add a container to wrap you separate components in.

    • The button was created with the incorrect element. When users click on the button they should directed to a different part of your site; that Anchor Element will allow this to happen.

    If you have any questions or need further clarification, let me know.

    Happy Coding! 👻🎃

    Marked as helpful
    0
    develoba•270
    @develobaPosted about 2 years ago

    @vcarames thank for your feedback! I will change this.

    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