Skip to content
Submitted about 1 year ago

Qr code Scanenr

Akash kumaraguru•10
@akashkumaraguru
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

  • Lawrence•180
    @lwrncgmbnPosted about 1 year ago

    Hello there 😁

    • You can try to remove the margin-top: 40px in the .main{}
    • And add display: flex; justify-content: center; align-items: center; in the body{}

    With this you can put the card in the center without putting any margin-top or padding-top

    Happy Coding 😁

    1
  • Rebecca Padgett•1,860
    @bccpadgePosted about 1 year ago

    Hello @akashkumaraguru. Congratulations on completing this challenge!!!🎉

    I have few tips that you might be interested in to improve your solution.

    HTML 📃:

    • Make sure you change the <title>Document</title> to <title>Frontend Mentor | QR code component</title> it tells users what the website is about.
    • Every website should have at least one landmark like <main> tag
    • Websites should have one heading tag like a h1 and HEADING TAGS must be used in chronological order. h1-h6

    More info📚:

    Heading Tags

    HTML structured updated below:

    <body>
  <main class="card">
  <img>
  <div class="content">
   <h1>Improve your front-end 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>
</main>
</body>

/* Add this CSS style below  */
.content{
 text-align: center;
}

/*Add the background color on the body */
body{
 background-color: hsl(212, 45%, 89%);
}

    CSS 🎨:

    • The CSS code above implements the DRY acronym which means Don't Repeat Yourself.
    • You don't have to select each element selector and put text-align:center; on it
    • Addingwidth: 30% on the card makes your card component unresponsive.

    Add this code below

    • I am using rem units which makes the website more accessible. Pixels are absolute unit and doesn't scale if users want to change the font size in their web browser.

    Pixels to Rem

    .card{
 max-width: 25rem;
 margin-inline: 1rem;  /*margin-line means left and right*/
}

/* Also you can change your border-radius on image to little smaller*/
.image{
border-radius: 0.625rem;
}
    • Make sure look at the design images and styleguide.md file to get the correct colors and typography.

    Here is my solution if you want to check it out: QR code component

    Hope this helps you and don't hesitate to reach out to me if you have any questions

    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