Skip to content
Submitted 4 months ago

Interactive and Responsive Social-Links-Profile

James.•220
@Jimztech
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

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

  • Dimitrios Dristellas•590
    @dimitrisdrPosted 4 months ago

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

    Marked as helpful
    0
    James.•220
    @JimztechPosted 4 months ago

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

    0
    Dimitrios Dristellas•590
    @dimitrisdrPosted 4 months ago

    @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

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