QR Code Component

Please log in to post a comment
Log in with GitHubCommunity feedback
- @correlucas
👾Hi Zizi Aymen, congratulations for your first solution!👋 Welcome to the Frontend Mentor Coding Community!
Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:
Fix the alignment:
} body { min-height: 100vh; background-color: hsl(212, 45%, 89%); font-family: 'Outfit', sans-serif; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
✌️ I hope this helps you and happy coding!
Marked as helpful - @darrenohello
Nice work @zizi-ayman, I just finished this challenge recently too.
I'm a beginner so keep that in mind - but it seems like if a percentage value on the
border-radius
is used, the curve won't be perfectly circular. So if you use a fixed value (like px) the curve should be perfectly rounded.So updating this from
4%
to something like16px
will make it pixel-perfect.div { border-radius: 4%;
div { border-radius: 16px;
I hope that helps and well done.
Marked as helpful
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