Design comparison
Solution retrospective
I'm really proud that I got the font working (but only on chrome).
What challenges did you encounter, and how did you overcome them?I use Firefox as a default browser, and it took me ... a while to realize that the font only works on Chrome. Made me realize how much stepping back from your code for a bit helps.
What specific areas of your project would you like help with?I'd like help with getting the font to work on Firefox, and with getting the QR component to center itself with different page sizes.
Also any general coding style tips are appreciated.
Community feedback
- @adaviladevPosted 7 months ago
Your solution is quite impressive! I particularly appreciate the subtle shadow effect you've implemented, adding a layer of depth to the design. To enhance its visual appeal further, I would suggest incorporating a slight top margin. This adjustment will help to center the element more effectively on the screen, providing a more balanced and polished appearance overall. Keep up the great work!
Marked as helpful2@CifteliaPosted 7 months ago@adaviladev Thank you for your feedback! Will try adding the top margin!
0 - @DavisnzPosted 7 months ago
Hello, there!
Good job finishing your first challenge, I just did a quick review on your code and I think I found the reason why the font only works on Chrome.
For simplicity purposes, next time you identify a Google Font it's always easier to go into Google Fonts and look for it, in this case: https://fonts.google.com/specimen/Outfit
Once you find it, click "Get Font" and then you can get the code to embed it into your HTML or CSS, and then you can make a call to it in your stylesheet.
For centering your document, use the Flexbox, if you want to learn how to use it I would highly recommend you to play this game: https://flexboxzombies.com/p/flexbox-zombies
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin 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