Skip to content
Submitted over 4 years ago

Pricing Component With Toggle And CSS Animations

ApplePieGiraffe•30,525
@ApplePieGiraffe
A solution to the Pricing component with toggle challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey, everybody! 👋

This was another fun challenge that I quite enjoyed! 😊

I focused on trying to make my class names understandable and organized and I tried to increase the accessibility of the toggle by sandwiching it between two labels and adding the aria-pressed attribute to it (but IDK if that really helps or just makes things slightly more confusing)! 🙃

I also added a cool little sliding animation to the left and right pricing cards in the desktop layout. 😎

Feedback is welcome and appreciated!

Happy coding! 😁

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Account deleted

    Apple, I love the sliding animation when responding to a desktop screen.

    The container for the price plans. I'd suggest giving this a max width and/or switch to mobile view for the plans, considering their width. Shrinking the browser from desktop to tablet screen, the price plans end up touching the ends of the browser window.

  • Sourabh Singh•165
    @6ixline

    Hey there 👋,

    As always your solution is really great 👌.

    I just suggest one thing though:

    • You should add this .toggle-switch__btn{ outline: none; } on the toggle button for the outline that comes whenever it toggle.

    Hope it's helpful!! Happy coding 😄

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