Overview

This is a website made for all-things movies and TV series, developed as part of the 4COSC011C - Web Design & Development course. Fantasy Flix is a comprehensive platform providing users with information about the latest releases, interactive quizzes, an image gallery, and an online store for entertainment merchandise.

Designed and developed by Supun Wijesooriya, Shuaib Feroze, Kishoritha Suthagar, and Thashi Maleesha in April 2021.

Features

The Fantasy Flix website offers the following features:

1. Homepage

   • Dynamic image carousel showcasing featured movies and TV series
   • Quick access to trending movies and popular TV series
   • Categorised content display with movies and TV series sections
   • Newsletter subscription functionality

2. Movies Section

   • Comprehensive collection of movie information
   • Movie posters and detailed descriptions
   • Latest releases including Fear Street trilogy, Luca, A Quiet Place 2, and more
   • Easy navigation and search functionality

3. TV Series Section

   • Curated list of popular TV series
   • Information about shows like Loki, The Witcher, Lucifer, Stranger Things, and more
   • Series descriptions and visual content

4. Interactive Quiz

   • Timed entertainment knowledge quiz (1 minute)
   • 10 questions covering movies and TV series
   • Real-time score calculation
   • Prize opportunity for high scorers (free movie tickets)
   • Dynamic feedback with color-coded answers

5. Gallery

   • Visual collection of entertainment content
   • Movie and TV series posters
   • High-quality images and artwork

6. Buy Products Page

   • E-commerce functionality for entertainment merchandise
   • Product browsing and selection
   • Shopping cart implementation
   • Interactive product catalog

7. Contact Form

   • User query submission
   • Form validation
   • Contact information collection

8. Additional Features

   • Social media integration (Facebook, Twitter, LinkedIn, Instagram)
   • Sitemap for easy navigation
   • Cookie policy and privacy information
   • Student details and page editor information
   • Responsive navigation bar with search functionality

Technologies Used

• HTML5: Markup language for structuring web content
• CSS3: Styling language for visual presentation
  • External stylesheets (ExternalStyleSheet.css, Quiz.css, BuyProductsCSS.css, Studentdetailsstylesheet.css)
  • Inline and embedded styles for component-specific styling
• JavaScript (ES5+): Client-side scripting for interactive features
  • Quiz functionality (script.js - 51KB)
  • Shopping cart functionality (BuyProductsJS.js - 12KB)
  • Image carousel and dynamic content loading
• Font Awesome 4.7.0: Icon library for social media and UI elements
• W3.CSS 4: CSS framework for responsive design components
• CDN Resources: External libraries loaded via CDN for optimal performance

Project Specifications

• Course: 4COSC011C - Web Design & Development
• Theme: Entertainment (Movies & TV Series)
• Implementation: Desktop-only (not mobile responsive)
• Compliance: Adheres to JANET regulations regarding accessibility, legality, and acceptable use
• Development Year: 2021

User Interfaces

UIs

UIs

Getting Started

To run the Fantasy Flix website locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/supunxiii/fantasy-flix-website.git

2. Navigate to the project directory:

   cd fantasy-flix-website

3. Open main.html in your web browser:

   open main.html

   Or simply double-click the main.html file in your file explorer.

4. Explore the various pages:

   • Home: main.html
   • Gallery: Gallery.html
   • Quiz: Quiz.html
   • Shop: BuyProductsPage.html
   • Contact: QueryForm.html

Project Structure

fantasy-flix-website/
├── main.html                          # Homepage
├── Gallery.html                       # Image gallery page
├── Quiz.html                          # Interactive quiz page
├── BuyProductsPage.html              # E-commerce page
├── QueryForm.html                    # Contact form
├── QueryDetail.html                  # Query details page
├── Movies.html                       # Movies section
├── Tv-Series.html                    # TV series section
├── Sitemap.html                      # Site navigation map
├── PageEditor.html                   # Page editor information
├── PresentationPage.html             # Project presentation
├── studentdetails.html               # Student information
├── ExternalStyleSheet.css            # Main stylesheet
├── Quiz.css                          # Quiz page styles
├── BuyProductsCSS.css               # Shop page styles
├── Studentdetailsstylesheet.css     # Student details styles
├── script.js                         # Quiz functionality
├── BuyProductsJS.js                 # Shopping cart logic
├── Items/                           # Product images directory
├── images/                          # General images directory
└── *.jpg, *.png, *.jfif            # Media assets

Contributors

This project was collaboratively developed by:

• Supun Wijesooriya - Developer (developed Buy Products Page & Presentation Page)
• Shuaib Feroze - Developer
• Kishoritha Suthagar - Developer
• Thashi Maleesha - Developer

Live Demo

The website is currently live at: https://supunxiii.github.io/fantasy-flix-website/PresentationPage.html

Contributing

Contributions to the Fantasy Flix website are welcome! If you would like to contribute, please follow these steps:

1. Fork the repository.

2. Create a new branch:

   git checkout -b feature/your-feature-name

3. Make your changes and commit them:

   git commit -m "Add your commit message"

4. Push your changes to your forked repository:

   git push origin feature/your-feature-name

5. Open a pull request to the main repository, describing your changes and the purpose of the pull request.

Important Notes

• This website is not mobile responsive and is optimised for desktop viewing only
• The website was developed as an academic project and follows educational standards
• All content is for demonstration and educational purposes

Contact

For any inquiries or feedback, please contact the developer:

• Supun Wijesooriya: GitHub Profile
• Project Repository: fantasy-flix-website

---

Designed and developed in April 2021