Skip to content
Submitted about 3 years ago

QR code component solution using HTML and CSS

Terka Codes•40
@terka-codes
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I found it challenging to position the element in the center. I tried using flexbox, and after many failed attempts, I realized I had to set the component's height, so I put it to 100vh. 🙈 Then it all started working.

I was also a bit confused about the box-shadow color because I tried all the colors provided, and none seemed right. So I chose my color. I hope that's ok. 👩‍💻

Also, since this is my first challenge, I wasn't sure how it works. I was a bit confused that there weren't any measurements. But then I realized it's probably included in the PRO version. Isn't it? It seemed hard at first to guess the size of the boxes and fonts, but I think I made it work in the end.

Code

Please log in to post a comment

Log in

Community feedback

  • Yokke•620
    @Jexinte

    Hello @terka-codes,

    Good job.

    When you need to measure the size of content you can use a ruler extension or if you don't know go on Figma it's very useful for those kind of things.

    Marked as helpful

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