Pricing component with toggle

Greetings, Anthony! 👋

Good job on this challenge! 👏 Your solution looks good, is responsive, and the toggle-switch works rather well! 👍

It's nice that your toggle-switch is keyboard-accessible, but it might be worth using a few more semantic HTML tags from the start (rather than building the entire component out of div elements). For instance, you could perhaps use a button element or a checkbox to make the toggle-switch—both of which are a little more inherently meaningful. Here's a great solution for this challenge from Grace that focuses on accessibility that you might be able to learn a thing or two from. 😉

And small tip for the design of the solution—it might be worth allowing the container that holds the background color and images for the site to expand to fill up the entire area of the viewport. That way, there won't be any empty white space to the sides of the design on extra-large monitors.

Hope you find those one or two tips helpful. 🙂

Keep coding (and happy coding, too)! 😁

Thank you for your feedback. I agree with what you said that it would be good to use a semantic element like a button instead of making toggle from a div. And I had tried using a button, but had an issue. When you click on a button element, there is a movement of the element when you click it, and the way I created my toggle using pseudo class to add the circular part of toggle did not move along with rest of button, and it looked strange, so I had to switch back from button to div. I could not figure out how to disable the button's default animated effect when clicked on.