Project Overview
Xports is an HTML theme template designed for esports and gaming communities, featuring a dark cyberpunk style. It includes homepage variants, team, event, game, shop, news, and other complete pages, suitable for building esports team websites, gaming news sites, or merchandise stores.
Tech Stack
- Bootstrap 5 (responsive layout framework)
- jQuery 3.7.1 (DOM manipulation and interaction)
- GSAP (advanced animation engine, includes ScrollTrigger / ScrollSmoother)
- Swiper (carousel and slideshow component)
- WOW.js (scroll-triggered animations)
- NiceSelect / MeanMenu (form styling and mobile navigation)
Project Structure
xportshtml-10/
├── buyer-file/ # Production template files
│ ├── index.html # Homepage
│ ├── index-2~5.html # Homepage variants
│ ├── about.html # About
│ ├── game.html # Game list
│ ├── team.html # Team page
│ ├── shop.html # Shop
│ ├── news.html # News
│ ├── contact.html # Contact
│ └── assets/
│ ├── css/main.css # Core theme styles (dark theme)
│ └── js/main.js # Interaction logic (carousel, navigation, counters, etc.)
└── documentation/ # Official documentation
Key File Descriptions
buyer-file/index.html— Homepage entry, includes preloader animation, hero section, popular game carouselbuyer-file/assets/css/main.css— Main stylesheet, defines Chakra Petch font, brand red (#FF0808), and dark background variablesbuyer-file/assets/js/main.js— Interaction script, implements mobile meanmenu, Swiper carousel, WOW animations, counters, etc.buyer-file/game*.html— Game detail and list page templatesbuyer-file/shop*.html— Product and cart page templatesbuyer-file/team*.html— Team and member detail page templates
Quick Start
Pure static project, no build required. Open buyer-file/index.html directly in your browser, or use any local server (e.g., npx serve buyer-file) to run.
Usage Suggestions
The template is designed with a dark background. All content has preset style replacement areas — simply modify the text and image paths in the HTML to go live. For backend shop integration or dynamic data, extend the interaction logic in main.js as needed.
