Submitted 21 days ago

Card-Component with Flexbox and Transitions

Tuna Erten• 220

@tunaerten

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Article preview component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

It was the first challenge I completed with JavaScript. Since I was already familiar with JS, I didn't have much difficulty.

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

I added a transition, but researching how to add a transition to the display none property took me some time. In this way, I also used new transition properties for the first time

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

I am open to any advice and would be grateful for it.

Community feedback

Teodor Jenkler• 3,720

@TedJenkler

Posted 21 days ago

Hi @tunaerten,

Nice project! I noticed you’re using a transition effect to reveal the social icons on desktop. While your transition works, a fade-in effect using opacity might look even better.

Additionally, improving user experience by allowing icons popup to open on click and close when clicking outside would be a great enhancement. This can be achieved with DOM manipulation.

As an extra challenge, consider adding hover effects to the icons. To do this, use the <SVG /> tag and style it with CSS.

Hope this was helpful!

Best, Teodor

Marked as helpful

Tuna Erten• 220

@tunaerten

Posted 21 days ago

Hi @TedJenkler! Thank you for your feedback!

Closing the pop-up menu when clicking anywhere is a good idea. I'll implement that right away.

I'll also try adding hover effects to the icons.

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