Project Overview
Roda is an HTML5 template designed for game stores and e-commerce scenarios, featuring a dark theme with integrated product display, shopping cart, checkout, blog, NFT section, tournament list, and various other pages. Built on Bootstrap 5, with GSAP animation engine and Lenis smooth scrolling, it provides a fully responsive layout and interactive experience, ideal for quickly building a gaming merchandise sales platform.
Tech Stack
- HTML5 / CSS3 (static template)
- Bootstrap 5.3 (grid system & base components)
- GSAP + ScrollTrigger (animations & parallax scrolling)
- Lenis (smooth scrolling)
- WOW.js (scroll-triggered animations)
- Font Awesome 6 Pro (icon library)
- Slick Slider / Magnific Popup (carousels & modals)
- jQuery (DOM manipulation & plugin integration)
Project Structure
rodahtml-10/
├── documentation/ # Template documentation (offline)
│ ├── index.html
│ └── assets/css/style.css
├── download version/ # Ready-to-use complete template
│ ├── index.html # Homepage (main template)
│ ├── shop.html # Product listing page
│ ├── shop-details.html # Product details page
│ ├── cart.html # Shopping cart
│ ├── checkout.html # Checkout page
│ ├── blog.html # Blog listing
│ ├── blog-details.html # Blog details
│ ├── about.html # About us
│ ├── contact.html # Contact page
│ ├── team.html # Team members
│ ├── nft-shop.html # NFT shop page
│ ├── tournament-list.html # Tournament list
│ ├── faq.html # Frequently asked questions
│ ├── wishlist.html # Wishlist
│ ├── service.html # Services page
│ ├── mail.php # Contact form backend
│ └── assets/
│ ├── css/ # Stylesheets (includes sass directory structure comments)
│ ├── fonts/ # Font Awesome fonts
│ └── img/ # Image assets
Key Files
download version/index.html— Homepage entry point, defines site-wide header, footer, and main content structuredownload version/assets/css/style.css— Main stylesheet containing all template style definitionsdownload version/assets/js/main.js— Interaction logic covering GSAP animations, mobile menu, scroll-to-top, and 30+ featuresdownload version/mail.php— PHP backend script for the contact formdocumentation/index.html— Offline template usage documentation with installation instructions and customization guide
Quick Start
Pure static project, no dependencies to install. Upload the contents of the download version directory to a web server (or preview locally via python -m http.server), then open index.html directly in your browser. Template documentation is available offline at documentation/index.html.
Usage Suggestions
The index.html in the download version serves as a complete homepage reference; other pages (shop, cart, blog, etc.) can be copied and modified directly. For backend integration, the contact form includes a pre-built mail.php interface. To implement real e-commerce functionality, you'll need to integrate WooCommerce or another shopping cart system.
