Responsive toggle component with only CSS and HTML

@correlucas Thanks Lucas! Well, it's almost matching, I missed changing the padding 😅 but yes, thank you for the compliments as always and for checking out my work! 😊

I think your work has its own style, so I don't think being pixel perfect matters as much, but it's getting pretty close to pixel perfect too!

@elaineleung I saw that your box-shadow is slight different from the challenge design, one is black the other is kinda purple (its really hard without the Figma file). In this case you can use Figma to create the shadow design inside a rectangle just to see how it looks and then drop the shadow css code into your component. I did this purple shadow for you box-shadow: 5px 5px 15px 5px rgb(86 75 229 / 13%); see if you like it. I'm a box-shadow enthusiast as you can see hahaha

Keep it up.

@correlucas Yes, I saw it after I uploaded my solution! Thanks for catching that, and I can tell you're a box-shadow enthusiast (I actually thought of you when I was doing the box shadow 😂)

What happened was, the style guide didn't list out the purples as one of the colors; it had only neutrals and also a gradient color which included two purples, and so at first I just used the neutral colors on the list. It was only later that I made the gradient colors part of my variables, but I forgot to change the box shadow, so I'll do that later when I make my updates.

@CyrusKabir Thanks for checking out my work and for your kind words, means a lot! 🙂

I'm impressed that you brought up this point, as this was actually a decision I made while working on the Junior level projects, where I wanted to have a low barrier level of entry for beginners checking out my repo. I also wanted to keep things simple for me when referencing my own work and didn't want to have to sort through three different folders to find something; that's why I keep all my code on just one file, and all my working files are at the top level in the directory instead of in folders for a similar reason. Also I wanted to make things readable for someone who doesn't know Sass and can still navigate through the code without feeling overwhelmed (I even considered using just CSS and no Sass at one point). More importantly I wanted to see what's the simplest setup I can use to build these projects; even systems like BEM I've been using them very sparingly, and I keep my stack the same almost every time. However, I also decided though that once I complete a challenge, I can do another version of it where I use what I want, so yes, I'm sure when that happens I'll bring in all the bells and whistles 😊

@elaineleung thanks for your great explanation. actually I had this idea too. you know handling and solving these challenges with different approaches or different techs , etc. this is very helpful. good luck elain.