Skip to content
Submitted over 3 years ago

QR code component challenge

Tobias•100
@ToHX
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi everyone,

I'm not completely happy with my card-shadow. I did use a website (https://getcssscan.com/css-box-shadow-examples) for that but you can see that on the QR Code img it doesn't fit.

Apart from that, I was this time much faster in building my solution as this is my 2nd project. :)

Code

Please log in to post a comment

Log in

Community feedback

  • Abhik•4,820
    @abhik-b

    👋 Hello Tobias , Your solution is nice & responsive , Well Done 🤩

    However if you try the below mentioned suggestions your great solution can look greater :

    • to place the card at the center of the screen use the below code on body :
    display: flex;
flex-direction: column;
 align-items: center;
 justify-content: center;
    • give max-width:330px (use px value according to your choice) so that card does not touch edges as mentioned by Jessica
    • I played with the box-shadow & increased the opacity & value of X, changed the value of Y & reduced the blur & I am happy with the final result rgb(17 12 46 / 25%) 12px 24px 48px 0px;

    Other than that nicely done & Please keep contributing amazing solutions like this 👍

    Marked as helpful
  • P
    Jessica•880
    @perezjprz19

    Hi ToHX!

    I think your shadow looks fine based on the challenge comparison. However, the card does touch the edges of my phone screen so I can't really see the shadow. Some margin could help with that.

    Marked as helpful
  • Naveen Gumaste•10,420
    @NaveenGumaste

    Hay ! Good Job Tobias

    Keep up the 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