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

Componente de QR que utiliza flexbox

@AlfonsoVidrio

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@AnnyCaroline

Posted

First, your repository README is very well written!

It's also great to use CSS variables for colors. It helps a lot if you need to implement theme switching or when you need to update a color.

I missed the fonts, thought. You can download it from the link at the style-guide.md and import it at the CSS using @font-family.

Also, the card placement doesn't seem right. I can think of two ways of solving this issue:

  • Using display: flex: define the height of the body as 100vh, and make it a flex container, with both align-items and justify-content as center.
  • Using display: grid: define the height of the body as 100vh and make it a grid container. Then, define place-self: center; for your card.

Please, let me know if you need any help fixing the code. My LinkedIn is https://www.linkedin.com/in/anny-chagas/.

1

@AlfonsoVidrio

Posted

Thank you so much, @AnnyCaroline, for your helpful comments! I'm glad to hear that the README is well-written and that you appreciate the use of CSS variables for colors.

I’ve resolved the centering issue based on your suggestions. I implemented the recommendations regarding display: flex, and the card placement is much better now. 😄

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