Fintech & banking HTML template · ThemeForest edition

Documentation

Welcome to Fembills. This guide explains how the package is organized, how to run and install it locally or on a host, and how to reshape copies to match your real product—from brand colors and copy to removing the ThemeForest preview chrome.

What you bought (at a glance)

Fembills is a static theme: plain HTML, one main CSS bundle, and a small amount of JavaScript. There is no PHP, React build step, or database—drop the folder on any web server (or a static host like Netlify, GitHub Pages, S3) and it works.

Ideal for

Marketing sites, product landing pages, fintech-style onboarding, and reference dashboards you can hand to a developer to port into React, Vue, or a mobile shell.

Before you customize

Open credits.txt (fonts & third-party notes) and changelog.txt (releases) in the theme root—quick compliance and version context.

Install & run (step by step)

Unzip the download somewhere memorable, e.g. Fembills theme/. Do not omit inner folders—paths are relative.
Open the demo hub: double-click index.html or open it from your editor. You will see thumbnails linking into every major demo.
Use a local server (strongly recommended): some browsers limit scripts or font loading on file://. Serving the folder over HTTP avoids surprises.

Local server examples

Python (Mac/Linux or Windows with Python installed)—from the theme root (where index.html lives):

cd path/to/Fembills-theme python -m http.server 8080

Then visit http://127.0.0.1:8080/.

Windows PowerShell Older PowerShell does not support && between commands. Use a semicolon instead, for example:

Set-Location "C:\path\to\Fembills-theme"; python -m http.server 8080

Node alternative: npx serve or VS Code extension Live Server pointed at the same root folder.

Tip Always treat the directory that contains index.html, css/, js/, and pages/ as the document root when testing—otherwise links like ../../css/fembills.css will break.

How the code is arranged

Think of the project in three layers. Everything hangs off flat HTML files; there is no bundler rewriting paths for you.

1 · Presentation (css/fembills.css)

One stylesheet holds design tokens (:root variables), layout (nav, hero, sections, footer, dashboard shell), components (cards, buttons, tables), and responsive breakpoints. Change the brand once in :root and most of the UI follows.

2 · Behavior (js/fembills.js)

Mobile menu toggles, dashboard drawer/backdrop, service-form widgets (network chips, amount tiles), and small UX touches. It enhances markup via classes and data-* attributes—no framework required.

3 · Pages (pages/**/*.html)

Each file is self-contained HTML: navbar, main content, footer, and script tags. Many pages repeat similar nav blocks—normal for HTML retail themes; for a production app you might later extract includes (SSI, templating, or a static site generator).

Optional · Demo chrome (js/header-instruction.js)

Injects the top “Fembills Theme · …” bar and (on services) the brown “Page Style Demos” strip. Config is set per page via window.FEMBILLS_HEADER_INSTRUCTION. Not part of your product UI—remove for launch (see Production).

Request flow (mental model)

Browser loads HTML → linked CSS paints layout → fonts may load from Google (see @import in CSS) → inline config runs → header-instruction.js injects demo strip (if enabled) → fembills.js wires interactions. No build step; what you ship is what you edit.

Folder map (reference)

fembills/ ├── index.html ← Demo hub: links to all previews ├── READ-ME-FIRST.txt ← Ultra-short orientation ├── changelog.txt ├── credits.txt ├── documentation/ │ └── index.html ← This documentation (you are here) ├── css/ │ └── fembills.css ← Single global stylesheet ├── js/ │ ├── fembills.js ← Theme interactions │ └── header-instruction.js ← ThemeForest preview bars (optional) └── pages/ ├── home/ ← home-1 … home-5 (distinct landings) ├── dashboard/ ← dash-1 … dash-5 (app-style layouts) ├── services/ ← Service flows; multiple visual styles each ├── company/ ← About, blog, careers, legal, contact… ├── auth/ ← Login & register variants └── pricing.html ← Standalone pricing / fees page

Files under pages/ use relative URLs to reach tree roots, e.g. ../../css/fembills.css from pages/services/. If you move a file deeper or shallower, adjust those paths.

Included pages & demos

The package ships 50+ HTML screens. Use root index.html as your visual sitemap.

Category	Path	What to use it for
Home	`pages/home/`	Pick one as your marketing homepage, or mix sections across files.
Dashboard	`pages/dashboard/`	Reference SPA-style shell: sidebar, cards, tables, mobile drawer.
Services	`pages/services/`	“Pay bill / buy airtime” style flows; several palette/layout variants per category.
Company	`pages/company/`	Trust content: about, blog list, careers, press, contact, legal.
Auth	`pages/auth/`	Sign-in and sign-up layouts (split or card).
Pricing	`pages/pricing.html`	Fee transparency table; adapt numbers and rows to your business.

Preview strip & production build

Buyers often want a clean site without the grey “Fembills Theme · Services | ← All Demos” bar. That UI is not scattered through every HTML file—it is centralized.

File to delete or stop loading: js/header-instruction.js
In each page under pages/, remove two lines immediately before fembills.js: the FEMBILLS_HEADER_INSTRUCTION script and the header-instruction.js script tag. Paths look like ../../js/... or ../js/... on pricing.html.
Soft-disable without deleting files: set the config object to {"enabled":false} before including the loader (you still need a minimal object so the script exits cleanly).

