Frontend Mentor | q.r code coding challenge solution

Community feedback

@gabrielmorandi

Posted 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! 😄

q.r code