Skip to content
Submitted 12 months ago

QR code solution with basic html css and flexbox

Radish Sound•10
@RadishSound
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

The design seems very close to the example thanks to the figma design. I use all the variable from the design.

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

I was challenged by a probleme of padding with the text section. I didn't understand why the width of the container change while i fixed it. With few research on internet, i find the solution with box-sizing. Also, I did'nt see that the width and the height were wixed in the figma design so I didn't think to fixed it for the container.

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

All

Code

Please log in to post a comment

Log in

Community feedback

  • Daniel Gómez-Sánchez•70
    @magicDGS

    Looks quite nice, congratulations!

    Some comments and suggestions just to add something more:

    • In the design screenshot, it looks like there is a shadow missing below the card - adding it would be a nice thing too (not sure if it is in Figma, as I am not using it)
    • A nitpick comment: looks like the image border-radius is a bit too much compared to the design screenshot
    • Add classes to style instead of directly into the elements
    • Wrap the image in a container to ease the styling and prevent some layout shifts
    Marked as helpful
  • Grigori Schneider•20
    @GrigoriSchneider

    Your CSS aligns well with the Figma files. The HTML is well-structured. Good work!

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