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

Pricing page with toggle (and animation!)

@Yintii

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 had a lot of fun doing this one, I used a lot of the tips and new things I learned from the community and this one is done as well! Tell me what you all think. :)

Community feedback

Shashi Lo 1,345

@shashilo

Posted

This was a good job Kele. You sure did forget the background, but you didn't miss any of the other elements. I like the animation of the button. It's nice and smooth.

The details. If you compare the design to your project, it's missing a many details. Here are the items of improvement that I noticed:

  • Annually and Monthly content on desktop is too wide.
  • The entire switch selector should be clickable, not just the circle. This will provide better usability and act like an input button.
  • $ text should be smaller like a subscript.
  • Size of the Professional section is too tall. It's content should align with the other sections as well.
  • Learn More button's should have text-uppercase and they should act as a button with hover state.
1

@Yintii

Posted

Omg I forgot about the background image entirely 🤣😂

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