Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social links profile

Balint Csizmadiaβ€’ 200

@pencso

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

MikDra1β€’ 6,400

@MikDra1

Posted

  • The @import rule for Google Fonts can slow down page load times. Using a <link> tag in the HTML <head> might be more efficient.
  • Check the contrast between text and background colors to ensure readability. For example, section p with white text on a --Grey-800 background might not have enough contrast.
  • The button's hover state changes text color to black on a green background. Ensure this provides sufficient contrast for accessibility.
  • The width: clamp(20%, 400px, 90%); and height: fit-content; properties on section are generally fine but may need adjustment if content varies significantly.
  • The border-radius: 10rem; on section img creates very rounded corners. Verify this achieves the intended visual effect.
  • The .attribution is fixed at the bottom. Ensure this doesn’t overlap other content or cause usability issues on different devices.
  • The font sizes for section h1 and section p should be checked to ensure they are appropriate for readability across devices.
  • While box-sizing: border-box; is good practice, ensure it's consistently applied to avoid layout issues.

Hope you found this comment helpful πŸ’—πŸ’—πŸ’—

Good job and keep going πŸ˜πŸ˜ŠπŸ˜‰

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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