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

@SamaraOliveira07

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?

Melhorar a responsividade, adicionar algumas animações

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

Para deixar responsivo

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

O que eu posso melhorar?

Community feedback

@weldu0

Posted

👋 Hey, @SamaraOliveira07! I have a few suggestions for your project:

  1. Use display: flex for the body like this:

    body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100vh;
    }
    

    This will help center all the content more easily.

  2. To make your image a perfect circle, the height and width most be have the same value and use object-fit: cover. The object-fit property will crop some parts of the image to achieve the circular shape. You can learn more about object-fit in this MDN documentation.

If you want to dive deeper into learning Flexbox, here is a great link from MDN. For an interactive way of learning Flexbox properties, check out Flexbox Froggy.

Great work! 👏

I hope you find this helpful. 😊

1

@SamaraOliveira07

Posted

@weldu0 I loved the tips, thank you very much! I will apply them to my project

0

@weldu0

Posted

You're welcome! I'm glad to hear that it was helpful. @SamaraOliveira07

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