Skip to content
Submitted 5 months ago

qr code component card

nekefer•200
@nekefer
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

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

The way I set the radius of the QR image. I remember there are some methods to achieve the best radius based on the radius of the parent and the distance between the parent and child boxes.

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

How to use background-size in the background syntax? I couldn't figure it out.

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

background syntax. how can I use background-size inside of background without having error.

Community feedback

  • Stephanie Dennehy•220
    @Stephanie-DennehyPosted 5 months ago

    I’m curious why you made the image a background rather than inserting it into the html. I think that would fix the background issues you’re having. You could directly control the image size as an html element.

    0
    nekefer•200
    @nekeferPosted 5 months ago

    @Stephanie-Dennehy I start with that and I had a problem and I just went with background syntax. I will retry to do it that way. Thanks

    0
    Stephanie Dennehy•220
    @Stephanie-DennehyPosted 5 months ago

    @nekefer

    Here is how I laid mine out if you want some ideas. I put the image inside a container so I could adjust the size of the image within the container for more responsive design.

    <div class="card"> <div class="qr__container"> <img src="/images/image-qr-code.png" alt="qr code to scan"> </div> <div class="card__text"> <h1>Improve your frontend skills by building projects</h1> <p> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p> </div> </div>
    Marked as helpful
    0
    nekefer•200
    @nekeferPosted 5 months ago

    @Stephanie-Dennehy Ok, got it. I will implement that later.

    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