Looking to hire developers?
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! 😁
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.
@ApplePieGiraffe
Posted
@phil0452
Thanks for the feedback, phil! 😊
@6ixline
Posted
Hey there 👋,
As always your solution is really great 👌.
I just suggest one thing though:
.toggle-switch__btn{ outline: none; } on the toggle button for the outline that comes whenever it toggle.Hope it's helpful!! Happy coding 😄
@ApplePieGiraffe
Posted
@Devsourabh
Thanks for the feedback, Devsourabh!
I think I'd actually like to keep the outline on the toggle for accessibility reasons. It's useful for when users click the "Tab" button to move around the page (rather than using a mouse to point and click) because it shows which control is highlighted. But perhaps I could consider another slightly cooler :focus state!
Thanks again! 😁
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
