Submitted 15 days ago

QR code component using flex display

newspaceracer•90

@newspaceracer

Preview site View code

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?

It's my first official project trying to replicate an existing interface with html and css only. I think really thinking about the image and breaking it down into areas and labeling the areas in a way that made sense was critical to not get lost.

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

One of the main challenges was centering everything, and once that was centered, how to make sure that the card information and the attribution element were vertically aligned instead of next to each other. The column orientation of the flex attribute was very helpful to learn about.

Community feedback

Jas•140
@ajasmine94Posted 15 days ago
Hi, I think you did well on re-creating the reference image. So far, what I noticed is the site did not seem to have read the font family you used. I also recommend using a fallback font when using font-family. I.e. font-family: 'Outfit', sans-serif.
Marked as helpful
0
newspaceracer•90
@newspaceracerPosted 15 days ago
@ajasmine94 Thanks! I didn't know the fonts weren't working properly because I had downloaded the font in my computer haha. In the latest challenged I tried to make sure the fonts were properly set up!
0
blimytoad•20
@blimytoadPosted 15 days ago
good work looks very similar to the original design but the typeface doesn't seem to be the right one it should be Outfit on Google fonts. they have instructions on fonts.google.com on how to embed their many amazing fonts
1

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