Submitted about 2 years ago

QR challenge newbie

Lazy• 20

@rich4444

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

I end up adding a lot of display flex, and I am pretty sure they were not necessary, but I was trying to do it without looking up on google.
Also I imported the font they said in the project, but couldn't make the font the same bold as the example.
Wasn't sure if the example had a shado under the box, so I place a subtle one just in case

Any advice is welcome I am just starting!

Community feedback

Florencio Britez• 170

@britez13

Posted about 2 years ago

Congratulations on completing this project. I see you are importing Raleway font instead of Outfit font. Also, you can fix your accessibility issue by using h1 tag and not h2 tag.

Lazy• 20

@rich4444

Posted about 2 years ago

@britez13 Oh I see that was my bad, thanks for the help

Saman• 120

@samanthewebdev

Posted about 2 years ago

i love that u tried to make it ur own and post it even if its not perfect like the exact one i also made this project but with the help of tutorial things i learn i can share with u.

u can add img in html or css as a background(in case u dk how to add img and u didn't add here).
when u will add img the heading and paragraph will automatically fix at the bottom u just need to fix a lil bit of their padding,margin and the border radius of img. hope it will help :)

Lazy• 20

@rich4444

Posted about 2 years ago

@saman2620 Thanks it does help. You mean place an empty div, and give it the background image, so I can manage it more easily? I think I saw it in some tutorial I did, but didn't think of apply it. Gonna edit it and try it out, thanks!

Saman• 120

@samanthewebdev

Posted about 2 years ago

@Shioo no in html u can add img in div like

<div class="img" img src""..alt=""> i was talking about css if u just make an empty div in html with a class and don't add any img in it nor anything else leave that div for just img then in css use the name of class and then add background-img with url() and yeah don't forget to mention source in it else it won't work and keep it up :)

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