Skip to content
Submitted 3 months ago

QR-code solution using css grid, box shadow and flexbox

Sulaimon Abdulrahman•10
@Abdulrahmanololade
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'm proud of the fact that i was able to get the css styling in one go.

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

The challenge i encountered was when i had to add the background color. I had to check meny times just before i can get the something close to the one in the image given.

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

I'm not really sure if there is any where in the code where it need to be improved and if there is one, then i'm definitely willing to learn more.

Community feedback

  • Pickle•220
    @Augurk66Posted 3 months ago

    Nice work Sulaimon! You can find the background colour in the style-guide.md file. Which is in the package you have downloaded to start this project. I used the "body" tag to give the background the desired colour. The colour for this background is hsl(212, 45%, 89%).

    body { background-color: hsl(212, 45%, 89%); }

    In the style-guide you can also find the specific font of this component. This component uses Google Fonts. You can add those by using the @import url('https://fonts.googleapis.com/thisisanexamplelink') tag in your css.

    However using CSS within your HTML file is handy, I strongly recommend you to use a separate .CSS style file. With this method you separate your languages and it makes the code more readable.

    Keep it up!

    Marked as helpful
    1
    Sulaimon Abdulrahman•10
    @AbdulrahmanololadePosted 3 months ago

    Thank you very much for the feedback. I really appreciate it.@Augurk66

    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