Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Css Block styles

@hrithik0

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


little stuck between how to use the google fonts and when to use position property of css and etc.

Community feedback

Francesco 270

@FraCav99

Posted

Hi Hrithik, hope you're doing well!

Some things to point:

You've probably forgot to select the font weight in google fonts site. Here the correct import: @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

You are using google fonts in your body yet, since you've set font-family on your body element.

An error is here:

body {
  ...
  font-weight: 400, 700;  /* <-- only one value is allowed. */
}

Don't put font-weight property on the body element, otherwise some elements (for example <p>) can have the value of the font weight you've specified.

Only use it where you need a different weight. In your case you don't even need to use them, since browser by default applies font-weight automatically based on the element

(by default <p> have a weight of 400 and <h1> a value of 700).

For positioning, I suggest you to watch this video, is very helpful.

If you have doubts, don't hesitate to ask! ;)

Hope this can be helpful.

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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