Documentation

High-End Business Portfolio Templates

Nine industry-specific site templates — Finance & Wealth Advisory, Real Estate, Management Consulting, Architecture & Interior Design, Law Firm, Medical & Dental, Creative Agency, Marketing Agency, and Travel Agency — each with its own color system, type pairing, and layout logic, built entirely with Tailwind CSS.

No build tools, bundlers, or npm install required to use the templates. Every page is plain HTML with its Tailwind CSS precompiled into a static stylesheet, so you can open any file directly, or upload it to standard web hosting, and start editing immediately in a text editor.

File Structure

Each industry has its own top-level folder. Shared CSS/JS lives once in /assets and is referenced by every template with a relative path, so it stays in sync across the pack.

/index.html                 Pack showcase & template gallery
/documentation.html         This file
/assets/base.css            Shared base styles (reveal-on-scroll, placeholder imagery, nav states)
/assets/main.js             Shared interactivity (nav, filters, accordions, tabs, pricing toggle)
/assets/tailwind-*.css      Precompiled per-template Tailwind CSS (no CDN, works offline)
/screenshots/               Marketing screenshots used on the showcase page
/screenshots/envato/        Envato-spec thumbnail (80x80) & main preview (590x300) images

/finance/index.html         Single-page template (source, placeholder imagery)
/finance/multipage/         Home, About, Services, Work, Contact — split into 5 pages
/preview/finance/index.html Live-preview build with real stock photography wired in

/real-estate/ ...           Same 3-way structure
/consulting/ ...
/architecture/ ...
/law/ ...
/medical/ ...
/creative-agency/ ...
/marketing/ ...
/travel/ ...

The single-page file inside each industry folder is your real starting point for a build — it's the one that ships with neutral placeholder blocks instead of licensed photography (see Images). The multipage folder is the same design split across five conventional pages. The preview copy exists purely so you — and your own buyers, if you resell or extend this — can see the layout dressed with real photography; treat it as a demo, not a delivery file.

Getting Started

1. Pick a template. Open index.html in a browser and use the gallery to preview all nine, or jump straight into an industry folder.
2. Open the single-page file in any code editor (VS Code, Sublime, etc.) — it's plain HTML, no compiling required.
3. Edit copy directly in the markup. Headings, paragraphs, and labels are plain text nodes — find and replace them in place.
4. Swap colors and fonts in the tailwind.config block at the top of the file (see Colors).
5. Replace placeholder images with your own photography (see Images).
6. Deploy by uploading the folder to any static host (Netlify, Vercel, cPanel, S3, etc.) — there's no server-side code or database.

Colors

Every template defines its palette once, as named colors, precompiled into a stylesheet at assets/tailwind-<template>.css — nothing is hard-coded as raw hex deeper in the markup. There are two ways to change a color:

Quick swap (no tools needed): open the template's compiled CSS file and find/replace the color's rgb() value — every rule using that name (bg-ink, text-accent, etc.) updates together since they all reference the same generated declaration.

Full rebuild (for renaming keys or adding new colors): each page keeps its original palette as an HTML comment directly above its stylesheet <link> tag. Paste it into a tailwind.config.js, install the Tailwind CLI (npm install -D tailwindcss@3), and run it against that template's HTML files to regenerate the CSS:

module.exports = {
  content: ["./law/**/*.html"],
  theme: {
    extend: {
      colors: {
        ink:    '#201d1a',   // primary dark / text color
        cream:  '#f7f2ea',   // page background
        burgundy: '#6e2334', // accent color
        // ...rename or add as many as you like
      },
    },
  },
};

Each of the nine templates uses a different, deliberately-matched palette (e.g. Finance runs a dark ink-and-gold scheme, Medical runs a light warm teal). Utility classes are literal strings like bg-ink, not variables, so a renamed key needs a find-and-replace across the HTML too.

Fonts

Typefaces load from Google Fonts via a <link> in <head>, and map to two utility classes, font-display (headings) and font-body (paragraph text), compiled into the same assets/tailwind-<template>.css stylesheet as the colors.

To swap a typeface: change the Google Fonts <link href> to the family you want, then either edit the .font-display{font-family:...} / .font-body{font-family:...} rules directly in the compiled CSS, or update fontFamily in the palette comment above the stylesheet <link> and rebuild with the Tailwind CLI:

fontFamily: {
  display: ['"Cormorant Garamond"', 'serif'],
  body: ['"Jost"', 'sans-serif'],
},

Images

The single-page and multi-page source files use a lightweight placeholder block (.img-ph, defined in assets/base.css) instead of licensed photography — a striped panel with a small caption naming what should go there, e.g. "Hero destination photo". This keeps the delivered files free of any third-party image licensing.

To drop in your own image, replace the placeholder <div class="img-ph ..."> with a standard <img> tag, keeping the surrounding classes for aspect ratio and rounding:

<!-- before -->
<div class="img-ph aspect-[4/5] rounded-sm" data-label="Hero destination photo"></div>

<!-- after -->
<img src="images/hero.jpg" alt="Kyoto at dusk"
     class="aspect-[4/5] rounded-sm object-cover w-full h-full">

About the /preview folder: each industry's preview/ copy wires in real photography from Unsplash purely so the layout can be demonstrated and screenshotted — Unsplash's license permits this commercial, royalty-free use with no attribution required. Those photos are not bundled as separate image files you take ownership of, and the preview build is a demo aid, not a delivery template — build your real site from the single-page or multipage source, then add licensed photography or your own.

Content & Sections

Every template is a straight top-to-bottom sequence of <section> elements, commented with their purpose:

<!-- ============ HERO ============ -->
<section id="top"> ... </section>

<!-- ============ SERVICES ============ -->
<section id="services"> ... </section>

To remove a section, delete its whole <section>...</section> block and the matching link in the nav at the top of the file. To duplicate a card, copy one repeating item (a service card, team member, pricing tier) inside its parent grid and edit the copy — the grid's gap-* classes handle spacing automatically.

Interactive JS Components

One shared file, assets/main.js, powers every interactive piece across all nine templates via data-* attributes — no build step, no dependencies. Add or remove the matching attribute to opt an element in or out.

Single-Page vs Multi-Page

The single-page build keeps every section — About, Services, Work, Contact — on one URL with anchor navigation, which suits a lean, scroll-driven site. The multi-page build under each industry's /multipage folder splits the same design into five separate HTML files (Home, About, Services, Work, Contact) sharing one header and footer, for sites that want distinct URLs per section (better for longer-form content and SEO on individual pages). Both share /assets, so styling and behavior stay identical between the two — pick whichever structure fits the project and delete the other.

Browser Support

Tested in the current versions of Chrome, Safari, Firefox, and Edge, on desktop and mobile. Uses standard CSS Grid, Flexbox, and IntersectionObserver — no polyfills included, as all are broadly supported in evergreen browsers.

Licensing & Credits

• Template code: covered by your Envato license for this item — see your purchase/regular vs. extended license terms on the item page for usage rights.
• Tailwind CSS: MIT licensed. Compiled locally per template and bundled as static CSS files in assets/ — no CDN calls, so the templates work fully offline.
• Fonts: all typefaces are served from Google Fonts under the SIL Open Font License — free for commercial use.
• Placeholder imagery: the delivered single-page and multi-page files contain no photography — only CSS-drawn placeholder panels — so there is nothing to license there. Source your own photography or a licensed stock subscription for production use.
• Preview-build photography: sourced from Unsplash for demonstration only, under Unsplash's free, royalty-free commercial license. These images are not part of the deliverable template files.

FAQ & Support

Changelog