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

Responsive solution with basic flexbox

@fvaldes0109

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any suggestion is welcome

Community feedback

@pikapikamart

Posted

Hey, awesome work on this one. Layout in general looks great and it is responsive.

kens_visuals already gave great tips on this one, just going to add some suggestions as well:

  • Avoid using id attribute as a selector in css because it is a bad practice due to css specificity. Use class to target elements.
  • The text after the h1 could have just used p tag since the h1 is enough to describe the section.
  • When wrapping a text-content do not just use div, span to wrap it, use meaningful element like a p tag if it just a regular text or heading tag if it is an heading.
  • aside is not really suited on this one. Normally, you would use aside when there are certain links, controls that are placed somewhat on side of the site.

Aside from those, great job again on this one.

Marked as helpful

1
P
Ken 4,915

@kens-visuals

Posted

Hey @fvaldes0109 👋🏻

I have a quick tip to help you position the item in the center of the body.

  • Add this snippet of code in body and you're good to go:
body {
    background-color: hsl(204, 43%, 93%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
  • Also, just to make your :hover state more complete, add cursor: pointer; to it.

I hope this was helpful 👨🏻‍💻 other than that, you did a great job, keep it up. Cheers 👾

Marked as helpful

1

@fvaldes0109

Posted

Thanks! That's a really nice way of centering the card

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