This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
images/Screenshot 2025-01-08 at 21-57-05 Frontend Mentor QR code component.png
First I took the design into photoshop in order to use the ruler tool to measure the height and width of the card as well as the elements within it. Once I got those, I started using the eye-dropper tool to fetch the colors, but then I realized that the colors are provided for you in the style-guide.md file. Then it was just a matter of creating a card div, a div for the qr code, and a div for the card text with its own nested elements. Afterwards, I styled it with CSS.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
I need to learn how to measure border-radius and the space between elements with text. Currently, I just sort of try to duplicate them by eye and it's kind of annoying that this is more of an art than a science. I wish I knew about a sure-fire way to get those measurements.
- Website - Add your name here
- Frontend Mentor - @yourusername