This was a fun one! I had to copy the interface of a well known tv platform.
You can visit website here!
I only use html and plain CSS for this challenge.
I follow a desktop first approach. I use in total 3 breakpoints. Only to change to display:none or change content.
Title, logo and buttons from header follow a fluid typography. They change their sizes base on viewport using clamp. Not base in media queries.
The rest of images change size or line wrap with flexbox. I added some constrains min and max to all elements.
- Different transititions time for diferent actions (hover, not hovering, active).
- Transition delay when hover on a poster show / movie. Only active transform in case is clear that the user want to.