Removing the preview strip from every page at once

You do not need to open each HTML file by hand. The demo loader is always the same pattern: an inline window.FEMBILLS_HEADER_INSTRUCTION assignment and a header-instruction.js script tag near the bottom of the file (just before fembills.js on most pages).

Find in folder (recommended): In VS Code / Cursor, use search in pages/ for FEMBILLS_HEADER_INSTRUCTION. Delete each whole <script>…</script> line. Then search for header-instruction.js and delete those <script src="…"></script> lines. Include pages/pricing.html (it uses ../js/ instead of ../../js/). Leave documentation/index.html as-is unless you edit those mentions on purpose—they are only explanatory text, not loaders.
Regex replace in files: If your editor supports multi-file replace, you can remove both tag types with patterns; double-check that fembills.js remains on every page.

After no page under pages/ loads the script, delete js/header-instruction.js from the package (optional if you prefer to keep an unused file).

Optional · Python one-shot from the theme root (removes both tags from every pages/**/*.html):

import re from pathlib import Path root = Path("pages") cfg = re.compile(r'<script>window\.FEMBILLS_HEADER_INSTRUCTION\s*=\s*[^<]+</script>\s*', re.MULTILINE) loader = re.compile(r'<script\s+src="[^"]*header-instruction\.js"\s*></script>\s*', re.MULTILINE) for path in root.rglob("*.html"): text = path.read_text(encoding="utf-8") new = loader.sub("", cfg.sub("", text)) if new != text: path.write_text(new, encoding="utf-8", newline="\n")

Then delete js/header-instruction.js manually if you no longer need it.

Layout note Responsive rules for auth split pages target #fembills-header-instruction when the strip exists. After removal, your markup still works; only those adjacent-layout hacks no longer apply (your auth grid is unchanged in HTML).

Editing for your business

Use this as a practical customization runway—order is roughly how most teams ship.

Pick your spine. Choose one home-*.html as the landing, one dash-*.html if you need an app preview, and delete or ignore demos you will never use to reduce clutter.
Rename and rewrite. Global find/replace for “Fembills” → your product name. Replace hero headlines, stat numbers, testimonial copy, and footer columns with real content.
Wire navigation once. Navbar and footer link to your real routes. Every page duplicates similar nav today—update one page, then propagate (or script a replace) so CTAs like “Get Started” always hit your true signup URL.
Forms. Inputs are static. Point them at your backend or SaaS (Formspree, custom API) by changing <form> actions and adding method/fields as needed—or keep them as demo-only.
Law & compliance. Replace placeholder legal links in footers with your Terms/Privacy URLs; adjust company addresses and regulator copy where shown.
Remove the preview strip (see above) before customer-facing launch.

Scaling up If you outgrow copy-pasted navbars, move to a static generator (11ty, Hugo), server includes, or a SPA—this theme is your design reference, not a locked architecture.

Branding, CSS & assets

Colors (single source of truth)

Open css/fembills.css and edit the top of the file:

:root { --gold:#ffc904; --gold-dark:#a06b00; --orange:#ff590f; --navy:#36355a; --navy-deep:#1e1d3a; /* …more tokens */ }

Buttons, gradients, borders, and many accents read these variables—tweak a few values for a different mood without hunting every rule.

Logo

The mark is inline SVG inside .logo-mark. Swap the SVG, or place an <img src="…"> there and size it with CSS. Keep the surrounding .logo structure for alignment with nav text.

Fonts

Plus Jakarta Sans is pulled from Google Fonts via @import. For strict privacy/offline builds, self-host the font files, remove the import, and point font-family in body to your files.

Per-page experiments

Some demos add a small <style> block in <head> (e.g. dark hero tweaks). Use that pattern for one-off campaigns; move repeated rules into fembills.css when they stabilize.

JavaScript & interactions

js/fembills.js (runs when the DOM is ready) roughly provides:

Marketing pages: hamburger toggles full-screen mobile menu; Escape and link clicks close it where wired.
Dashboards: injects/uses menu control, slide-out sidebar, backdrop, body scroll lock on small screens; bottom “Services” can open the same drawer.
Service flows: toggles for network chips, amount tiles, plan cards; optional wire attributes for demos.
Polish: scroll animations, button ripples, showToast() for demo messaging.

To slim the theme, remove unused classes from HTML or comment sections in fembills.js—keep a backup before deleting behavior you might need later.

Deployment & hosting

Upload the entire package (or your pared-down subset) preserving css/, js/, and pages/. Set your server’s default document to your chosen homepage if it is not root index.html.

Google Fonts require network access at runtime unless you self-host. For HTTPS static sites, no special headers are required for these assets.

Browser support

Layout uses modern CSS: flexbox, grid, clamp(), custom properties, sticky headers. Target current Chrome, Firefox, Safari, and Edge. Dashboard drawer and service pages are tested for mobile WebKit and Chromium.

Credits & changelog

Third-party and attribution: credits.txt. Release history: changelog.txt in the theme root.

Author checklist (ThemeForest)

If you maintain the item as an author, before upload verify:

All internal links resolve from the zip root (no 404s).
This documentation file, changelog, and credits ship with the package.
No machine-specific paths or personal drafts inside the archive.
Marketplace preview images and description match the demos in the zip.
You hold rights to every asset in the bundle.