Skip to content
Submitted about 1 year ago

Qr-Code

Abdul-Basit•50
@Basit787
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

I faced difficulty to make the div into the center using the display flex and its properties, after that I faced little problems to make the padding property for heading and para. Else i didnt find any issue to do such task.

Community feedback

  • Øystein Håberg•10,390
    @Islandstone89Posted about 1 year ago

    Hi. Your project looks good and is responsive. Still, here are some things to improve:

    HTML:

    • Every webpage should have a <main> landmark. Change the <section> into a main.

    • Remove the <header> and the <footer>,

    • The image needs alt text

    CSS:

    • height: should be min-height:

    • Remove all heights and widths

    • Change the font-size from px to rem

    • Remove the border on the card; the background is already white.

    • All of the text is centered, so you only need to put text-align: center on the <body>.

    • I would remove the padding on the image. If needed, increase the padding on the card instead.

    Good luck :)

    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