Submitted over 3 years ago

Launch countdown challenge

aRa• 145

@jonaguyo

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

This is a solution for...

Launch countdown timer

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

It was a really interesting challenge, any comments on the tricks to flip the card are appreciated ! One tricky thing to do was the "reverse" border radius in the middle of each counter. I tried by using clipping, but it never gave me the result I wanted. So I ended with that trick with multiple backgrounds and radial gradients. Don't know if that solution is the best one. Thanks !

Community feedback

Giancarlo Guerra Farfan• 160

@GiancarloGF

Posted over 3 years ago

Hi, Great Work! I am just going to start the challenge and I think the most interesting thing In this is that effect of change of card. I want to know how you achieve this or the resources that you have found to make this effect. Take care!

aRa• 145

@jonaguyo

Posted over 3 years ago

@GiancarloGF Hi, thanks.

For the flip effect of the cards, I just overlaid some div, and make the one on the top rotate around the X axis when the number have to change. I don't used any additional library for that challenge. Only SASS for the CSS.

If you find a good or better solution for the "reverse" border radius in the middle of each card, do not hesitate to tell me, I'm curious ^^

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