Project Introductionlink

PowerFlow is a professional HTML template designed for gyms, fitness clubs, and yoga studios. It offers 4 homepage layouts along with functional pages such as class listings, blog, team, pricing, and booking. Built on Bootstrap 5, it is fully responsive, supports dark/light theme switching and RTL mode, and is ready to use out of the box—ideal for quickly building fitness-oriented business websites.

Tech Stacklink

• Bootstrap 5 (CSS framework, responsive layout)
• jQuery (DOM manipulation and interactions)
• Swiper.js (carousel and sliding components)
• Google Fonts (Zalando Sans font)
• FontAwesome 4/6 + multiple Icon Fonts (icon libraries)

Project Structurelink

PowerFlow/
├── PowerFlow/
│   ├── index.html              # Homepage entry
│   ├── 02_homepage-*.html      # Other homepage variants
│   ├── classes.html            # Class listings
│   ├── class-single.html       # Class details
│   ├── about.html              # About us
│   ├── team.html               # Team members
│   ├── pricing.html            # Pricing plans
│   ├── schedule.html           # Class schedule
│   ├── contact.html            # Contact page
│   ├── join.html               # Membership form
│   ├── blog.html               # Blog listings
│   ├── blog-single.html        # Blog details
│   ├── css/                    # Stylesheets
│   │   ├── bootstrap.min.css
│   │   ├── style.css           # Main styles
│   │   └── coloring.css        # Color schemes
│   ├── js/                     # Script files
│   │   ├── designesia.js      # Core interactions
│   │   ├── swiper.js          # Carousel component
│   │   └── validation-*.js    # Form validation
│   ├── fonts/                  # Icon fonts
│   ├── images/                 # Image assets
│   └── video/                  # Video assets
└── documentation/
    └── index.html              # Official documentation

Core File Descriptionslink

• index.html — Website homepage entry, includes navigation, slideshow, and class recommendation modules
• css/style.css — Main stylesheet, defines typography, colors, spacing, and other variables across the site
• js/designesia.js — Core interaction logic, handles navigation, scroll effects, theme switching, etc.
• js/swiper.js — Slider implementation for carousels/class cards
• css/coloring.css — Theme color presets, allows switching between different color schemes
• contact.php / join.php — Backend form processing files (requires PHP environment)

Quick Startlink

1. Open PowerFlow/index.html directly in your browser to preview;
2. For a local server to ensure full font loading, run:
   bashcontent_copyCopy

   python3 -m http.server 8080
   

   Then visit http://localhost:8080/PowerFlow/index.html;
3. When editing HTML files, it is recommended to use VS Code or Sublime Text, and refer to the Bootstrap grid layout instructions in documentation/index.html for customization.

Usage Suggestionslink

This template is purely static. To enable email sending functionality for the contact/membership forms, deploy contact.php and join.php to a PHP-enabled web server, or replace them with a third-party form service (e.g., Formspree) as an alternative.