Fitvive

Modern Gym & Fitness HTML Template · Version 1.0.0

HTML5 + CSS3Bootstrap 5.3.8Bootstrap Icons 1.13.1Vanilla JSLight & DarkFully Responsive

View the live template overview ↗

Introduction

Thank you for choosing Fitvive, a modern HTML template for gyms, fitness studios, personal trainers and wellness clubs. It includes:

• 25 HTML pages: two home layouts, ten inner pages (about, programs, program details, trainers, success stories, pricing, gallery, FAQs, contact, 404), six coach profiles, six blog pages and a template overview page.
• A light theme (default) and a complete dark theme with a one-click switch.
• One token-based stylesheet: change a few CSS variables and the whole site re-brands.
• Scroll animations, hover interactions, a class timetable, BMI calculator, pricing switch, filterable masonry gallery with lightbox, and validated forms.
• SEO-ready markup on every page: unique titles and descriptions, canonical links, Open Graph and Twitter cards, and structured data.

No build tools are needed. Open any .html file in a browser and it works.

Folder Structure

Fitvive/
├── Documentation/           ← you are here
│   └── index.html
├── HTML/                    ← upload the contents of this folder to your server
│   ├── index.html           Home 1
│   ├── index-2.html         Home 2
│   ├── about.html           About Us
│   ├── programs.html        Programs
│   ├── program-details.html Program Details
│   ├── trainers.html        Trainers
│   ├── trainer-*.html       6 coach profile pages
│   ├── success-stories.html Success Stories
│   ├── pricing.html         Pricing
│   ├── gallery.html         Gallery (filter tabs, masonry, lightbox)
│   ├── faqs.html            FAQs
│   ├── blog.html            Blog – default list (single wide cards)
│   ├── blog-grid.html       Blog – three-column grid
│   ├── blog-left-sidebar.html   Blog – grid with left sidebar
│   ├── blog-right-sidebar.html  Blog – grid with right sidebar
│   ├── blog-no-sidebar.html     Blog – wide two-column grid
│   ├── blog-details.html    Single article
│   ├── contact.html         Contact Us
│   ├── 404.html             Error page
│   ├── landing.html         Template overview (demos, all pages, features)
│   └── assets/
│       ├── css/style.css            Theme styles (commented, with a table of contents)
│       ├── js/main.js               Theme scripts (vanilla JS, with a table of contents)
│       ├── video/                   Home 2 hero background video + poster
│       ├── images/                  one folder per page with a sub-folder per section
│       │                            (see IMAGE-GUIDE.md), plus brand/, icons/, seo/
│       └── vendor/
│           ├── bootstrap/           Bootstrap 5.3.8 (css + bundle js)
│           ├── bootstrap-icons/     Bootstrap Icons 1.13.1 (css + fonts)
│           └── glightbox/           GLightbox 3.3.0 (gallery lightbox, gallery.html only)
├── Licensing/
│   └── README_LICENSE.txt
└── changelog.txt

Getting Started

1. Unzip the package.
2. Open HTML/index.html in any modern browser to preview the template.
3. Edit pages with any code editor (VS Code, Sublime Text, etc.). Use your editor’s Find in Files / Replace in Files to change something on every page at once.
4. Follow Brand Name, Logo & Favicon and SEO & Social Sharing to make the site yours.
5. To publish, upload everything inside the HTML folder to your hosting (FTP, cPanel, Netlify, Vercel…).

Pages

Brand Name, Logo & Favicon

The brand appears in the logo, page titles, footer wordmark, preloader and a few text blocks. Do these steps once with Replace in Files across the HTML folder.

1. Change the brand name

1. Replace Fitvive with your name across all .html files (match case). This updates the logo text, page titles, meta tags, copyright line, form labels and sample copy.
2. The big outlined word at the bottom of every footer is part of that text:

   <div class="fv-foot__word" aria-hidden="true" …>
     <span class="fv-foot__word-line">Fitvive</span>
     <span class="fv-foot__word-fill">Fitvive</span>
   </div>

   Both spans must contain the same word. For a name longer than about 9 letters, lower its size in style.css (search for .fv-foot__word), or delete the whole div.
3. Check the rotating text badges (search for fv-rotate-badge); their text follows the same replacement.

2. Change the logo

The logo is a round lime disc with an icon, followed by the brand name as text:

<a class="fv-logo" href="index.html" aria-label="Fitvive home">
  <span class="fv-logo__mark"><svg viewBox="0 0 42.1661 42.1664" aria-hidden="true"><use href="#i-logo-mark"/></svg></span>
  Fitvive
