All solutions

Not totally optimized: crew mobile is not like model. Perhaps the use of grid will resolve this matter, but too late for me. Mobile first approach, the next time.

Good exercice to learn: How to apply a shape at the back of others elements with element::before, z-index and position absolute.

First time I tried to custom an horizontal navbar in vertical navbar, without bootstrap. Well, that was easy and at the same time, a little hard. Good exercice!

The position of background in mobile view is not exact. I'll figure how to correct that in the future.

Without Figma, a little confuse with greys variations but not really wrong. With data.js, forEach loops and conditionnals factories in posts. Old way to produce this result. Not the better, but funny.

Resolution with a lot of listeners because impossible to know if the legend tool appear with a click or with mouseover. So, two solutions: one for mouse over, other on media screen < 582px with click or touch. Responsive but only with rem and font-size on media query between 320px and 420px. A little diferent (a lot...) for mobile design, but satisfactory for me (yes, i was lazy, sorry)

Need to record few knowledge about validation Form, custom input, custom placeholder, etc... Good exercice. Perhaps a little confuse on size and shadow color because without figma.

Perhaps a gradient color on the card's background, but i can't figure without figma. Good exercice to use label on custom radio input.

article section in html is perhaps not a good choice, but i try to use other things than div.