Skip to content
Submitted almost 3 years ago

QR Code Page Using Flexbox

Nguyen Nguyen•340
@jesuisbienbien
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello, I've tried my best to recreate this webpage. This is my very first project and I have a few things I'm not satisfied with and would love to receive feedbacks on

  1. My container's still bigger than I wanted it to be, what's the best solution to make it smaller?
  2. The blue background of the qr code has 2 shadows which I have no idea what it's called and how to do it. I'm happy to receive feedbacks on any other things too. Thank you!

Community feedback

  • Yahya•80
    @yhas14Posted almost 3 years ago

    regarding the shadow, you can you CSS box-shadow property.

    syntax box-shadow: horizontal-value vertical-value blur and color. example box-shadow: 10px 5px 5px red;

    You can also add another shadow on the same selector ( separate second shadow by a comma) example box-shadow: 3px 3px red, -1em 0 .4em olive;

    You can check the MDN site for further resources. https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

    I would say don't be too concerned with exact proportions if you don't have a premium. I think you did a great job on your first challenge.

    Marked as helpful
    0
    Nguyen Nguyen•340
    @jesuisbienbienPosted almost 3 years ago

    @yhas14 thank you so much for your feedback. I really appreciate it <3

    1
  • Hexer•3,660
    @EmmanuelHexerPosted almost 3 years ago

    Great job overall man. You can also check out mine to see how i did it.

    0
    Nguyen Nguyen•340
    @jesuisbienbienPosted almost 3 years ago

    @Phalcin thank you! just checked yours!

    0
  • Nguyen Nguyen•340
    @jesuisbienbienPosted almost 3 years ago

    Nevermind on the second question 😅 . I just noticed the background comes with the image. Sorry, it's my first coding challenge so I'm kinda lost.

    0

Please log in to post a comment

Log in with GitHub

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