</a>

It is used in the header, mobile menu, footer and preloader, and the same icon decorates section labels. Pick one option:

<a class="fv-logo" href="index.html" aria-label="YourGym home">
  <img src="assets/images/logo.svg" alt="YourGym" width="160" height="44">
</a>

The preloader shows the same mark inside <div class="fv-preloader__mark">. Replace it the same way, or delete the whole .fv-preloader block to turn the preloader off.

3. Change the favicon and app icons

Every page links three icon files in its <head>:

<link rel="icon" type="image/svg+xml" href="assets/images/brand/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/brand/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/images/brand/apple-touch-icon.png">

1. Create a square icon (at least 512 × 512 px) from your logo mark.
2. Export three files with the same names: favicon.svg (any size, square viewBox), favicon-32.png (32 × 32 px) and apple-touch-icon.png (180 × 180 px, solid background, no transparency). A free tool such as RealFaviconGenerator can produce all of them from one image.
3. Overwrite the files in assets/images/brand/. Because the names stay the same, no HTML needs to change.
4. Browsers cache favicons strongly. If you still see the old one, open the icon URL directly once or use a private window.

The browser bar colour on mobile comes from <meta name="theme-color" content="#052b29">. Change the value to your brand’s dark colour.

Contact Details & Map

Use Replace in Files on the HTML folder for each value:

Map: in contact.html, change the q= value in the map iframe src and in the “Open in Google Maps” link to your address.

Colours & Fonts

Primary fills buttons, discs and highlights; secondary teal carries text accents, checkmarks, feature bands and the footer. To re-brand, change --fv-primary, --fv-primary-rgb (the same colour as r, g, b) and --fv-secondary at the top of style.css.

Font: Outfit (weights 300–800). To use another Google Font, replace the font <link> in each page’s <head> and update --fv-font.

Light & Dark Themes

The light theme is the default; a full dark theme is included. Visitors switch with the round sun/moon button above “back to top”, and their choice is remembered.

• To make dark the default, add data-theme="dark" to the <html> tag of each page.
• To remove the switch, delete the .fv-theme-fab button near the end of each page.
• Theme colours live in section 02. Themes of style.css: :root (light) and :root[data-theme="dark"].
• Some areas always stay dark (photo heroes, feature bands, footer, cards over photos). They are listed in the “always-dark scope” rule in the same section.
• Highlighted heading words (<span class="text-lime">) get a lime marker on light backgrounds and lime text on dark ones.

SEO & Social Sharing

Every page ships with complete, unique meta tags. When you publish, update them as follows.

1. Titles and descriptions

Each page has its own <title> (keep it under ~60 characters) and <meta name="description"> (about 120–160 characters). The same text is repeated in the og: and twitter: tags of that page, so update all of them together.

2. Your domain

Canonical links, og:url, the share image and the structured data use the demo address https://fitvive-gym-template.vercel.app/. Replace it in all files with your own domain, keeping the trailing slash, for example https://www.yourgym.com/.

<link rel="canonical" href="https://www.yourgym.com/about.html">
<meta property="og:url" content="https://www.yourgym.com/about.html">

3. Share image (Open Graph)

Links shared on Facebook, LinkedIn, WhatsApp, Slack and X show assets/images/seo/og-image.jpg. Replace it with your own 1200 × 630 px JPG (under ~300 KB) using the same file name. Social networks cache previews; use the Facebook Sharing Debugger or LinkedIn Post Inspector to refresh them.

4. Structured data

Search engines read the <script type="application/ld+json"> blocks in the <head>:

• ExerciseGym (home pages and contact page): name, address, phone, e-mail and opening hours. Edit these to match your gym.
• BreadcrumbList (inner pages): matches the visible breadcrumb trail.
• BlogPosting (blog details): headline, image, date and author. Update them for each real article.

Check your pages with Google’s Rich Results Test after publishing.

5. Indexing

All pages use <meta name="robots" content="index, follow"> except 404.html, which is noindex. If you keep landing.html only as a preview page, change its robots tag to noindex or delete it. Add a sitemap.xml listing your live pages and submit it in Google Search Console.

HTML Structure

Every page follows the same skeleton. The header, mobile menu and footer are identical on every page, so copy a change to all pages with Replace in Files.

