Marvel Universe Website

A responsive web-based Marvel Universe information portal featuring heroes, villains, and MCU history. Developed as part of a Foundation subject: Introduction to Computational Technologies course assignment.

Live Demo: https://juwei-w.github.io/Marvel-Website/

---

🌐 Overview

This project is a static website dedicated to the Marvel Universe, showcasing iconic characters and the cinematic history of the Marvel Cinematic Universe (MCU). Built using HTML and CSS, the website demonstrates fundamental web development skills including responsive design, page navigation, and visual styling.

Developer:

• Wong Ju Wei
• Shinly Eu
• Shaktish
• Foong Wei Pin

---

📁 Repository Structure

Foundation-PCT-Marvel-Website/
├── index.html                 # Root redirect to `Marvel/index.html` for hosting
├── Content/
│   ├── img/                   # Image assets for content pages
│   ├── Hero.html              # Heroes showcase page
│   ├── Villain.html           # Villains showcase page
│   ├── Credit.html            # Credits and attribution page
│   └── style.css              # Styling for content pages
│
└── Marvel/
   ├── index.html             # Main landing page
   ├── index.css              # Landing page styles
   ├── desc.html              # Marvel description page
   ├── desc.css               # Description page styles
   ├── history.html           # MCU history timeline
   ├── history.css            # History page styles
   ├── avengers.png           # Avengers logo/image
   ├── background.jpg         # Background image
   └── endgame.jpg            # Endgame promotional image

---

✨ Features

Website Sections

• 🏠 Home Page - Main landing page with Marvel branding
• 📖 Description - Overview of the Marvel Universe
• 🕒 History Timeline - MCU cinematic journey and milestones
• 🦸 Heroes Gallery - Showcase of iconic Marvel heroes
• 🦹 Villains Gallery - Featured Marvel antagonists
• 👏 Credits - Attribution and acknowledgments

Technical Features

• Responsive Design - Clean layout with CSS styling
• Multi-page Navigation - Organized site structure
• Visual Assets - High-quality images and graphics
• Semantic HTML - Well-structured markup
• Custom CSS - Separate stylesheets for each section

---

🚀 Getting Started

Prerequisites

• Web browser (Chrome, Firefox, Safari, Edge, etc.)
• No server setup required - runs as static HTML

How to Run

1. Online (GitHub Pages)

   • Live site: https://juwei-w.github.io/Marvel-Website/
   • This uses the root index.html to redirect to Marvel/index.html as the main page.

2. Local

   • Double-click index.html at the repository root, or open Marvel/index.html directly.

Navigation

• Start at the repository root index.html (redirects to Marvel/index.html)
• Browse through different sections using navigation links
• Explore Content/ folder pages for Heroes, Villains, and Credits

---

💻 Technical Implementation

Technologies Used

• HTML (81.3%) - Content structure and markup
• CSS (18.7%) - Styling and visual design

Development Concepts

• Web Page Structure - Semantic HTML5 elements
• CSS Styling - Layout design, colors, typography, spacing
• File Organization - Modular approach with separate pages
• Asset Management - Image integration and optimization
• Navigation Systems - Internal linking between pages
• Responsive Elements - Flexible layouts

Learning Outcomes

This project demonstrates:

• HTML fundamentals and document structure
• CSS styling and design principles
• Multi-page website architecture
• File and folder organization
• Web design best practices
• Visual content integration

---

🎨 Design Elements

Visual Components

• Marvel-themed color scheme and branding
• Character images and promotional materials
• Background imagery for immersive experience
• Clean typography and readable layouts

Page Structure

Each page follows consistent design patterns with:

• Header/navigation area
• Main content section
• Visual elements and imagery
• Styled text and information blocks

---

📊 Project Statistics

• Languages: HTML (81.3%), CSS (18.7%)

---

🔗 Resources

• Repository: github.com/juwei-w/Marvel-Website
• Issues: Report a bug

---

Introduction to Computing Technologies • Foundation • Nov 2021 - March 2022