Skip to content
Submitted 7 months ago

QR Code Page using React and CSS

react
Robert Horosewski•310
@horoserp
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 thing I am most proud of was how I was able to use the Figma files to closely match the design.

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

It had been a while since I used Figma files, so getting reacquainted with them took a few minutes.

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

If anybody can help me make the box-shadow more like the design, I would really appreciate it.

Code

Please log in to post a comment

Log in

Community feedback

  • benssssss•380
    @benssssss

    Hello, your code is clean, but you could make some changes

    To make the shadow more like you need use the property spread radius (-20px) and add more blur (50px)

    .container {
box-shadow: 0 1px 50px -20px #00000040;
}

    You could put the text (<p> and <h1>) in a <div>, and separate the <img> and this <div> using gap: ; and display: flex; in the .container,

    .container has the same background-color setted in it 2 times,

    use margin: top; on <p> instead padding to separate it from <h1>

    Marked as helpful
  • P
    zkmsz•100
    @zkmsz

    This comment was deleted 6 months ago

    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