Hello, Frontend Mentor community! This is my solution to the QR code component.
I have read all the feedback on this project and improved my code. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.
You are still free to download or use the code for reference in your projects but I longer update it or accept any feedback.
It is so clear that this is pixel-perfect! Awesome. Here is my question, Are there any tools that you're using for pixel perfection? For example, I export the design from Figma or Zeplin then I use Perfect Pixel Chrome Extention although I do like that, the design has some incorrect padding, etc :) Do you have any tips?
Hi Grace,
Html fixed, I was using them randomly but now, I made some upgrades.
I used the anchor tag by Hania B's advice. But I changed it with a button element now. I also corrected the cancel element.
I mostly changed the margin and paddings. For horizontal things, I used margin. For vertical things, I used padding.
All font-size's were changed with rem instead of px.
Added an active page with the hover method.
All advice's helped a lot and has a big improvement to me.
Hey there!
Here I have one more solution.
Well, I don't really like to make this accurate positioning for elements cuz it difficult to make really responsive. Maybe pixel-perfect is cool thing but I don't think it is reasonable.
Anyways challenge is done.
Let me know how I can impove my solution.
Don't be afrait to leave your comment here and see you next time.
Attempt at the responsive design, even though it appears to be kind of correct I still get a feeling that something is off...
Had a problem with a mobile view, was not able to center the mobile picture and make it overflow to the top out of the parent div at the same time. I was able to only achieve either one of those.
Hi, I like your solution!
I think the lights png's come from Figma as wrong because all of us had a problem with it. I cut all lights png via https://www.iloveimg.com/crop-image and applied. Just FYI
have a good day :)!