Submitted 5 months ago

QR code component

Justice Sunday Gabriel• 10

@zuru122

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

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

I am happy that I've started a challenge that will shape my future. I am happy that I understands how div works as a container and how to style content or set a layout using css

For now, I don't know what to do differently, maybe a more efficient way of solving my problems.

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

I strugled trying to predit the size of the parent container so as to fit the prototype image that I am to replicate. yes, I was able to achieve that with the plus and minus lol...

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

I didn't add shadow yet, I haven't learnt that one but I will come nack and effect the changes once I understand how shadows works

Community feedback

Account Deleted

This is just a tiny detail. You could take another look at the included "style-guide.md" file. Only the background of the card matches with the provided colors.

Since the colors in "style-guide.md" are supplied in HSL format, the easiest might be to use that format instead of HEX, just as you did for the ".container".

If this was a stylistic choice, you can ignore this feedback!

Marked as helpful

Justice Sunday Gabriel• 10

@zuru122

Posted 5 months ago

Okay, thank you. I was actually working with the color code from the figma file. I will effect the changes.@Yoshikora

Trevor Bryant• 90

@SOLDNOTTOLD

Posted 5 months ago

You can adda box shadow by using the the box-shadow property. For example, you could have a class called .box and tin your stylesheet add the box-shadow property. An example would be

.box { width: 200px; height: 200px; background-color: #4CAF50; margin: 20px; box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.5); }

Also for reference: (box-shadow: h-offset v-offset blur spread color;)

Justice Sunday Gabriel• 10

@zuru122

Posted 5 months ago

@SOLDNOTTOLD Thank you sir, I do appreciate your feedback. I will effect it and understand how it works

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