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

Launch Countdown Timer - Vanilla JS

P
HackMort_ 40

@HackMort

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


Built with CSS Grid & Vanilla JS.

If anybody can help me get the flip animation, please let me know. I know I could have used a jquery plugin for this, but didn't wanted to go that route.

Any feedback is appreciated!

Community feedback

Abhik 4,840

@abhik-b

Posted

👋 Hey HackMort , Your solutions is very nice & responsive Well Done 🥳🥳 About the flipping animation without jQuery , I took inspiration from this codepen. Also I think that instead of using pseudo elements for background images if you set them on body itself , the background images would be visible.

@media screen and (max-width: 526px)
body {
    background-size: auto;
    background-position: center bottom, -850px bottom;
}

body {
    background: hsl(235, 16%, 14%);
    background-image: url(./images/bg-stars.svg), url(./images/pattern-hills.svg);
    background-position: center bottom, center bottom;
    background-repeat: repeat, no-repeat;
    background-size: contain;
    }

Great job with the timer & please keep coding amazing solutions like this 👍

Marked as helpful

1

P
HackMort_ 40

@HackMort

Posted

@abhik-b That was fast!

Body bg-image: that's a really clever idea! Thank you!

Definitely gonna take a look of the codepen you posted. Again, thanks for your feedback.

1

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