BONUS SOLUTION - Static HTML5, CSS3 and JS using Grid and Flexbox

Hello! 👋

This is my 3rd solution on Frontend Mentor, and also my 3rd week here! As this was my first intermediate challenge, and also quite simple, I chose to build it using static HTML5 and CSS3 and vanilla javascript. 🙂

I used more time on this solution this week as Easter break 🐣 just began for me and thus I it took 4-5 hours on this solution in the span of 2 days. Feedbacks on my excessively use of pseudo-element ::before/::after, if that may be unnecessary or not, to my solution of the flipping animation of the card are appreciated. I tend to also write lots of redundant and unclean code but I am willing to improve, thus any feedback from the community on that or anything else are also greatly appreciated!

Once again I used Figma 🎨 for measuring which has made it a lot easier to get the measurement, but is still difficult to get the solution to be "pixel correct" on a big display as my monitor is smaller than 1440px. The solution uses the WebStorage API / LocalStorage for saving the countdown timer, and the use of setInterval for the countdown. 💻

I'll be back for another challenge next week, happy Easter and see you all again next week! 🙂

• Shirajuki