# Free music school website template
> Free HTML music school website template for online lesson studios, with programs, plans and a booking form. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.
Music school website template: one free HTML file for an online lesson studio, with five instrument programs, five mentors, masterclass tickets, a sheet-music shop, three plans and a free-lesson booking form. The look is white with thin black outlines, beige cards and one orange accent. An AI agent can adapt it from AGENTS.md.
- Page: https://8b.com/templates/overtone/
- Live demo: https://8b.com/templates/overtone/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/overtone/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/music-school-website-template
- Download ZIP: https://8b.com/templates/overtone/music-school-website-template.zip
- Template name in the repository: Overtone
- At a glance: One 114 KB index.html with its CSS and JavaScript inside, 13 sections, 21 Unsplash photos credited in CREDITS.md, Funnel Display and Host Grotesk from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.11 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/music-school-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/music-school-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/music-school-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/music-school-website-template/main/CREDITS.md
```
Then give the agent this prompt:
```text
Read AGENTS.md, then edit index.html. Make it the site for . Replace first the name, mentors, prices and dates. Keep the section ids, the classes AGENTS.md lists, four path steps, three plans and six covers rows with six disc layers. Ask me for missing facts and never invent reviews, ratings, student counts 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/music-school-website-template my-site`.
## About
People who search for a music lessons website want the same answers in the same order: which instruments, who teaches, what a lesson costs and how to book a trial. This page follows that order, so it works as a music lesson website for a private teacher, a music academy website template for a few mentors, or a music studio website template that also sells tickets and sheet music.
Vibe coding in Claude Code or Cursor goes fastest when you hand over the facts only the school has: instruments, mentors and bios, lesson lengths, plan prices, masterclass dates, shop titles, languages and hours. The demo invents all of them, including the 4.9 rating and the 2,140 students. Replace the name everywhere, set the footer wordmark's --len to its length, and ask the owner before writing any review or contact.
This is the right base for a school that sells weekly lessons on monthly plans and wants tickets and a shop on the same page. For [a site that mostly lists gigs and event dates](https://8b.com/templates/ondo/), another template fits better. Weak spots: Log in and the covers Add buttons only jump to the form, and there is no cart, calendar or account area. 8B's builder covers the no-code route.
## Design
- Palette: #ffffff (page background, nav pill, the odd program cards, the outer plan cards, the outer review cards and text on the dark lesson panel), #131313 (text, all outlines, primary buttons, the dark lesson panel, the mobile menu overlay, the active covers row), #e5dcd2 (beige cards: the two small tickets, middle plan, contact card, even program cards, the middle review card, alternate FAQ rows and the path band), #ff5714 (the accent: diamonds, the disc backdrop in the covers shop and the favicon tile), #f4f0a1 (pale yellow fill of the small buttons, discount badges and round icon buttons, plus the colour of a program card or small ticket while its button is hovered), #57524c (struck-through old prices and the mentors' one-line bios)
- Fonts: Funnel Display (headings, prices, step and track titles, mentor names, FAQ questions and the footer wordmark, at weights 400 to 500), Host Grotesk (body text, buttons, labels, form fields and captions, at weights 400 to 600)
A single scroll of rounded cards with 1.5px black outlines on white. The first screen is a dark rounded panel holding the h1, three numbered steps and a framed photo. Neighbours overlap in rows: five program cards, five round portraits, three reviews. The featured ticket carries a dashed stub and a barcode drawing, the three plans are joined by black bridges, and a beige band holds a four-step staircase. Headings use Funnel Display.
Orange stays small: the diamonds, disc backdrop and favicon tile. Pale yellow fills small buttons and discount badges, and tints a program card or small ticket while its button is hovered. On load the dark lesson panel appears over four grey layers, and outline echoes trail the arriving portraits.
## Sections and motion
- **Navigation** (navigation): pill bar: logo, six section links between two rules, Log in link and Sign up button; hides on scroll down; phone menu overlay. Motion: The pill bar slides out of view when you scroll down past 120 px and returns after a short scroll up.
- **Every lesson is a conversation in sound** (opening): dark rounded lesson screen: h1, short paragraph, two actions, three numbered steps and a framed photo of a student with a guitar. Motion: On load, four grey layers step out behind the dark panel, the panel scales in and its content fades up into place; there is no scroll scene.
- **Choose what you want to play** (programs): five tall outlined program cards in one overlapping row (demo: piano, guitar, voice, drums, production). Motion: The five cards start as a fanned pile in the middle of the row and are dealt out, outer cards first, with the scroll; on desktop the section is held while it runs.
- **Mentors who still play every weekend** (mentors): five overlapping round portraits with name, instrument and one line each (demo: piano, guitar, voice, drums, production). Motion: Each portrait arrives with two outline echoes, each instrument diamond turns a quarter, and the heading rises line by line.
- **Masterclasses: two evenings, one skill** (masterclasses): one featured ticket with photo, host, dates, time, discount, price, barcode and button, plus two smaller beige tickets (demo: three two-evening masterclasses). Motion: The featured photo starts enlarged to fill the screen and shrinks into its slot while the ticket text slides in, with the section held while it runs.
- **Covers shop: songs you love, at your level** (covers): tracklist of six sheet-music arrangements beside a large sticky disc that swaps cover images (demo: a covers shop). Motion: The row near the middle of the screen turns into a black pill and its cover opens over the big disc from a dot.
- **From the first lesson to the first stage** (path): four outlined step pills laid as a descending staircase on a beige band, with an orange diamond marker (demo: trial lesson to stage night). Motion: An orange diamond hops from step to step with the scroll, turning on the way, and the step it stands on fills black.
- **Stage nights** (stage): wide concert photo with an outlined card on its lower left: heading, text, next date and two actions (demo: term-end stage nights). Motion: The photo arrives with outline echoes, the heading rises, and the date diamond turns once.
- **4.9 from 2,140 students** (reviews): rating line with five large diamonds, one large quote and three overlapping review cards. Motion: The quote's words ink from pale grey to black with the scroll, and the five rating diamonds light up orange one by one.
- **One price a month, a lesson every week** (pricing): three plan cards joined by two black bridges, the middle one beige with a discount badge (demo: Monthly, Term, Family). Motion: The outer plan cards start piled on the middle one, tilted, and are pulled apart while the two black bridges stretch between them.
- **Questions before the first lesson** (faq): five questions as native details rows in outlined pills beside a sticky heading. Motion: The heading rises on arrival, and the diamond in a row turns 45 degrees when it opens.
- **Book your free first lesson** (contact): beige card with the free-lesson form beside a cascade of six squares and email, phone and hours lines. Motion: Six squares start scattered and turned, then fold into a cascade as it scrolls into view.
- **Overtone School** (footer): footer: a full-width wordmark with the three-square mark, brand line, three link columns, contact links and small print
## Good for
- online music school or music lesson studio
- private music teacher or a small group of teachers
- online course, coaching or workshop seller with tickets and a shop
- any programme with mentors, monthly plans and events, in an outlined card style
## Questions
**Is this a free music school website template I can use for client sites?** Yes. It is one index.html under the MIT license, so you can ship it for a school or a client at no cost. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr, there is no build step, the 21 photos are Unsplash images, and CREDITS.md lists them and the fonts.
**Where does the free-lesson booking form send its messages?** Nowhere yet. The script checks the required name and email, shows a thank-you line and clears the fields without sending anything. Connect Formspree or Netlify Forms with the steps in AGENTS.md, and edit the line, which promises a reply within a day.
**How do I give it to Claude Code, Cursor or Codex?** Put index.html and AGENTS.md in an empty folder with the curl lines at the start of AGENTS.md, and tell the agent to read AGENTS.md first. Give it the files, not the page address, because a link comes back as a summary. Then paste the prompt from this page, filled in with your school's facts.
**What breaks if I change the wrong thing?** Keep the section ids and the data-8b-section, data-8b-motion and data-8b-part attributes, plus the classes AGENTS.md lists per script. Keep four path steps, three plans and six covers rows with six disc layers. 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.
**Can I get a site like this without editing code?** Yes, through [8B's AI website builder](https://8b.com/). You describe the school in a sentence and its engine designs a new site, its own design and not this template. Designing and restyling are free; publishing with hosting, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT.
**What happens on a phone, with reduced motion or without JavaScript?** On a phone the program cards and the plans stack in a column. With reduced motion, entrance and scroll animations and smooth scrolling are off, the nav still hides on scroll, and the page reads in full. Without JavaScript the Menu button cannot open its overlay and the form shows no thank-you line, but the questions and footer links work.
## Before publishing
Replace: social preview image, favicon, contact form (sends nothing yet), email address and phone number, plus the invented demo facts (prices, dates, addresses).
- Sign up buttons in the nav and the phone menu, and the Log in links in the nav and the footer lead to #contact (the booking form); there is no account area now; point them to your sign-up and login pages, or keep #contact and remove Log in if you have no accounts.
- Book a free lesson button and Choose an instrument link on the first screen lead to #contact and #programs now; point them to your booking page for the trial lesson; keep #programs for the link.
- The round arrow button on each of the five program cards lead to #contact now; point them to the booking page of that instrument, or a page about the program.
- Book a seat buttons on the three masterclass tickets and Get a seat in the stage nights card lead to #contact now; point them to your ticket or event page for that date.
- Add buttons on the six rows of the covers shop lead to #contact; there is no cart now; point them to your shop or checkout link for each arrangement.
- Start monthly, Start a term and Start family buttons in the plans lead to #contact now; point them to your checkout or subscription link for each plan.
- Ask a mentor link beside the FAQ heading lead to #contact now; point them to a support email or chat link.
- Book a free lesson submit button in the contact form lead to no request: a script checks the required fields and shows the thank-you line now; point them to your form service (the form action is #contact with method post).
- The contact form posts to #contact and sends nothing; the thank-you line appears only through the small script. Connect a form service before publishing.
- In the covers shop the static, no-script and reduced-motion views show the disc with the last cover; the first row's cover shows only while the scene runs.
- The featured masterclass photo is loaded at 590 px wide and starts the scene scaled up, so the first frames of the shrink are soft. Use a larger photo for a sharper start.
- The reviews quote begins in a pale grey while it inks in; with the scene running the words are pale until they pass the middle of the screen.
## 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 121+ (it uses color-mix(), :has(), cascade layers, small/dynamic viewport units).