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

single price grid component using HTML and CSS

@wicaksono37

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


it seems I still can't get the greyish blue color right,,

Community feedback

Riley 260

@rileydevdzn

Posted

Hi! Congrats on completing the single price grid component!

That bottom right "Why Us" portion (I'm guessing that's the one you meant?) isn't a single color, it's actually two background colors blended together, which might be why you feel it's a bit off color-wise. Are you familiar with the CSS property mix-blend-mode?

If not, there's another challenge, stats preview card with an image and single background color that's good practice to play around with mix-blend-mode (hint: you'll also need opacity). This single price component challenge is slightly more difficult application-wise because you've also got the text elements to worry about.

Quick note about semantics, you've got multiple <h1> elements in your build. A page should only ever have one h1. The other headings (monthly subscription, why us) should be h2's. Good job incorporating semantic elements in this build!

Hope this helps and happy coding!

Marked as helpful

0

@wicaksono37

Posted

@rileydevdzn thanks a lot.. what you've said about <h1> is new information to me !

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