Submitted 3 months ago

QR Code using CSS styles

Jose•170

@josenegrete123

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Most proud on how I figured out the implementation of including a background image. Next time I would try to figure out the sizes of each aspect of the project to better work on it.

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

The main challenge was just getting overwhelmed at first. I overcame it by taking it step-by-step, figuring out how each element should work and how to classify them as well.

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

I would like help with figuring out the size of the body element. I had to eyeball the size and would love to see if there's an easier way to find the right dimensions. Also would love help on the background image and how to implement it and have it fit into the content box.

Community feedback

MacRay-lab•40
@MacRay-labPosted 3 months ago
firstly ,since the padding between the image is not equal to tackle that .add a reset that should solve that *{ box-sizing: border-box; } there is no perfect way of getting a perfect size without using the figma design all has to be with eye study and check.

lastly instead of making the qr code a background image why not iin your html make i an image element like
<img src ="images/image-qr-code/">
you can just follow the image part to obtain it .i think the image will be clearer and better.

please 🙏 if y input helpful kindly mark as helpful
Marked as helpful
1

Please log in to post a comment

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