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" by Pedro Brandão

@bbrandaoooo

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


My biggest difficulty was aligning all the elements in the center of the page and rounding my photo. Could anyone help me with this?

Community feedback

P

@perfidev

Posted

You can align elements with CSS Grid using align-items (vertical) and justify-items (horizontal).

You can also use Flexbox, using align-items (vertical) and justify-content (horizontal).

And for the image, you can use border-radius.

img { border-radius: 100px; }

Suggestions:

  • Use box-sizing: border-box on *, so the browser will include the width and height of borders and padding in the total width and height calculation of the element.
* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
}
  • Add alt attribute to the image.
<img src="perfil100px.jpg" alt="Pedro's photo" />
  • Place your content inside the <main> tag.
<main>
    <div> ... </div>
</main>

Marked as helpful

1

@bbrandaoooo

Posted

Thank you very much. Helped a lot !@raphaelperfi

1

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