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

html and css

@Fikayomi31

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


Having difficulty in getting the background-color for linear gradient and font-size for the design

Community feedback

Account Deleted

Hi Fikayo 👋 Congrats on finishing your first challenge!

The background color is provided in the style guide, you can find it in downloaded files. The hsl value is this one actually: hsl(212, 45%, 89%); you were close :)

Also, you should consider changing the width of the element, it's 325px.

Font size for the paragraph is 15px (also provided in the style guide) and the heading element should be around 22px.

I hope this helps! Keep up 👨‍💻💪

Marked as helpful

1

Account Deleted

Hey 👋,

Great work on this challenge. The QR code is centered and the design looks good overall. If you're looking to get down the linear gradient part I'd recommend checking out the linear-gradient() property. You can read more about it here - MDN. Font-size and other properties like letter-spacing or line-height can help make the text more similar to the original design. Feel free to have a look at some of these resources -

rem & em letter-spacing line-height

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