Social Links Profile Using HTML and CSS

I had this issue as well, where the attribution pushes the component up due to the margin or padding. I believe I fixed it in one of two ways: If you have access to the Figma file, use the precise padding values on the component container rather than centering with flexbox or grid, or make the attribution position absolute with it being centered.

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have a suggestion regarding your code that I believe will be of great interest to you.

FIXING INCOMPLETE TRANSITION

• Currently the Hover effect which has been applied for the links (.buttons) has an issue in transition property, It's simply because of using it with :hover.

 .buttons:hover {
    background-color: #C4F82A;
    color: #141414;
    transition-duration: 1.5s;
    border-radius: 1.75em;
  }

• Due to that whenever the user hovers the component it will smoothly animate but as soon as the user get out of hovering area the component itself will suddenly goes to it's initial state without smoothness as like it's starting state.

• To fix this we need to declare the transition property on normal class, i mean the class where we not linked to any pseudostates like hover, active etc.

• These are the fixed css rules,

.buttons {
  transition: .6s ease;   // For subtle transition
}
 .buttons:hover {
    background-color: #C4F82A;
    color: #141414;
    border-radius: 1.75em;
  }

• Now you will get a smooth-in-out transition effect without sudden drop during hover.

• I would recommend you to read this Transitions Reference article by MDN to get an overview with it's usecases.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

an