Project Introductionlink

ShotFit is a set of static HTML templates designed for fitness and sports scenarios, built on Bootstrap 5. It includes over twenty pages such as Home, Courses, Team, Shop, and Blog, suitable for gyms, sports brand websites, or landing pages for online courses.

Tech Stacklink

• Bootstrap 5 (Layout & Responsive)
• Swiper (Carousel components: brand slider, team slider, course slider)
• jQuery 3.7.1 (Basic DOM manipulation & plugin ecosystem)
• Magnific Popup (Image/video lightbox)
• MeanMenu (Mobile navigation)
• Nice Select (Dropdown form styling)
• CounterUp + WOW (Number animation & scroll-triggered entrance animations)
• SCSS (Style preprocessing with modular structure)

Project Structurelink

shotfithtml-10/
├── buyer-file/            # Ready-to-use template files
│   ├── index.html         # Home page
│   ├── about.html         # About Us
│   ├── shop.html          # Shop listing
│   ├── shop-details.html  # Product details
│   ├── news.html          # Blog listing
│   ├── training.html      # Course listing
│   ├── team.html          # Team introduction
│   └── assets/
│       ├── css/           # Stylesheets (main.css contains ~23 module blocks)
│       ├── js/             # Interactive scripts (Swiper, MeanMenu, lightbox, etc.)
│       ├── img/            # Page image assets
│       └── icomon/         # Custom icon fonts
├── documentation/          # Official documentation (template structure & customization)
└── assets/ (documentation)/

Core File Descriptionlink

• buyer-file/index.html — Home page with complete sections: Hero, Courses, Features, Team, etc.
• buyer-file/assets/css/main.css — Main stylesheet defining Kanit/Archivo fonts and site-wide theme colors
• buyer-file/assets/js/main.js — Interactive logic for carousels, navigation, counters, lightboxes, etc.
• buyer-file/assets/css/meanmenu.css — Responsive mobile navigation styles
• buyer-file/assets/css/swiper-bundle.min.css — Carousel component styles

Quick Startlink

1. After downloading and extracting, navigate to the shotfithtml-10/buyer-file/ directory
2. Double-click index.html to preview in a browser, or run via a local server like VS Code Live Server
3. All pages have CSS/JS inlined, no additional build step required

Usage Suggestionslink

All image paths in the template need to be replaced with actual assets. For backend functionality (e.g., contact form submission), you'll need to integrate an API or PHP endpoint yourself. Mobile navigation relies on jQuery MeanMenu — ensure main.js loads correctly.