<body>
  <svg hidden>…<symbol id="i-…">…</svg>          Icon sprite used on this page
  <a class="… fv-skip" href="#main">               Skip-to-content link (keyboard users)
  <div class="fv-preloader">…</div>               Preloader
  <header class="fv-header">                       Top bar + navigation (sticky on scroll)
  <div class="offcanvas fv-offcanvas" id="mobileMenu">  Mobile menu
  <main id="main">
    <section class="fv-phero">…</section>          Inner-page hero: breadcrumb + title
    <section class="section">…</section>           Content sections
    <section class="section section-alt">…</section>  Alternate (white) background
  </main>
  <section class="fv-cta-band">…</section>         “Ready to commit?” call-to-action
  <footer class="fv-foot">…</footer>              Footer + wordmark
  <button class="fv-theme-fab">                    Light/dark switch
  <button class="fv-back-top">                     Back to top with progress ring
  <div class="modal" id="videoModal">…</div>      Shared video popup
</body>

Section backgrounds alternate between the base colour and .section-alt, so neighbouring sections never match. .section-teal is the deep-teal feature band.

Header Menu

Menu order: Home ▾ (Home 1, Home 2) · About Us · Programs · Trainers · Pricing · FAQs · Pages ▾ (every inner page) · Blog ▾ (six layouts), plus the Contact Us button.

