Profile link page with smoothly transitioning active states

Hey @FrankHukka, The desktop design is perfect. The layout is well done. There are just some slight issues with the mobile design:

1. You used width: 350px for the card. This causes overflow for any device with width less than 350px because even if the device width is smaller, it will still force the card to be 350px. You can change this to max-width: 350px. This will allow the card to shrink if the device width is smaller.

2. You did not use box-sizing: border-box anywhere. This can cause a lot of issues while calculating the margin, padding, borders etc. e.g. without that, the actual width of your card is not 350px but 350px + the padding in the card. You should learn about that property if you don't know it already as it is one of the most commonly used properties and makes our life a lot easier. You can learn about some basic custom resets here: https://www.joshwcomeau.com/css/custom-css-reset/

3. After all that you could add some padding to your body. Right now the card is taking the full screen in smaller devices which is different from the design.

Happy Coding :-)

Hello there!

Congrats on completing the challenge! ✅

Your solution looks great!

📌 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!