I really loved that challenge !

---

I really loved that challenge, because it is not only about HTML and CSS anymore, but also handling an API and requests. The CSS and JS part were rather simple, to be honest.

Difficulties

---

Here are the difficulties I had :

CSS

• The most difficult thing for me was to place the "dice button" as it overlaps its parent element. First, I wanted to do it with grid, but when I saw how difficult it was, it decided to use position: relative and position: absolut.

• I also had difficulties to add breakpoints, especially for the divider. I never really know which breakpoint to choose to end the mobile/tablet versions.

HTML

• I needed a bit of time to understand how to add many images and charge it according to the media size. But I finally did it ! :)

Additions

• I know it was not required for the active state: but in addition to the "light" hover effect on the button, I decided to add a short animation on the dice : it makes a 180deg rotation. That was just for fun, but I found it interesting to do it.

Questions

I have a few questions :

• First of all, when I open the project under Chrome, everything works perfectly. But as soon as I open it under Safari, I have the following issue : when the cursor hovers the button, it has this light effect as required, but then, it creates a kind of border behind it. Any way to cancel this border

• The other problem I have is with the pseudo-class :active. The effect does not work when I use it, however it works with the :hover pseudo-class. Can you explain me why ?

• Thank you to the frontendMentor community for all your patience, great help and support :) *