• Current page: add class="active" aria-current="page" to its link in .fv-menu (desktop) and .fv-mobile-menu (mobile). Inside a dropdown, add aria-current="page" to the .fv-sub__link; it gets a lime dot.
• Add a dropdown link: copy one <li> inside the <ul class="fv-sub"> and the matching <li> in the mobile list (#mSubHome, #mSubPages or #mSubBlog).
• Remove a link: delete its <li> in both menus on every page.
• Dropdowns open on hover, click or keyboard (Enter/Space), and close with Escape or a click outside. Below 1200 px the menu moves into the mobile panel.

Customizing CSS

All design values are CSS variables at the top of assets/css/style.css. Change them once and the whole template updates:

:root {
  --fv-primary: #a6e300;        /* brand accent (buttons, highlights) */
  --fv-primary-rgb: 166, 227, 0; /* the same colour as r, g, b (tints) */
  --fv-secondary: #064343;      /* teal accents */
  --fv-bg: #f2f5ea;             /* page background (light theme) */
  --fv-bg-alt: #ffffff;         /* .section-alt background */
  --fv-surface: #ffffff;        /* cards, inputs */
  --fv-band-bg: #052b29;        /* top bar and feature bands */
  --fv-black: #000000;          /* every button hover */
  --fv-dark: #011010;
  --fv-shadow-rgb: 0, 0, 0;     /* shadow colour */
  --fv-shadow: …;  --fv-shadow-lg: …;  --fv-shadow-lift: …;   /* soft elevations */
  --fv-font: "Outfit", system-ui, sans-serif;
  --fv-radius: 16px;
  --fv-section-y: clamp(4.5rem, 8vw, 7.5rem);  /* vertical section spacing */
}

The stylesheet starts with a numbered table of contents (01 Design Tokens … 39 Landing). Search for a section number to jump to it.

Components

Animations

Scroll animations use a lightweight IntersectionObserver (no extra library). Add data-reveal to any element:

<div data-reveal="up">…</div>                 fade in + slide up
<div data-reveal="left" data-delay="200">…</div>  delay in ms
<!-- values: up | down | left | right | zoom | fade | clip -->

JavaScript Features

assets/js/main.js is plain JavaScript and only needs the Bootstrap bundle (offcanvas menu, accordion, modal). It begins with a table of contents.

Forms

The contact, booking, question and newsletter forms use Bootstrap validation (class="needs-validation" novalidate). Because this is a static template, a valid submission shows a success message but does not send data. To connect a backend, set the form’s action and edit the marked spot in main.js (section 12):

// TODO: send the form data to your backend here, e.g.
fetch(form.action, { method: "POST", body: new FormData(form) });

Services such as Formspree, Netlify Forms, Getform or your own PHP script all work.

Blog

• To add a post to a listing page, copy one <article class="fv-post"> and change its image, category, date, title, excerpt, author and links.
• For a new article, duplicate blog-details.html, rename it, then update the title, meta tags, structured data, table of contents (each link’s #id must match a heading id) and content.
• Pagination links are placeholders (href="#"); point them to your page 2, page 3, etc.

Gallery

Each photo in gallery.html is a <figure class="fv-mgal__item" data-gcat="strength"> whose link opens the large photo in the lightbox:

<a class="fv-mgal__link glightbox" href="assets/images/gallery/lightbox/g-01.jpg"
   data-gallery="fitvive" data-title="Caption" data-description="Category">
  <img src="assets/images/gallery/photo-grid/g-01-784x980.jpg" alt="Describe the photo" width="392" height="490" loading="lazy">
  …
</a>

Add a filter by adding a tab <button class="fv-gtab" data-gfilter="yoga"> and setting data-gcat="yoga" on its photos. Update the counts in the tabs by hand. The lightbox only loads on gallery.html.

Icons

UI icons use Bootstrap Icons 1.13.1: <i class="bi bi-arrow-up-right"></i>.

The fitness illustrations (program and benefit icons, logo mark) are SVG files in assets/images/icons. Each page has a hidden SVG sprite after <body> with one <symbol id="i-name"> per icon it uses; icons are placed with <svg viewBox="…"><use href="#i-name"/></svg>. Shapes use fill="currentColor", so they follow the CSS color. To add an icon to a page, copy its <symbol> from another page or build one from the SVG file.

Images

Photos are stored by page and section in assets/images: one folder per page (home-1/, about/, blog/ …) with a sub-folder for each section (home-1/hero-program-picker/). Each file name ends with its exact pixel size, for example team-1920x820.jpg. Every image has width/height attributes (no layout shift) and below-the-fold images load lazily.

assets/images/IMAGE-GUIDE.md lists every file with its pixel size, the size it is shown at, and the pages and sections that use it. When you replace a photo, keep the file name and the same width and height (or at least the same aspect ratio).

Always write a short alt text that describes the photo; use alt="" only for purely decorative images.

Accessibility & Performance

• Semantic landmarks, one <h1> per page, a skip-to-content link, visible focus styles and keyboard support for menus, tabs, accordions, sliders and the lightbox.
• All motion respects the reduce motion setting. If you change colours, check text contrast with a tool such as the WebAIM Contrast Checker.
• One stylesheet, one script, no jQuery; images lazy-load and carry dimensions; icons come from one small sprite per page; the gallery script only loads on the gallery page.
• Markup passes an automated HTML validator with no errors.

Browser Support

Latest Chrome, Edge, Firefox, Safari and Opera, plus iOS Safari and Chrome for Android.

Credits & Image Sources

Code, fonts and icons (included)

Images and video (demo only)

Changelog

Version 1.0.0 – Initial release

• 25 HTML pages:
  • Two home layouts: Home 1 (program picker) and Home 2 (athlete spotlight with background video).
  • About, Programs, Program Details, Trainers, 6 trainer detail pages, Success Stories, Pricing, Gallery, FAQs, Contact and 404.
  • 6 blog pages: default list, 3-column grid, left sidebar, right sidebar, no sidebar and an article page.
  • Template overview page (landing.html) with both demos, every page, features and devices.
• Bootstrap 5.3.8, Bootstrap Icons 1.13.1 and GLightbox 3.3.0 (MIT), all bundled locally. No jQuery.
• Light theme by default with a complete dark theme and a one-click switch.
• Header menu with white dropdowns (Pages opens a two-column menu) and a mobile offcanvas menu.
• Scroll reveal, split headline, counters, parallax, marquee and rotating badges.
• Hover interactions on buttons, programs, trainers, plans, cards and links.
• Pricing monthly/yearly switch, video popup, class timetable, BMI calculator, and a filterable masonry gallery with lightbox.
• Program Details with key-facts strip, sticky section tabs, session timeline, weekly slots and a booking sidebar.
• Validated contact, booking and question forms.
• SEO on every page:
  • Canonical links.
  • Open Graph and Twitter cards with a 1200x630 share image.
  • Structured data (gym, breadcrumbs, article).
  • PNG favicon and Apple touch icon.
• Fully responsive, reduced-motion friendly, with accessibility landmarks and visible focus styles.
• Markup passes the HTML validator.
• Images organised by page and section (assets/images/<page>/<section>), each file named with its exact pixel size, with width and height on every image. IMAGE-GUIDE.md lists every image.
• Documentation with branding, contact details, colours and fonts, themes, SEO, components, JavaScript, images, credits and support.

Support

If you have a question that this document doesn’t answer, buyers can reach us in any of these ways. Please include your purchase code and a link to the page in question.

• Emailwrteam.divy@gmail.com
• Microsoft TeamsChat with us on Microsoft Teams ↗

© Fitvive. All rights reserved.