Using HTML$/$CSS$/$PHP$/$JS

Design a game map from scratch.

Step $1$:

Using flexbox divide the screen from left and right.

Step $2$:

To the left side of the page, add a map $($any static image of a map$).$ Then add pins inside the map $($these pins will be later used to reference the right side of the page$).$

Step $3$:

To the right side of the page, add cards $($think scrollable container with cards inside$).$

Step $4$:

The pins you made previously from step $2,$ make it so that clicking the corresponding pin on the map reference the corresponding card on the right side of the page. In other words, for each pin, clicking the pin on the left side will scroll to and select the correct card on the right.

Step $5$:

The cards you made previously from step $3,$ make it so that clicking the corresponding card will reference the corresponding pin on the left side of the page. In other words, for each card, clicking the card on the right side will highlight and select the correct pin on the left.