Free music school website template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: overtone.md, data: overtone.json

Music school website template: first screen on a phone

About this music school website template

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.

At a glance, October 2026. 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.

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, 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.

Good for:

Online music school or music lesson studioPrivate music teacher or a small group of teachersOnline course, coaching or workshop seller with tickets and a shopAny programme with mentors, monthly plans and events, in an outlined card style

Turn the music school website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

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

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make it the site for <my music school: name, instruments taught, mentors and their bios, lesson lengths and ages, plan prices, masterclass hosts and dates, sheet music titles, stage night date, languages, hours, how the free lesson is booked>. 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.

In a terminal

npx degit 8bsite/music-school-website-template my-site

Music school website design and motion

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.

Every value of this music school website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the music school website page

Navigation
Pill bar: logo, six section links between two rules, Log in link and Sign up button; hides on scroll down; phone menu overlay
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
Dark rounded lesson screen: h1, short paragraph, two actions, three numbered steps and a framed photo of a student with a guitar
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
Five tall outlined program cards in one overlapping row (demo: piano, guitar, voice, drums, production)
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
Five overlapping round portraits with name, instrument and one line each (demo: piano, guitar, voice, drums, production)
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
One featured ticket with photo, host, dates, time, discount, price, barcode and button, plus two smaller beige tickets (demo: three two-evening masterclasses)
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
Tracklist of six sheet-music arrangements beside a large sticky disc that swaps cover images (demo: a covers shop)
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
Four outlined step pills laid as a descending staircase on a beige band, with an orange diamond marker (demo: trial lesson to stage night)
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
Wide concert photo with an outlined card on its lower left: heading, text, next date and two actions (demo: term-end stage nights)
The photo arrives with outline echoes, the heading rises, and the date diamond turns once.
4.9 from 2,140 students
Rating line with five large diamonds, one large quote and three overlapping review cards
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
Three plan cards joined by two black bridges, the middle one beige with a discount badge (demo: Monthly, Term, Family)
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
Five questions as native details rows in outlined pills beside a sticky heading
The heading rises on arrival, and the diamond in a row turns 45 degrees when it opens.
Book your free first lesson
Beige card with the free-lesson form beside a cascade of six squares and email, phone and hours lines
Six squares start scattered and turned, then fold into a cascade as it scrolls into view.
Overtone School
Footer: a full-width wordmark with the three-square mark, brand line, three link columns, contact links and small print

Before you publish the music school website site

Replace social preview image, favicon, contact form (sends nothing yet), email address and phone number and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
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.

Questions about this music school website template

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. 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.

Not a music school website? More free templates