Social links profile with Flexbox, custom fonts & hover states
Solution retrospective
I’m most proud of creating a clean and semantic structure with HTML and achieving a fully centered card layout using Flexbox. I also like how the hover states give the design a more interactive feel.
What challenges did you encounter, and how did you overcome them?One of the main challenges I faced was keeping the profile card perfectly centered both vertically and horizontally across all screen sizes. I solved this by using Flexbox on the <body> element combined with min-height: 100vh. Another challenge was setting up the custom Inter fonts (Bold, SemiBold, and Regular) using @font-face. I had to adjust the file paths a few times until the fonts loaded properly across browsers.
Next time, I’d focus more on using relative units like rem for spacing and font sizes to make the layout scale more naturally. I’d also like to improve accessibility by testing focus states more thoroughly and ensuring the design works perfectly with keyboard navigation.
What specific areas of your project would you like help with?Whether my use of spacing (margin and padding) is consistent, or if switching to more relative units (rem, %) would be better than using px.
If my implementation of hover and focus states is accessible enough, especially for keyboard users.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Ardi808's solution.
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