Skip to content
Submitted almost 2 years ago

q.r code

NISHANT KALBURGI•30
@nishantkalburgi
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

  • Gabriel Morandi de Mello•450
    @gabrielmorandiPosted almost 2 years ago

    Hi @nishantkalburgi, good job completing this challenge!

    I have some suggestions for you:

    • Use the <main> tag to define the main content within the <body> in your document or application instead of using <div class="topmain"> to improve site accessibility.

    • In your css file use margin: 0 auto; in your .topmain element so that it is centered horizontally on your page. I recommend the site https://developer.mozilla.org/en-US/docs/Web/CSS/margin to see more about margin in css.

    • To leave the requested color in the design in your css use:

    body {
    height: 100vh;
    background-color: #d6e1f0;
}
    • To use the font defined by the design use google fonts, to place the font on your website, go to your css and put:
    @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
    • Finally, try using the border-radius of the css with a smaller amount of px like for example: border-radius: 5px; to have only the edges of the curved edges as in the design.

    I hope those tips will help you!

    Good job, and happy coding! 😄

    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