Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Timer, using Scss, Jquery, Flexbox

Ahmed basset• 175

@aabdulbasset

Desktop design screenshot for the Launch countdown timer coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


I would love to hear your opinions about it. I know the flipping animation approach is not the best one, I would love to know better ideas. Thanks.

Community feedback

P
tediko• 6,530

@tediko

Posted

Hello, Ahmed basset! 👋

Good job on this one! Your solution responds well and overall looks good. I've recently finished this challenge too and it was really hard to make this flip animations so kudos for that. Take a look at my solution. I used backface-visibility property. This property defines whether or not the back face of an element should be visible when facing the user. So when i rotate my cards, back of them isn't visible to the user so I can create this nice flip animation. And also used perspective CSS property to give cards "3d" effect.

  • Take look at bottom half of your .card-back-text. It is changing before card flip. It should change after card is flipped.

Good luck with that, have fun coding! 💪

1
P
Patrick• 14,325

@palgramming

Posted

Hey you got it flipping.... Great Job so far

1

@RahulKumarGautam1636

Posted

Just missing the perspective property use it, will look very nice.

0

Ahmed basset• 175

@aabdulbasset

Posted

Hello, I tried the perspective property but it didn't help, it still looked flat as a plank. I suspect the issue is in overflow:hidden property. if you don't think that this is the issue please guide me to what would be, and how to fix it.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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