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

Interactive and Responsive Social-Links-Profile

James. 150

@Jimztech

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Just being good on mobile responsiveness.

What challenges did you encounter, and how did you overcome them?

I faced a major challenge on centering the list item on the border. It was quite stressful, but with continuous trial and error I solved the problem.

What specific areas of your project would you like help with?

The mobile responsiveness is not good, it depicts various sizes of its content for various screensize.

Community feedback

@dimitrisdr

Posted

Nice work! I think that you should consider applying transition to your hover states for perfection!

Marked as helpful

0

James. 150

@Jimztech

Posted

Thanks @dimitrisdr, u mean transitions with timing. That would need some js right.

0

@dimitrisdr

Posted

@Jimztech you don't neccecarily have to use js.

Here is an example. You can apply at every li (.one, .two,...) of your ul:

li { .... transition: 0.2s linear; }

And then for your hover effects:

li:hover { background-color: hsl(...); } You can also check the transition property here: https://developer.mozilla.org/en-US/docs/Web/CSS/transition

Hope this will help you!

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