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

rhuann77 30

@rhuann77

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

P
beowulf1958 1,170

@beowulf1958

Posted

Congratulations on completing this challenge. Project looks great.

I do have a few suggestions, if you are interested. There is a lot of repletion in the code. One of the principles of good practice is called DRY (don't repeat yourself.) Grouping all the styles into a single class makes for clean, readable code that is easy to maintain.

You have several elements with color: #ffffff;. Instead of reaping the text color on each element, move the text color to the ".container" class, and the child elements will inherit the color from the parent. This is the power of the cascade in "Cascading Style Sheets."

Each button has two classes (and a hover state.) This is redundant; move the background to the ".button" class, and add a style for button hover state. Try this:

      .button:hover {
        background-color: #90d332;
        color: #141414;
      }

(the font color is supposed to change to dark gray in the design.) Also, I noticed that you used 'Ariel' instead of "Inter". You can add a Google font to you website using @import :

@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');

Hope this helps.

Marked as helpful

0

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