A fully responsive, cinematic, multi-page fan website dedicated to Thor (God of Thunder).
The site features interactive UI, live backgrounds, parallax effects, glassmorphism cards, and lightning animations powered by GSAP, VanillaTilt, and Particles.js.
- Hero Section with animated background and cinematic lightning strikes
- Multi-page Design (Home, Movies, Comics, Gallery, Contact)
- Interactive 3D Tilt Cards using VanillaTilt.js
- Scroll Animations with GSAP & ScrollTriggergger
- Particle Effects (sparks and stormy energy)
- Designer Buttons with glowing Thor-themed effects
- Responsive Layout – mobile, tablet, and desktop friendly
- Cinematic Glassmorphism UI for a premium fan experience
Thor-FanPage/ │ ├── index.html # Home page ├── movies.html # Movies page ├── comics.html # Comics page ├── gallery.html # Gallery page ├── contact.html # Contact page │ ├── css/ │ └── style.css # Main stylesheet │ ├── js/ │ └── script.js # Custom scripts & animations | ├── images/ # Images (hero, posters, gallery, etc.) │ │ └── README.md # Project documentationtionect documentation
- HTML5 – semantic markup
- CSS3 (Flexbox, Grid, Animations) – styling & responsive layoutyout
- JavaScript (ES6) – interactivity & animationsions
- GSAP 3 + ScrollTrigger – scroll-based animations
- VanillaTilt.js – interactive 3D card effects
- Particles.js – background particle effects
- Hero Backgrounds: Landscape (16:9 or 21:9) for cinematic effect
- Movie/Comic Posters: Portrait (2:3 ratio, ~300x450px)
- Gallery Images: Mixed orientation allowed (use
object-fit: cover;) - Backgrounds/Effects: Wide landscape images for smooth coverage
- Clone or download this repository:
git clone https://github.com/yourusername/thor-fanpage.git
- Navigate to the project folder:
cd thor-fanpage
- Open index.html in your browser to view the site.
Open index.html in your browser to view the site.
##📜 License
This project is built for educational and fan purposes only. All images and character rights belong to Marvel Studios.