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

Attempted QR Code Component

Asublime 10

@Asublime01

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


I ran into a roadblock with my CSS, I couldn't find a way to move the text over the image border to get that final look. I tried my best though

Community feedback

@MuyiwaSaka

Posted

Hello asublime.

You can make use of CSS Grid or Flexbox to lay out your html in the manner you want. See the links below for more detail: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

For instance, I would have centered the page by setting the body element's display as grid and then set the place-content tag to have a value of center. It is a good place to start before moving on to the rest of the page.

Also, please read the style.md file in your download and then visit Google fonts to identify the specified fonts and how to copy them into your page.

A suggestion might be to store the specified fonts and colors as CSS variable at the top of your page.

In general, just take each little effect you want to implement separately and work at it till done. Don't get too discouraged if one works and the others don't immediately do.

Hope this was useful. Cheers.

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