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

Social links profile using CSS Flexbox

P

@Antonvasilache

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?

  • Content looks proportionally similar to the design file
  • Less time to figure out than previous challenges

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

  • Difficulties in centering the content, but managed to do it using flex container and margin: 0 auto 36px auto; on the content children
  • Had to adjust margins and padding repeatedly to get it right
  • How to apply the font properties the style guide

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

  • Not sure how the focus state should look like

Community feedback

P

@stefan-holmgren

Posted

Looks good!

I centered the content by using

.profile {
  ...
  text-align: center;
}

The only thing I had to fix to keep centered were the avatar-image which i set up like:

.profile .avatar {
  ...
  margin: auto;
}
1

@LToyyib

Posted

Welldone! But you did not publish your work with a live page on github.

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