Design comparison
Solution retrospective
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
- @ajasmine94Posted 6 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 helpful0@newspaceracerPosted 5 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 - @blimytoadPosted 6 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
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