{ "slug": "overtone", "name": "Overtone", "title": "Free music school website template", "description": "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.", "kind": "One-page website for an online music school or lesson studio, with instrument programs, mentors, masterclasses, a sheet-music shop, plans and a free-lesson booking form", "summary": "A one-page site for an online music school: a lesson screen with three steps, five instrument programs, five mentors, masterclass tickets, a covers shop, a four-step path to a stage night, reviews, three plans, a FAQ and a booking form. White ground with thin black outlines, beige cards and a single orange accent, with cards dealt from a pile and a disc that swaps covers.", "fits": [ "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" ], "categories": [ "Education" ], "tags": [ "music school", "online music lessons", "music teacher", "piano lessons", "guitar lessons", "online courses", "masterclass", "education", "outlined cards", "orange accent", "gsap", "scrolltrigger", "lenis", "single-file" ], "language": "en", "size_kb": 114, "photos": 21, "fonts": [ "Funnel Display", "Host Grotesk" ], "libraries": [ "https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js", "https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js", "https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js", "https://cdn.jsdelivr.net/npm/lenis@1.3.11/dist/lenis.min.js" ], "browsers": "Chrome and Edge 111+, Safari 16.2+, Firefox 121+ (it uses color-mix(), :has(), cascade layers, small/dynamic viewport units).", "sections": [ { "key": "navigation", "id": "site-nav", "heading": "", "about": "pill bar: logo, six section links between two rules, Log in link and Sign up button; hides on scroll down; phone menu overlay" }, { "key": "opening", "id": "opening", "heading": "Every lesson is a conversation in sound", "about": "dark rounded lesson screen: h1, short paragraph, two actions, three numbered steps and a framed photo of a student with a guitar" }, { "key": "programs", "id": "programs", "heading": "Choose what you want to play", "about": "five tall outlined program cards in one overlapping row (demo: piano, guitar, voice, drums, production)" }, { "key": "mentors", "id": "mentors", "heading": "Mentors who still play every weekend", "about": "five overlapping round portraits with name, instrument and one line each (demo: piano, guitar, voice, drums, production)" }, { "key": "masterclasses", "id": "masterclasses", "heading": "Masterclasses: two evenings, one skill", "about": "one featured ticket with photo, host, dates, time, discount, price, barcode and button, plus two smaller beige tickets (demo: three two-evening masterclasses)" }, { "key": "covers", "id": "covers", "heading": "Covers shop: songs you love, at your level", "about": "tracklist of six sheet-music arrangements beside a large sticky disc that swaps cover images (demo: a covers shop)" }, { "key": "path", "id": "path", "heading": "From the first lesson to the first stage", "about": "four outlined step pills laid as a descending staircase on a beige band, with an orange diamond marker (demo: trial lesson to stage night)" }, { "key": "stage", "id": "stage", "heading": "Stage nights", "about": "wide concert photo with an outlined card on its lower left: heading, text, next date and two actions (demo: term-end stage nights)" }, { "key": "reviews", "id": "reviews", "heading": "4.9 from 2,140 students", "about": "rating line with five large diamonds, one large quote and three overlapping review cards" }, { "key": "pricing", "id": "pricing", "heading": "One price a month, a lesson every week", "about": "three plan cards joined by two black bridges, the middle one beige with a discount badge (demo: Monthly, Term, Family)" }, { "key": "faq", "id": "faq", "heading": "Questions before the first lesson", "about": "five questions as native details rows in outlined pills beside a sticky heading" }, { "key": "contact", "id": "contact", "heading": "Book your free first lesson", "about": "beige card with the free-lesson form beside a cascade of six squares and email, phone and hours lines" }, { "key": "footer", "id": "footer", "heading": "Overtone School", "about": "footer: a full-width wordmark with the three-square mark, brand line, three link columns, contact links and small print" } ], "placeholders": [ "og-image", "favicon", "form", "email", "phone" ], "lighthouse": null, "license": { "code": "MIT", "photos": "Unsplash License", "fonts": "SIL Open Font License 1.1" }, "get": { "degit": "npx degit 8bsite/music-school-website-template my-site", "curl": [ "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" ], "agent_prompt": "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." }, "links": { "page": "https://8b.com/templates/overtone/", "md": "https://8b.com/templates/overtone.md", "json": "https://8b.com/templates/overtone.json", "demo": "https://8b.com/templates/overtone/demo.html", "ghDemo": "https://8bsite.github.io/music-school-website-template/", "repo": "https://github.com/8bsite/music-school-website-template", "zip": "https://8b.com/templates/overtone/music-school-website-template.zip", "use": "https://github.com/new?template_name=music-school-website-template&template_owner=8bsite", "agents": "https://github.com/8bsite/music-school-website-template/blob/main/AGENTS.md", "credits": "https://github.com/8bsite/music-school-website-template/blob/main/CREDITS.md", "raw": { "index": "https://raw.githubusercontent.com/8bsite/music-school-website-template/main/index.html", "agents": "https://raw.githubusercontent.com/8bsite/music-school-website-template/main/AGENTS.md", "license": "https://raw.githubusercontent.com/8bsite/music-school-website-template/main/LICENSE", "credits": "https://raw.githubusercontent.com/8bsite/music-school-website-template/main/CREDITS.md" }, "preview": "https://8b.com/templates/overtone/desktop.webp", "phone": "https://8b.com/templates/overtone/phone.webp", "clip": "https://8b.com/templates/overtone/scroll.mp4", "og": "https://8b.com/templates/overtone/og.jpg", "design_md": "https://8b.com/templates/overtone/DESIGN.md" }, "github": { "repo": "8bsite/music-school-website-template", "template_repository": true, "topics": [ "html-template", "landing-page", "website-template", "website-templates", "music-school", "online-music-lessons", "music-lessons", "html5", "agents-md", "gsap", "scrolltrigger", "scroll-animation", "lenis", "single-file", "cursor-ai", "static-site", "mit-license", "vibe-coding", "claude-code", "ai-agents" ] }, "made_by": { "name": "8B", "url": "https://8b.com/" } }