Submitted 6 months ago

Profile link page with smoothly transitioning active states

vIranq HuQ'qa tuq•50

@FrankHukka

Preview site View code

This is a solution for...Social links profile

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I used the clamp() function to scale the padding in the card section and it ended up working well. The padding is about 5 % of the element width, but no less than 20 px or more than 30 px.

Another part I'm proud of is the transition property in the link buttons. The background and text color transition smoothly to the active states, with the text color transitioning slightly faster.

transition: background-color 500ms linear,
                color 400ms linear;

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

My biggest challenge was to get the profile picture centered horizontally. I had to test various margins to get it right.

Another difficult part was the card width. I tried to make it scale dynamically, but that didn't look right. In the end I decided to make it just 350 px.

Community feedback

Niloy Das•230
@NiloyDas07Posted 6 months ago
Hey @FrankHukka, The desktop design is perfect. The layout is well done. There are just some slight issues with the mobile design:

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.

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/

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 :-)
Marked as helpful
0
Daniel 🛸•44,250
@danielmrz-devPosted 6 months ago
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!
0

Please log in to post a comment

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