← Back to all products
$19
Agency Template
Creative agency template with portfolio showcase, case studies, and team section.
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 7 files
agency-template/
├── LICENSE
├── README.md
├── assets/
│ └── README.md
├── index.html
├── script.js
└── style.css
📖 Documentation Preview README excerpt
Agency Template
A creative agency website template for digital agencies, studios, and consultancies. Showcase your services, portfolio, team, and process with a modern layout.
Price
$19 -- one-time purchase, lifetime updates.
Features
- Fully responsive -- Mobile-first design with tablet and desktop breakpoints
- Dark/Light mode -- Built-in theme toggle, persists to localStorage
- No dependencies -- Pure HTML, CSS, and vanilla JavaScript
- Under 400KB -- Lightweight and fast-loading
- Scroll animations -- Reveal-on-scroll using Intersection Observer
- SEO ready -- Semantic HTML5, meta tags, Open Graph tags
- Accessible -- ARIA labels, keyboard navigation, proper contrast ratios
- CSS custom properties -- Easy color, font, and spacing customization
Sections
- Hero with agency tagline and CTA
- Services offered with descriptions
- Portfolio / case study showcase
- Process steps (how we work)
- Team members with roles
- Client logos and testimonials
- Contact form
- Footer with office info and social links
What's Included
agency-template/
├── index.html # Semantic HTML5 with all sections
├── style.css # Mobile-first styles, light + dark themes
├── script.js # Theme toggle, scroll reveal, carousel, form validation, counters
├── manifest.json # Product metadata and file listing
├── assets/
│ └── README.md # Instructions for adding your own images/logos
├── README.md # This file
└── LICENSE # MIT License
Installation
1. Download and unzip the template
2. Open index.html in your browser
3. Edit the HTML content with your agency info
4. Deploy to any static hosting provider
# Open locally
open index.html
# Or use a local server
python -m http.server 8000
Customization
... continues with setup instructions, usage examples, and more.
📄 Code Sample .js preview
script.js
/**
* Agency Template — script.js
* ============================
* Vanilla JavaScript — zero dependencies.
*
* This file implements four shared mechanics used across every
* Starter Templates Pro template:
*
* 1. THEME TOGGLE — light / dark, persisted to localStorage
* 2. SCROLL REVEAL — IntersectionObserver on [data-reveal] elements
* 3. MOBILE NAV — hamburger toggle with aria-expanded + Escape key
* 4. SMOOTH SCROLL — in-page anchor links with reduced-motion respect
*
* Plus template-specific features:
* 5. TESTIMONIALS CAROUSEL — prev / next / dots, keyboard accessible
* 6. CONTACT FORM VALIDATION — client-side with inline error messages
* 7. COUNTER ANIMATION — animate stats numbers on scroll into view
*/
(function () {
'use strict';
/* ===========================================
1. THEME TOGGLE
=========================================== */
var themeToggle = document.getElementById('theme-toggle');
var root = document.documentElement;
/** Determine initial theme: localStorage > OS preference > light */
function getInitialTheme() {
var stored = localStorage.getItem('theme');
if (stored === 'dark' || stored === 'light') return stored;
return window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light';
}
/** Apply theme to <html> and update toggle button ARIA */
function applyTheme(theme) {
root.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'
);
}
}
# ... 307 more lines ...