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

Responsive countdown landing page vanilla JS

Jaz 190

@arfernn

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


Hi all! Here my approach to this challenge

  • Using Vanilla JS and plain CSS
  • Semantic HTML
  • Starting at 14 days, will count down to 0 then restart
  • Pending implementation of the flipping effect, need to find a way to get it done first..

I used a black overlay in the top half of the number cards to give the "darker color effect" to both card and number, with an alpha of 0.2, and before/after pseudoelements to implement the small holes to the sides of the cards.

Feedback is more than welcome!

Community feedback

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