Whilst the design looks similar to the design on figma, I recognise there are still elements I need to add to match the video example:
- Ensure the video only loads once the card is opened.
- Change the modal based on which carousel page is active.
- Hide the carousel text when the modal is active.
These are things that can be done using javascript. I am still new to this and haven't been able to finish this section of the work to the deadline. However, I am looking to explore this further over the coming days and understand how to implement these features.
The figma designs only show the design based on a certain viewport size and doesn't show designs when the viewport changes size. I have implemented the code so that it changes based on viewport size, but I would need to consult the designer about how they would like the design to be when this occurs.