HTML 📄 CSS 🎨 JavaScript 🚀
The project consists of a visually appealing webpage with two main components – an image container and a trailer container. The image container serves as a teaser, inviting users to click on the play button. Once clicked, the trailer container comes to life, providing a full-screen view of the movie trailer along with playback controls.
Playful Animation: The play button in the image container features a subtle bouncing animation, adding a playful touch and encouraging user interaction.
Responsive Design: The project is designed to be responsive, ensuring a seamless viewing experience across various devices, including desktops, tablets, and mobile phones.
Fullscreen Trailer: The trailer container takes over the screen, providing an immersive experience for users to enjoy the movie trailer in high quality.
Close Option: Users can easily close the trailer container by clicking the close icon, allowing them to return to the main image teaser.
Open the project in a web browser. Click on the play button within the image container to activate the trailer preview. Enjoy the fullscreen movie trailer with playback controls. To return to the image teaser, click the close icon in the trailer container. Happy coding :)