Dynamic web page - show further information after clicking on a box

Code Feedback
1

I have nearly finished a personal project where I am trying to match the below design:

MSN-Holding-page_option2
MSN-Holding-page_option22880×8346 1.7 MB

Currently, I have this:
https://codepen.io/JoyFulCoding/pen/EzWyKv

I am now on the hardest part. When clicking on any 1 of the 6 boxes which has multiple colors, there should be further information popping up which is about the topic the user clicks on. For example, see below for what this looks like after a user clicks on the first red box:

MSN-Holding-page_option2_what-we-do
MSN-Holding-page_option2_what-we-do2880×8346 1.53 MB

Also, after further information is displayed, there should be the option to click right or left to cycle through each further information for each of the 6 boxes.

Can anyone advise exactly on how to get this done as it seems very difficult from my perspective?

2

I am making some progress with my last question… At the moment, the problem is that the further information text is ‘‘cutoff’’ after you click on the first red box which has the text Facebook Ad Campaigns. You can see what I mean by trying it out with my updated codepen:

https://codepen.io/JoyFulCoding/pen/EzWyKv

Does anyone know how to resolve this? Quite stressed out by it all so any help would be greatly appreciated…

3

Try taking a look at your margins, padding, etc. I think you may find a solution by making some changes in those areas.