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

QR Code Component

RC Kashyap 120

@rckash

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


What are you most proud of, and what would you do differently next time?

I am proud to have built this project after learning how to properly use CSS units. This is my best work so far and I can't improve on it yet.

What challenges did you encounter, and how did you overcome them?

I did not know how to apply proper margins and paddings, I could not center the card as well. I searched YouTube for helpful tutorials until I stumbled upon Kevin Powell's channel.

What specific areas of your project would you like help with?

I do not need help as I have figured it out with the help of online resources. This is a simple project as well.

Community feedback

ha308ing 70

@ha308ing

Posted

nice work!

solution screenshot has extra strings, but live solution as by design.

if to look closely there is a shadow under the card, to add shadow box-shadow css property is used (syntax: box-shadow: <x> <y> <blur> <spread> <color>), like:

.my-card {
    box-shadow: 0 25px 25px 0 rgba(0, 0, 0, 4.77%);
}
1

RC Kashyap 120

@rckash

Posted

@ha308ing thank you very much! I can see it now.

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