Social links profile with html/css and js for animation

Hello there!

Congrats on completing the challenge! ✅

Your project is looking fantastic!

I'd like to suggest a way to make it even better:

• Using margin isn't always the most effective method for centering an element.

Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

body {
    min-height: 100vh;
    display: flex; 
    justify-content: center;
    align-items: center;
}

Also, it's recommended to use semantic HTML elements like <ul> and <li> for creating lists. This ensures that your code is more accessible, maintainable, and semantically meaningful.

Here's and example on how you can refactor your code:

After Refactoring

<ul class="list-container">
    <li><a href="#">Github</a></li>
    <li><a href="#">Frontend Mentor</a></li>
    <li><a href="#">LinkedIn</a></li>
    ...
</ul>

By using <ul> and <li>, you convey the structure of your content more clearly, making it easier for screen readers and search engines to understand. Additionally, it aligns with best practices for HTML semantics.

I hope you find this helpful!

Keep up the excellent work!

First of all, you are using sooo many divs, this might not be necessary. For example, this example is cleaner and works just as fine, adjusting css:

<div class="flexbox"> <img src="assets/images/avatar.png" alt=""> <h1>Name</h1> <h2>Location</h2> <p>"Front-end developer and avid reader."</p> <div class="box-links"> <a href="https://github.com/">Github</a> <a href="https://www.frontendmentor.io/">Frontend Mentor</a> <a href="https://www.linkedin.com/">LinkedIn</a> <a href="#Twitter">Twitter</a> <a href="#Instagram">Instagram</a> </div> </div>

This would minimize your html and css a lot, try it if you want =)