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

Responsive body design using flexbox

@khalid225

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


What font was used, I tried using "Courier" but it wasn't giving me what I want

Community feedback

@MelvinAguilar

Posted

Hello there πŸ‘‹. Good job on completing the challenge !

I have other suggestions about your code that might interest you.

  • Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.
  • The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.

I hope you find it useful! πŸ˜„

Happy coding!

Marked as helpful

1

@khalid225

Posted

Thank you @MelvinAguilar I will take note of these points and make amends

1
Daniel πŸ›Έβ€’ 44,230

@danielmrz-dev

Posted

Hello, @khalid225!

In the project's folder, there's a file called style-guide. You can check there what was the recommended font-family as well as the colors.

If my memory is correct, the font-family used in this project is Outfit.

I hope it helps!

Oh, and don't forget to import the font from Google Fonts in order to work!

Marked as helpful

1

@khalid225

Posted

Thanks @danielmrz-dev I will correct that

0

@ahmedafsa

Posted

Hello @khalid225, good job in your first challange. keep going!

The fonts and colors are always available in the style-guide.md file within the starter files you can download from the Challange hub page

For this QR code component: the font, its weights and size are:

  • Family: Outfit
  • Weights: 400, 700
  • Font size (paragraph): 15px

You should link it from Google Fonts and then use it as font-family: "Outfit";

Marked as helpful

1

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