Description
.tpl-section{background:#0f0f0f;border:1px solid #c9a84c;border-radius:10px;padding:28px 32px;margin:28px 0;font-family:’Segoe UI’,system-ui,sans-serif;color:#e8e8e8}
.tpl-section h3{color:#c9a84c;font-size:1.05rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid #2a2a2a}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.tpl-grid li{background:#181818;border:1px solid #2a2a2a;border-radius:7px;padding:14px 16px;font-size:.9rem;line-height:1.5}
.tpl-grid li strong{display:block;color:#c9a84c;margin-bottom:4px;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
.tpl-included{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;list-style:none;margin:0;padding:0}
.tpl-included li{display:flex;align-items:flex-start;gap:9px;background:#181818;border-radius:7px;padding:10px 13px;font-size:.88rem;line-height:1.45}
.tpl-included li::before{content:”✓”;color:#c9a84c;font-weight:700;flex-shrink:0;margin-top:1px}
.tpl-stack{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tpl-stack li{background:#1a1a1a;border:1px solid #c9a84c33;border-radius:20px;padding:5px 14px;font-size:.8rem;color:#d4b96a;font-weight:600}
.tpl-for{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tpl-for li{background:#1a1a1a;border:1px solid #3a3a3a;border-radius:6px;padding:7px 14px;font-size:.85rem;color:#ccc}
.tpl-for li::before{content:”→ “;color:#c9a84c}
Agency Homepage Template
Make a powerful first impression with this bold agency template. The dark, dramatic design is perfect for creative studios, marketing agencies, and digital consultancies who want to project confidence and capability.
Feature Highlights
- Case Studies Grid3 project cards with cover image, client name, service tag, result metric, and hover reveal CTA.
- Team Section4-column team grid with photo, name, role, and social icons. Hover card flip reveals short bio.
- Client LogosGreyscale logo bar with CSS colorize on hover. Scrolling marquee variant included.
- Stats Counter4 animated counters (Projects / Clients / Revenue / Awards) triggered on scroll.
- Services Grid6 service cards with icon, title, one-liner, and ‘Learn More’ link.
- Animated HeroFull-screen dark hero with bold split typography, animated gradient underline, and scroll cue.
- TestimonialsAlternating large-quote testimonials with photo, name, company, and star rating.
- Contact SectionProject inquiry form with budget dropdown, service checklist, and timeline selector.
What’s Included
- index.html — full agency homepage
- style.css — dark theme with gold accent CSS variables
- agency.js — counters, card flips, marquee, scroll effects
- /assets/ — team photos, case study covers, partner logos
- README.md — customization walkthrough for non-developers
Tech Stack
- Tailwind CSS
- Vanilla JS
- Google Fonts — Bebas Neue + Inter
- CSS Custom Properties
- Intersection Observer
- Zero dependencies
Perfect For
- Creative agencies launching a new site
- Freelancers positioning themselves as a studio
- Marketing consultancies attracting enterprise clients
- Dev shops showcasing technical case studies
- Brand studios that need a bold first impression
Frequently Asked Questions
Can I use this for client projects?
＋
Yes. The license allows you to use the template on an unlimited number of client sites. You cannot, however, resell or redistribute the source files as a standalone product.
Is the team section editable?
＋
Completely. Each team member card is an independent HTML block — swap the photo, name, role, and social links without affecting the layout or grid.
Are the case-study images replaceable?
＋
Yes. All images are standard <img> tags with descriptive alt attributes. Replace the src path with your own project screenshots.
Can I add a live chat widget?
＋
Yes. The template’s <body> closing tag is the standard injection point for Intercom, Crisp, Tidio, or any chat provider’s embed snippet.
Is the stats counter animated?
＋
Yes. A lightweight Intersection Observer triggers the count-up animation when the section enters the viewport — no external library required.
Liam H. –
The featured-post hero with full-bleed image and gradient overlay looks incredible on a large monitor. The article typography uses a beautiful reading width constraint that made my content shine. Best blog template I’ve used.
Mia C. –
Clean card grid for the archive page and a nicely styled sidebar with category and recent-post widgets. The sticky table of contents on single posts is a standout feature. One minor CSS issue with the blockquote style on mobile but very easy fix.
Owen F. –
Bought this for a magazine-style news site and it handled a dense content layout beautifully. The breaking-news ticker component is a nice touch I didn’t expect to find. Top-tier quality.