Design comparison
Solution retrospective
even though it was a simple card to implement, I still had to pay attention to the details found in the Figma design to re-produce the design in code.
I also did not know how to center elements inside the container dive, so I googled "how to center an image inside a dive" and used one of the solutions I found online.
Community feedback
- @AtatraPosted 4 months ago
Hi, good job on your first challenge! 🎊
If you struggle with flexboxes (really useful when you want to center something), I would advise you to check out Flexbox Froggy, it's fun and I'm sure afterwards you will understand everything.
As per your solution, here are my recommendations:
- You can apply a background color to your page if you apply it to your <body> (or perhaps even your <main> if you had one). If you do, you will need to set a minimum height to match the size of the viewport, and full width.
- If you want to center the Card (your .container), you need to add to the parent component "flex, justify-content: center" (to center its children on the main-axis - the main-axis is the same as your flex-direction for that same component) and "align-items: center" (to center its children on the other axis).
Hope it'll help, have fun coding! 😊
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