Responsive toggle component with only CSS and HTML

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Elaine, congratulations for your new PIXEL PERFECT solution!

  Every time you post something I feel bad because I never reach a pixel perfect solution!

  This is something really beautiful to see when scroll the slider and see the two images matching!

  Everything is so responsive and nice to see when you scale down the window, how the text scales and the cards change the layout that I've nothing to say. Its already done I guess. Congrats! 🤘

  👋 Happy coding!

  2

  ---

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @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!

  0

  

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  @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.

  Marked as helpful

  1

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @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.

  1
• 

  CyrusKabir•1,885

  @CyrusKabirPosted about 2 years ago

  Hello Elain, you did a good and clean job on this challenge as always. really good. I just want to know why you don't use some good features in sass when you are using sass. I mean using some loops for generating custom props or utility classes or some @mixins and placeholders.

  1

  ---

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @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 😊

  1

  

  CyrusKabir•1,885

  @CyrusKabirPosted about 2 years ago

  @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.

  0
• 

  Pretty Kunene•690

  @nonozaPosted about 2 years ago

  Hi @elaineleung , great job!! You are always an inspiration to me. I love that the structure of your code and it readable . :) .

  0