Skip to content
Submitted 7 months ago

QR code component

Justice Sunday Gabriel•10
@zuru122
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

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
    0
    Justice Sunday Gabriel•10
    @zuru122Posted 7 months ago

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

    0
  • Trevor Bryant•90
    @SOLDNOTTOLDPosted 7 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;)

    0
    Justice Sunday Gabriel•10
    @zuru122Posted 7 months ago

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

    0

Please log in to post a comment

Log in with GitHub

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