Skip to content
Submitted 20 days ago

Social Links Profile // Vanilla HTML & CSS

P
Kristian Haug•140
@klhaug
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 challenges did you encounter, and how did you overcome them?

Centering the buttons without align-items: center. Align-items:center kept resizing the buttons to their minimal width, so I ended up using margin:auto instead to center them.

Would love an explanation as to how that is? Or if my solution is the "correct" one...

What specific areas of your project would you like help with?
  1. Is it good semantic html to keep the <a> inside the <p>?
  2. How do i use the transition-property to make the background-color change back to grey smoothly? I apply the transition on my .primary-button, but the it transitions the entire button causing a layout-shift.

Community feedback

  • P
    Stevan-Dev•660
    @Stv-devlPosted 20 days ago
    1. For me, it's not really necessary to wrap the link in a <p> tag; just write it like this: <a href="https://github.com" class="">Github</a> You can try placing the transition property in the .primary-button rule; the transition should not be written in the :hover state.

    Good luck for your study

    Marked as helpful
    0
    P
    Kristian Haug•140
    @klhaugPosted 15 days ago

    @Stv-devl Thank you!

    1

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