Skip to content
Submitted 7 months ago

Social Links Profile Using HTML and CSS

Clifford Anderson•180
@cdanderson76
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?

With this project, I am most proud that I was able to get this to look appealing across all of my devices. The hover animations look fairly smooth, and I tried to add my own spin to the project by attempting to use slightly different shades of color. I also used a color change animation for my footer.

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

One challenge that I faced was trying to use a gradient for my profile card color. Because my links are in it's own div, I couldn't really figure out how to get it to blend in with the color of the profile card (some lines wouldn't merge with the lines in the container, so it made it look strange). As a result, I just decided to go with solid shades on this project.

Another problem that I always tend to have in the beginning is centering the project on the page. I think I've gotten better with it, but it's always something that I get stuck on longer than I'd like. To overcome this, I usually just make the make the parent container a flex container, and center the content using the 'justify-content' and 'align-items' properties.

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

I don't think that there is anything that I needed help with, but tips and comments are always useful. I don't think I had too many issues putting this project together, but feedback is always good...

Community feedback

  • Arnold Limberg•410
    @CreativeLogicPosted 7 months ago

    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.

    Marked as helpful
    0
    Clifford Anderson•180
    @cdanderson76Posted 7 months ago

    @CreativeLogic

    I appreciate the insight 😁! Thank you!

    0
  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted 7 months ago

    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!

    Marked as helpful
    0
    Clifford Anderson•180
    @cdanderson76Posted 7 months ago

    @0xabdulkhalid

    Thank you again for the tips! I'll be sure to read up on that reference!

    0
  • Sergiolunabellido•40
    @SergiolunabellidoPosted 7 months ago

    an

    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