Skip to content
Submitted almost 2 years ago

qr-code bulit using html, css and js

kareem khaled•210
@kareemIsWebDevelper
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

Community feedback

  • Ahmed Mahrous•980
    @AhmedMahroussPosted almost 2 years ago

    good jop my bro Congrats on completing your first challenge!🎊🍻If you have any questions or need further clarification, feel free to reach out to me. Happy Coding! 🎆🎊

    Marked as helpful
    0
  • Hassia Issah•50,650
    @HassiaiPosted almost 2 years ago

    The language attribute for the html tag is lang= "en" use <html lang="en"> instead of <html lan="en"> to fix the error issue.

    The body has a wrong background-color.

    To center the main on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

    To center the main on the page using flexbox:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

    To center the main on the page using grid:
body{
min-height: 100vh;
display: grid;
place-items: center;
}

    There is no need for a height value in the main, give the img a max-width of 100% instead of a width and height value, give h1 and p a font size of 15px. increase the padding value of the main. padding:15px;

    Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

    Give h1 and p the same margin-left, margin-right and margin-top values and give p a margin-bottom value. h1, p{ margin: 0 15px; margin-top: 15px;} p{margin-bottom:15px;}. Give opacity of 0.5 for the faded color.

    Hope am helpful.

    Well done for completing this challenge. HAPPY CODING

    Marked as helpful
    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