Submitted 2 months ago

QR Code Component using html and css

faekhatami• 540

@faekhatami

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Community feedback

AriyanSep0_0• 330

@ARiYaNSEp0-0

Posted 2 months ago

Hello @faekhatami 🙋‍♂️. you did a good job on this challenge your result is pretty close to main design and here are some changes and improvements you can apply for getting closer to design and also some best practices maybe :

on this design there is no changes on mobile and desktop so for example there is no need to change font size on different breakpoints (font-size on heading is static 22px)
use accurate length values for spacing (padding, margin) typography and ... from figma file

good luck.

faekhatami• 540

@faekhatami

Posted 2 months ago

yeah you are right i think that was redundant. thank you for your comment i will consider them in my next practices! 🙋🏻‍♀️🌸 @ARiYaNSEp0-0

KarolinaR98• 150

@KarolinaR98

Posted 2 months ago

This comment was deleted 2 months ago

AriyanSep0_0• 330

@ARiYaNSEp0-0

Posted 2 months ago

@KarolinaR98 Hi. we have a lot of centering methods in css and using flex and 100vh on body is one of them which mostly for single cards or components like this and there is no issue on that. but I am sure text-align : center not gonna work for putting card component on center of the page. and I think everything is simple on this challenge both design and implementation so ....

Please log in to post a comment

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