Filmoteka is a two-page website designed to provide users with access to trending movies, search for movies based on keywords, view movie details, trailers, and create their own library of watched movies or movies to watch.
The home page features a search form where users can enter keywords to search for movies. When no search term is entered, a list of trending movies from the day is displayed in the form of cards. Clicking on a movie card opens a modal window where users can explore movie information and add the movie to their watched list or queue for future viewing. Each movie card also includes a "Watch the trailer" button, which opens a modal window for users to watch the movie trailer. At the bottom of the page, pagination is available for easy navigation between movie lists.
The "My Library" page is a user's personal library, which includes two sections: "Watched" and "Queue." These sections display movies as cards based on the user's previous actions. Clicking on a movie card allows users to view detailed information about the movie and remove it from their library.
- Responsive Design: The website is designed to be fully responsive, adapting to different screen sizes starting from a minimum width of 320px. All images are optimized for various resolutions and screen sizes, ensuring a consistent and enjoyable experience across devices.
- Semantic Markup: The HTML structure follows semantic conventions, enhancing the website's accessibility and search engine optimization (SEO). Pagination:
- The pages includes pagination functionality, allowing users to navigate between movie lists easily.
- Dark/Light Theme: The website provides a dark theme option for users who prefer a different visual style.
- Loader: A loader is displayed during page loading, providing visual feedback to users while content is being fetched.
- Scroll-to-Top Button: A scroll-to-top button is available for quick and convenient navigation to the top of the page.
- Cookie Consent Popup: The website displays a popup to obtain user consent for cookie usage upon the first visit.
The Filmoteka website was built using the following technologies:
- JavaScript
- CSS
- Sass
- Parcel
If you have any questions or feedback, please feel free to contact me:
- Email: anna.lisicina9309@gmail.com
- GitHub: lisitsyna-anna
Thank you for visiting the Filmoteka repository! Enjoy exploring and discovering new movies!