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

Pure SCSS pricing component with toggle

DFโ€ข 330

@FengDenny

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


What are you most proud of, and what would you do differently next time?

I am proud to only use SCSS to combine :checked pseudo-class with input checkboxes and General Sibling Combinator (~) to create a pricing component with toggle

What challenges did you encounter, and how did you overcome them?

A challenge I came across was using General Sibling Combinator.

It wasn't working as expected because General Sibling Combinator can only be used to select elements that share the same parent.

Thus, I had to refactored my HTML layout to fit this mandatory requirement

What specific areas of your project would you like help with?

At the moment, none.

Community feedback

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