leonardomeza87 / launch-countdown-timer

Countdown timer for a product launch

Launch countdown timer

This is a solution to the Launch countdown timer challenge on Frontend Mentor.

Links 🔗

• Solution URL: Repository
• Live Site URL: GitHub Pages

The challenge 💻

Users should be able to:

• See hover states for all interactive elements on the page.
• See a live countdown timer that ticks down every second (start the count at 14 days).
• Bonus: When a number changes, make the card flip from the middle.

Screenshot

Built with

• CSS custom properties.
• Flexbox.
• Desktop-first workflow.
• React - JS library.

What I learned

So far I did not know how to make a hole in a normal element, seeing that the design of the counter had one I had my serious doubts about whether to simply paint it on the card or make a real hole, the result was that, looking at stackoverflow, I found a really new technique for me, and I think the result was pretty cool.

Useful resources

• Creating a hole in a div element
• The trick to viewport units on mobile

More about me

• Frontend Mentor - @leonardomeza87
• Twitter - @leonardomeza87

Download ⚙️

This project was bootstrapped with Create React App.

To clone:

git clone https://github.com/leonardomeza87/launch-countdown-timer.git