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

Solution for QR Code Component Challenge

Nathasha 150

@NathashaR1997

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


Hey Everyone, I have completed the QR code component challenge.

Check out my following article, where I have briefly explained the steps I have followed to complete this challenge.

https://uxplanet.org/challenge-009-qr-code-component-535916bbd967

Thank you for checking this out, and feel free to leave your feedback and thoughts!! Any feedback and tips are welcome.

Many Thanks! Nathasha 😊

Community feedback

@Jorggyh

Posted

@NathashaR1997 good job

  • The font size p is 15px, you need to shrink the side padding to fit
  • The color of h1 is: hsl(218, 44%, 22%) I think need shrink the side padding to fit too
  • Try put box-sizing: border-box; inside of *
  • Border radius is closer to 20px
  • You can add inside of the body, to align center vertically (remove margin-top from .main-container)
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;

If something breaks and you have difficulty, you can look how I did mine, maybe it helps to think in a different way

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