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

Noob QR-code-component

henrimh 10

@henrimh

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


The most difficult thing for a 100% noob at CSS, was centering the element vertically. So alternative ways are appreciated. I found a lot of ways to do it though, but nothing was as easy and pretty as this.

Everything else I'm pretty much OK with, but do tell if something's funny.

EDIT: I noticed that the fonts were not working for outside connection!

Community feedback

@shashreesamuel

Posted

Hey good job completing this challenge.

Keep up the good work

Your solution looks great however I think your card needs a subtle box shadow using box-shadow.

In terms of centering an element vertically you can use margin: 0 auto I hope this helps

Cheers

Happy coding 👍

Marked as helpful

1

henrimh 10

@henrimh

Posted

@TheCoderGuru Thanks for encouragement.

Haven't even noticed the drop shadow! Free user atm, so no figma file precision.

0
Oskar 330

@slothmast3r

Posted

I place items in the center by using on parent DOM.

.parent{
   display: grid;
   place-content: center;
//or
  place-items: center;
}

hope it helps!

1

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