All solutions

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!

This one was interesting! some surprises found while dealing with dates and how to properly validate the corner cases (February with 28 days, or 30/31 days)

I've used a mobile first approach with vanilla JS and CSS, the data validation is done with JS and the error feedback has been introduced using the :invalid and ::before / ::after pseudoelements.

The count up is animated using a lightweight library, https://inorganik.github.io/countUp.js/

Quite happy with the result, feedback is more than welcome!

This was a rather complete one! took me some time to finish it. Still, I believe a lot can be improved. I have the feeling I'm abusing too much paddings/margins to find the exact position of the elements. This resulted a rather long CSS code. Also the Desktop CSS has duplicated selectors from the Tablet section, I need to further improve this.

However, I'm quite happy with the result, also is the first time I implemented an image carousel, will explore how to do it infinite!

Feedback is more than welcome, thank you!

Was a bit tricky to figure out colours since they are not all specified in the design file.. As suggested I used HSLA, decreasing the luminosity to try to recreate the badges lighter colours.

Also, in this one I discovered the gap property in flexbox. Found it useful to equally space different elements inside the container instead of adding margins in multiple places.

Feedback is more than welcome!

I used pseudoelements here to create the inverted triangle for the "dialog bubble" that is only present in the desktop layout. Like this:

.content-highlight:after {
    content: "";
    background-color: white;
    width: 30px;
    height: 30px;
    position: absolute;
    bottom: -25px;
    right: 0px;
    clip-path: polygon(100% 0, 12% 0, 100% 100%);
  }

Is clip-path the right way to achieve this here? Could not find an easier way to create a triangular shape. First time doing this! feedback more than welcome!

Feedback more than welcome!

I feel like I'm speeding up already, quite happy with it!

The elements where I've used an absolute position (e.g. the man's avatar and the purple rectangle with the text) are rendering differently (with broken offsets) in my smartphone. However they show up fine in the browser even when I change the size. I need to dig a bit more into this.

Also, could not find a way to crop the green helix in the background. If you make the window big enough you will see them rendering out of the webpage.

This was a decent sized project! I'm happy with the result though, feedback is more than welcome!

What would be the best approach here for the space separations between the QR, header and text? use paddings or empty divs with custom heights? any other better alternative?