Overlapping elements using position absolute.

What challenges did you encounter, and how did you overcome them?

This challenge seemed much simpler at first. I struggled to decide whether some elements should have a specific height and width or if it was better to use percentages, as in the case of the gradient bar. Also, adjusting the size of the two main boxes was tricky. Finally, I used Grid for this, so the sizes remained fixed through grid-template-columns.

What specific areas of your project would you like help with?

I would like to know a better technique for adding shapes like the triangle in the white box. Although I was able to create and resize it, I’m not sure if using position: absolute was the best way to place it. I was concerned that it might move out of place when the page size changes.