Submitted about 2 years ago

HTML CSS Only

HASAN KAMEL• 10

@HasanWael

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

Solution retrospective

It was easy but I just found one difficulty when I was centering the white card or the <div> that carries the qr, But I found the solution by searching in google.

I am not sure about the centering of the white card or the <div> that carries the qr.

Community feedback

Account Deleted

Hey Hasan, congratulations on completing the challenge! You did a great job 😉

Let me give you some little tips for optimizing your code:

add main tag and wrap the card for improve the Accessibility
add descriptive text in the alt attribute of the images
centering a div with absolute positioning is now deprecated, it uses modern css like flexbox or grid
remove all margin from white-card class
use flexbox to the body to center the card. Read here -> flex guide
after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
instead of using px use relative units of measurement like rem -> read here

Hope this help! Happy coding 😁 by Travolgi

Marked as helpful

HASAN KAMEL• 10

@HasanWael

Posted about 2 years ago

@travolgi I think now the code is a lot better, take a look.

Account Deleted

@HasanWael now it's much better! Great work keep it up :)

Satyam Jha• 400

@satyammjha

Posted about 2 years ago

Great solution @HasanWael You can center the QR by using align-item: center to the CSS of the div containing the QR. Hope it will help you.

Marked as helpful

HASAN KAMEL• 10

@HasanWael

Posted about 2 years ago

@satyammjha Thanks, that worked!

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