Build boldly.
Customize safely.

Getting started

Unzip the package, keep its relative folders together, and open any file in html/. A local server is recommended for testing clipboard behavior, URLs, and browser tooling.

1. 01
   Extract the package.

   Keep assets/, html/, and docs/ at the same relative level.

2. 02
   Start a static server.

   PHP is shown because it is widely available; any static server works.

3. 03
   Choose a starting page.

   Duplicate the closest homepage or inner page, then replace demo copy and artwork.

php -S localhost:8080
# Open http://localhost:8080/html/index-saas.html

Folder and file structure

impact-v1.0.0/
├── README.md, CHANGELOG.txt, credits.txt
├── robots.txt, sitemap.xml
├── docs/index.html
├── html/                 # 24 ready-to-use page templates
└── assets/
    ├── css/              # Bootstrap + readable/minified Impact CSS
    ├── js/               # Bootstrap Bundle + namespaced Impact JS
    ├── icons/            # Bootstrap Icons CSS and webfonts
    ├── img/              # Brand, Open Graph, and marketplace artwork
    ├── video/            # Local CC0 video hero demonstration
    └── fonts/            # Self-hosting instructions

Colors, fonts, and logo

Change the visual identity with tokens

Edit the design-token block at the top of assets/css/impact.css, then regenerate impact.min.css. Components inherit these values automatically.

:root,
[data-bs-theme="light"] {
  --impact-accent: #0057ff;
  --impact-accent-rgb: 0, 87, 255;
  --impact-highlight: #ffdf52;
}

Live component gallery

Every example uses the same local assets as the page templates. Copy the markup, preserve its data-impact-* hooks, and include the dependency named in the example.

Buttons and feature card

Carousel hero variation

Uses Bootstrap Carousel with no third-party slider. Keep controls keyboard reachable and every slide heading meaningful.

Video-background hero variation

The local, muted loop avoids autoplay audio and includes a poster/fallback. Replace both media and poster with optimized project assets.

Template page directory

Every desktop navbar includes a complete Pages dropdown, and every mobile offcanvas navigation includes an expandable Pages directory. Both connect every homepage, inner page, state page, and this documentation page. The lower-left Browse templates utility keeps that directory available on pages without a navbar. Remove initPageDirectoryMenus() and initPreviewNavigator() from assets/js/impact.js when preparing a buyer's customized production site.

Validated contact form

JavaScript reference

Impact exposes idempotent initializers through window.Impact. The main init() runs after DOM readiness. Call the relevant initializer again after injecting matching markup; bound elements are guarded against duplicate listeners.

// After adding new filter cards or validated forms:
window.Impact.initPortfolioFilter();
window.Impact.initFormValidation();
window.Impact.initScrollReveal();

initPageDirectoryMenus() builds the complete desktop Pages dropdown and mobile directory. initPreviewNavigator() supplies the same keyboard-accessible catalog on pages without navigation. Both determine correct local links from either html/ or docs/.

Replace placeholder content

Credits and licenses

The authoritative third-party attribution record is credits.txt. Buyer permissions are governed by the applicable Wrapmarket License Terms.

Version 1.0.0

Initial marketplace release with six homepage variants, 18 inner pages, the complete shared component system, two theme skins, local Bootstrap assets, original artwork, documentation, SEO support files, and vanilla-JavaScript interactions.

FAQ and support