# Free law firm website template
> Free HTML law firm website template for commercial lawyers: practices, matters, partners, fees. AGENTS.md for AI agents, or a no-code site from 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.
Law firm website template: one free index.html for a commercial practice advising companies and boards, with four full-screen practice panels, a table of recent matters, three offices, six partners, a fee scale and a contact form. Most photos are greyscale; one red marks the practice shapes and fee bars. AGENTS.md tells Claude Code or Cursor what to keep and replace.
- Page: https://8b.com/templates/fellgate/
- Live demo: https://8b.com/templates/fellgate/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/fellgate/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/law-firm-website-template
- Download ZIP: https://8b.com/templates/fellgate/law-firm-website-template.zip
- Template name in the repository: Fellgate
- At a glance: One 94 KB index.html with its CSS and JavaScript inside, 12 sections, 26 Unsplash photos credited in CREDITS.md, Host Grotesk and Source Serif 4 from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.4 smooth scroll loaded from jsDelivr.
## Use it with an AI coding agent
Download the files into the project (Windows PowerShell: `curl.exe`):
```bash
curl -LO https://raw.githubusercontent.com/8bsite/law-firm-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/law-firm-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/law-firm-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/law-firm-website-template/main/CREDITS.md
```
Then give the agent this prompt:
```text
Read AGENTS.md, then edit index.html. The site presents . Replace first the firm name, footer's legal line, six matters, partners and ring's cities. Keep the ids and classes AGENTS.md lists, each practice panel's data-figure and red pieces, the h1's three short lines, and --city-i centred on zero. Ask me for anything missing; never invent fees, results, client names, regulators, addresses or contacts.
```
Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/law-firm-website-template my-site`.
## About
For commercial lawyers, websites are read by founders and boards who ask the same things: which practices, what the firm has done, where it sits, who leads it, how it bills. The page answers in that order and ends at a form asking the type of matter. It makes a website for lawyers in corporate, disputes, employment or property work, or for barristers' chambers. US attorney web design follows the same order once UK and Irish terms are swapped.
Start a vibe coding pass in Claude Code, Cursor or Codex with the legal facts: the footer's legal form, registration and regulators, then the six matters, published only with clients' consent. The partners' stock portraits show real people: replace them along with names and direct lines. Each practice panel keeps its data-figure and red pieces. The fee cap's stop line sits where its bar ends, now 52%. The head count, founding year, team sizes, deal ranges, response times and pro bono figures are invented; the agent asks for each.
Pick it for a firm that wants to look composed and will explain its fees up front. Bookkeeping and tax practices will find more ready parts in the [template built for accountants](https://8b.com/templates/evenkeel/). Law firm websites for family, criminal or injury work can start here, but most copy changes: it speaks to founders and boards. The gap is depth: it is one page, with no page per practice area or partner profile, and the four team links go to the contact section.
## Design
- Palette: #ffffff (page ground, promise cells, the full-screen menu, the fog and mist over the opening photo, button text), #262626 (text, logo, dark buttons, the cap's stop line on the fee scale, the shade that darkens a covered practice panel), #d5d5d5 (ground of the practice section and its four panels), #d3271d (the one accent: logo square, practice shapes, serif promises and fee names, fee bars, the hover fill of buttons and icons), #5c5c5c (small grey text (notes, addresses, promise and fee lines, the legal line), form labels and underlines, table heads and years, the rules between questions), #dcdcdc (hairlines (nav edge, table rows, promise cells, fee tracks, footer edge), empty photo frames, the pale start of the ink effect), #f1f1f1 (ground of the partners, questions and footer)
- Fonts: Host Grotesk (everything except the promises and fee names: body text at 400; headings, the huge h1 and practice titles, uppercase labels, buttons and the letter-spaced logo at 500), Source Serif 4 (light 300 weight in red, only for the five promises and the three fee names)
Four sections open alike: a large heading at the left, a short note at the right aligned to its foot. The opening is two full screens over one fog photo. Each practice panel is a three-column grid: a tall photo in the middle over red blocks, a two-line title across the grid at mid-height, text lower left, terms lower right. Hairlines divide table rows, offices, fee rows and questions; the promises stand in a staircase of bordered cells.
This law firm website design rations its red to the logo square, practice shapes, serif promises and fee names, fee bars and hover fills. Only the ten city photos on the ring keep their colour. Most motion is scrubbed to the scroll; with reduced motion the page reads in full.
## Sections and motion
- **Navigation** (navigation): fixed bar: logo, seven section links and a Book a first call button; hides on scroll down; full-screen menu below 1000 px. Motion: While you scroll down the bar slides up out of view, and it slides back as soon as you scroll up.
- **Hold your ground.** (opening): two screens: a monochrome mountain photo in fog with the stepped h1 and a lead, then a statement and a paragraph about the firm inked out of the white. Motion: On load the photo settles from a zoom, the three heading words rise in turn and two fog bands drift sideways; scrolling then grows, brightens and (on wide screens with a mouse) blurs the photo, pushes the lines apart until they fade, lifts the mist and inks the statement word by word.
- **Four practices, one standard: advice you can act on the same day.** (practice areas): intro and four full-screen practice panels that stack, each with a photo over red shapes, a two-line title, text and key terms. Motion: Pinned while you scroll, each full-screen panel slides up over the one before, which darkens, as its red pieces open out of one small block into the panel's own figure and the title slides in from the left; the index of the four practices stays in view, underlines the current one and fades after the last panel.
- **Five promises, written into every engagement letter.** (principles): five promises in red serif in a two-column staircase of hairline cells, beside an intro and a link to fees. Motion: On wide screens the staircase assembles with the scroll, right-hand cells stepping down from half a cell higher while left-hand cells rise 60 px; on phones every second cell slides in from the left edge to its place on the right.
- **Recent matters, told plainly.** (selected matters): table of six recent matters: year, client, matter, outcome. Motion: Once, as each of the six rows comes into view, its hairline draws from the left and the year, client, matter and outcome rise into place.
- **Three offices, and partner firms in twelve more countries.** (offices): an arc of ten city photos turning around a paragraph, then three office addresses and phones. Motion: Scrolling turns the ring of ten city photos 40 degrees into place as it rises, each photo settling from a closer crop; below it, a hairline draws over each office and its lines rise once.
- **Seventy lawyers. Six partners sign the letters.** (partners): six partner portraits with practice, city and direct line, carried sideways by the scroll. Motion: Pinned while you scroll, the row of six portraits travels sideways from the first to the last, each photo shifting a little inside its frame; tabbing to an off-screen card scrolls the page to it.
- **One working day in ten belongs to people who could never pay for it.** (pro bono): a photo beside a large statement and three items of pro bono work. Motion: The statement darkens word by word from pale grey as you scroll it up, and the mountain photo drifts slowly inside its frame.
- **Fees agreed before the work, in writing.** (fees): three fee types on one scale: red bars for fixed, capped and hourly, with their terms. Motion: Row by row with the scroll, each red bar grows from a small square to its reach, the cap's dark stop line grows upward, and the fee name and terms fade in from 25% opacity.
- **Questions clients ask before the first call.** (questions): six questions and answers (native ) beside a heading and a Book a first call button. Motion: Once, as each question arrives, its hairline draws across and the question rises into place; opening an answer turns its plus into a minus.
- **Tell us where you need to stand. A partner will call you back within one working day.** (contact): closing statement, four office photos dealt into a row, a contact form (no back end yet) and phone, email and out-of-hours line. Motion: The four office photos start as one tilted pile in the middle of the strip and deal out into their row as you scroll (two by two on phones), while the statement above darkens word by word.
- **Footer** (footer): logo, five policy links, the regulation line and the copyright with the Design: 8B credit
## Good for
- commercial or corporate law firm
- solicitors, an employment law practice or barristers' chambers
- advisory firm with several offices (tax, audit, corporate finance, consulting)
- any professional firm that wants a calm monochrome look with one red accent
## Questions
**Is this lawyer website template free for client work?** Yes. MIT covers the code, so a studio doing website design for law firms or law firm website development can hand it to clients without a fee. It is one index.html with no build step; its libraries load from jsDelivr. CREDITS.md credits the 26 Unsplash photos and the two Google fonts, which carry the Open Font License.
**Can a US attorney use it?** Yes, after a pass over the legal terms. The demo names Scots, English and Irish law, the Court of Session, three UK and Irish regulators, an LLP registered in Scotland, sums in pounds and a Modern slavery statement link. Swap in your state bar, courts and currency and it works as an attorney website template.
**Where does the new-matter form send its messages?** Nowhere until you connect it. The browser requires a name and an email; with JavaScript the form shows the thank-you text in data-sent and clears the fields, and without JavaScript it posts to #contact. AGENTS.md gives the Formspree and Netlify Forms steps. The Matter menu lists the four demo practices plus Not sure yet: match it to yours.
**What is the quickest way to get an AI agent to adapt it?** Download index.html and AGENTS.md with this page's curl lines, open the folder in your agent and paste the prompt with your firm's facts in the angle brackets. AGENTS.md lists the classes the scripts need and the main demo facts to replace. Keep the agent on the downloaded file: a page fetched by URL reaches it only as a summary.
**Can a law firm get a site like this without editing code?** Yes. [8B's AI website builder](https://8b.com/) designs a new site from one sentence about your firm, in its own design, not this template. Designing and restyling are free; publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT through the 8B connector.
**Which parts must stay so the motion keeps working?** Every id, the data-8b-section, data-8b-motion and data-8b-part attributes, the classes AGENTS.md names, the four data-figure values with their 2, 4, 2 and 3 red pieces and three short h1 lines. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it.
## Before publishing
Replace: social preview image, favicon, phone number, contact form (sends nothing yet), email address and social media links, plus the invented demo facts (prices, dates, addresses).
- Book a first call buttons in the nav bar, the phone menu and the questions section lead to #contact now; point them to your booking calendar URL (Calendly, Cal.com) if clients book first calls there, or keep #contact once the form is connected.
- Talk to the corporate, disputes, employment and property team links in the four practice panels lead to #contact now; point them to a page per practice area or the lead partner's contact, or keep #contact.
- Privacy notice, Cookies, Complaints, Terms of engagement and Modern slavery statement links in the footer lead to #footer (nothing) now; point them to the URLs of your own policy pages, or remove the ones you do not publish.
- The form sends nothing: with JavaScript it checks the fields and shows the thank-you line; without it the browser posts to #contact on the same page. Connect Formspree, Netlify Forms or your own endpoint.
- The statements with the ink effect (opening, pro bono, contact) start in the pale hairline grey (#dcdcdc on white, about 1.4:1) and reach full ink only when their centre comes to about 58% of the screen.
- On phones a stuck practice panel is taller than the screen: it is lifted so its terms stay in view, and the top of its photo passes under the index row.
- The ten city photos on the ring carry no visible labels; only their alt texts and the paragraph inside the arc name the cities.
## License
Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).