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

Mobile First Pricing Component with Toggle

P
Shaun Pour 630

@ShaunPour

Desktop design screenshot for the Pricing component with toggle coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I mostly got this working as intended but there are a few little css things that aren't quite the same. The fact that my lines between the various data bits in the cards aren't showing up for no discernable reason for one thing.

Community feedback

@mperezs06408

Posted

Hi! Your solution is good, but you can fix it applying the css in the correct html boxes. For example: I found that you apply the lines bg image over the header but in the original design this is applied over the main background, maybe changing how you set those images supplies by de challenger you solution could get better.

Also, maybe using a ::before pseudoelement in body css you could implement the other image that according to the design should be set on botton-left page position.

For the rest, you're making a great job and continue to practicing! cheers

Marked as helpful

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