Skip to content
Submitted over 3 years ago

Pricing Panel Challenge, HTML & CSS

Laura Stevenson•50
@laurstevenson
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Still grasping responsive designs, mobile version still needs some work (troubles with border-radius). Any feedback would be appreciated!

Code

Please log in to post a comment

Log in

Community feedback

  • Anosha Ahmed•9,300
    @anoshaahmed

    To get rid of the accessibility/HTML issues shown in your Report:

    • wrap everything in your body in <main> ... OR use semantic tags ... OR give role="" to the direct children of your <body> ... Click here to read more
    • have at least one <h1> in your code

    Great job! :)

  • Lucas Weidas•1,350
    @lucasweidas

    Greate job, Laura!

    To fix the "main" landmark problem, you need to wrap the "div.panel" with the "main" tag.

    To fix border radius trouble, change the "@media (max-width:500px)" to "@media (max-width:899px)", and the two class ".pricing-plan" inside them, to:

    .pricing-plan:first-child { border-radius: 10px 10px 0 0; } .pricing-plan:nth-of-type(3) { border-radius: 0 0 10px 10px; }

    Sorry for my bad english :)

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