Pro Template Pack

$24

Four production-ready, responsive, accessible starter templates (landing, dashboard, portfolio, docs) sharing one design-token system. Pure HTML/CSS/JS, no build tools or dependencies.

📁 23 files🏷 v1.0.0

JavaScriptMarkdownJSON

📄 Product Preview

Try the interactive reader and demo tools below, or get the full product with all content unlocked.

📖 Interactive Reader (Free Preview) ⚙ Try Demo Tools 📦 Download Free Sample

📁 File Structure 23 files

starter-templates-pro/ ├── LICENSE ├── README.md ├── guide/ │ ├── 01-overview.md │ ├── 02-customization-guide.md │ └── 03-template-catalog.md ├── shared/ │ └── tokens.css └── templates/ ├── dashboard/ │ ├── README.md │ ├── index.html │ ├── script.js │ └── style.css ├── docs/ │ ├── README.md │ ├── index.html │ ├── script.js │ └── style.css ├── landing/ │ ├── README.md │ ├── index.html │ ├── script.js │ └── style.css └── portfolio/ ├── README.md ├── index.html ├── script.js └── style.css

📖 Documentation Preview README excerpt

Starter Templates Pro

Four production-ready, responsive, accessible static website starter templates that share a common design-token system. Open any template in a browser and start building immediately — no build tools, no package managers, no dependencies.

What's Included

Template	Best for	Key sections
Landing (`templates/landing/`)	SaaS / product marketing	Hero · Features · Pricing · Testimonials · FAQ · CTA
Dashboard (`templates/dashboard/`)	Admin UI / internal tools	Sidebar nav · Stat cards · Bar chart · Activity feed · Data table
Portfolio (`templates/portfolio/`)	Personal / freelance site	Hero · Filterable project grid · About · Contact cards
Docs (`templates/docs/`)	Documentation / knowledge base	Topbar search · Collapsible sidebar TOC · Code blocks · Callouts · Prev/Next nav

Each template is self-contained: copy its folder anywhere and it works.

Requirements

Zero runtime dependencies — no npm, no bundler, no framework
A modern browser (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)
Optionally: python -m http.server 8000 or VS Code Live Server for local development

Quick Start


# Clone or unzip the product folder
cd starter-templates-pro

# Open any template directly:
open templates/landing/index.html
open templates/dashboard/index.html
open templates/portfolio/index.html
open templates/docs/index.html

# Or serve the whole package locally:
python -m http.server 8000
# then visit:
#   http://localhost:8000/templates/landing/
#   http://localhost:8000/templates/dashboard/
#   http://localhost:8000/templates/portfolio/
#   http://localhost:8000/templates/docs/

Template Catalog

Landing Page (`templates/landing/`)

Marketing landing page for a SaaS product (demo brand: NexaFlow). Includes a hero with a pure-CSS kanban preview, six feature cards, a three-step how-it-works section, testimonials, three-tier pricing with a "most popular" badge, FAQ accordion, and email CTA section.

Demo copy: NexaFlow project management platform

Color accent: Blue (#2563eb)

Admin Dashboard (`templates/dashboard/`)

Full app-shell layout: fixed sidebar, sticky topbar, stat cards, a CSS-only bar chart, activity feed, and a projects data table with status pills and progress bars. Sidebar collapses to a slide-in overlay on mobile.

Demo copy: NexaFlow Admin — AcmeCorp workspace

Color accent: Blue (#2563eb)

... continues with setup instructions, usage examples, and more.

📄 Code Sample .js preview

templates/dashboard/script.js /* ========================================================================== Starter Templates Pro — templates/dashboard/script.js Sidebar toggle, theme toggle, search input focus, topbar scroll shadow. Zero dependencies — vanilla JS only. ========================================================================== */ (function () { 'use strict'; /* ── 1. THEME TOGGLE ────────────────────────────────────────────────── */ var themeToggle = document.getElementById('theme-toggle'); function getPreferredTheme() { var stored = localStorage.getItem('theme'); if (stored === 'dark' || stored === 'light') return stored; return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; } function applyTheme(theme) { document.documentElement.setAttribute('data-theme', theme); if (themeToggle) { var isDark = theme === 'dark'; themeToggle.setAttribute('aria-pressed', String(isDark)); themeToggle.setAttribute('aria-label', isDark ? 'Switch to light theme' : 'Switch to dark theme'); } } applyTheme(getPreferredTheme()); if (themeToggle) { themeToggle.addEventListener('click', function () { var current = document.documentElement.getAttribute('data-theme'); var next = current === 'dark' ? 'light' : 'dark'; applyTheme(next); localStorage.setItem('theme', next); }); } /* ── 2. SIDEBAR TOGGLE ────────────────────────────────────────────────── The mobile hamburger button opens/closes the sidebar slide-in panel. Closing also restores body scroll and returns focus to the toggle. */ var sidebar = document.getElementById('sidebar'); var sidebarToggle = document.getElementById('sidebar-toggle'); var sidebarClose = document.getElementById('sidebar-close'); var sidebarOverlay = document.getElementById('sidebar-overlay'); function openSidebar() { if (!sidebar) return; # ... 138 more lines ...

Buy Now — $24 Back to Products