# Free art gallery website template

> Free HTML art gallery website template for galleries, museums and art venues, with a programme and passes. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.

This art gallery website template is one free HTML file for a gallery, kunsthalle or museum that opens late: an opening screen, a six-night programme, four rooms, five resident artists, a midnight screening, passes and a visit form. White ruled cells meet dark night screens and a coral glow. AGENTS.md is included, so an AI agent can adapt it.

- Page: https://8b.com/templates/nocturna/
- Live demo: https://8b.com/templates/nocturna/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/nocturna/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/art-gallery-website-template
- Download ZIP: https://8b.com/templates/nocturna/art-gallery-website-template.zip
- Template name in the repository: Nocturna
- At a glance: One 105 KB index.html with its CSS and JavaScript inside, 12 sections, 19 Unsplash photos credited in CREDITS.md, Host Grotesk and Pliant from Google Fonts, GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 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/art-gallery-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/art-gallery-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/art-gallery-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/art-gallery-website-template/main/CREDITS.md
```

Then give the agent this prompt:

```text
Read AGENTS.md, then edit index.html. Make this the site for <my venue: name, address, opening hours, rooms, season events with dates, resident artists, any screening, ticket and pass prices>. Replace first the name, hours, six programme rows, five artists, prices and the Rotterdam address. Keep the section ids and the classes AGENTS.md lists, set each --len to its text length, and keep four rooms, eight relay cities and three pass cards. Ask me for missing facts and never invent dates, prices, artists 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/art-gallery-website-template my-site`.

## About

It suits an art gallery with a changing season, a kunsthalle, a small museum that opens late, a cinema or a performance space. Searches for art gallery website design and museum web design usually want the same things: dates, rooms and tickets in one scroll. Here that is an event ledger, a room plan, artist names, a screening section and three passes, in a free template for art gallery sites.

Claude Code, Cursor or Codex can adapt this by vibe coding in a few passes. Start with the name, hours, address and the six programme rows, then the four rooms, five artists and the screening. Ask the owner for every date, price, artist name, film title and house rule; the demo invents all of them. Leave the ids, the script classes and the data-8b attributes AGENTS.md lists alone, and reset the --len number on the wordmark, the rails and the artist names when their text changes.

This is the right base when a venue keeps late hours, runs dated events and sells passes. A venue built around one dated event fits [a template made for events](https://8b.com/templates/ondo/) better, and a gallery with hundreds of works or a shop needs more than one page. One weak spot: without JavaScript the Menu button cannot open its overlay, and on phones that overlay holds the only Residents and Midnight screening links. Owners who do not want to edit code can use a no-code builder instead.

## Design

- Palette: #ffffff (page ground of the light sections, text on the dark screens and footer, the Buy a ticket card), #101014 (text and hairlines on light sections, the dark night screens, the footer and filled buttons), #c6ddf7 (the light-blue journal section, the dawn disc behind the contact form, the round Get a pass button and the Patron card), #f0654a (coral accent: the glow, the dot, the room lamp, the relay line, button hover fills and the Night Pass card), #5a5b64 (secondary body text and captions on light sections), #a9abb6 (small secondary text on the dark screens, the menu overlay and the footer: room captions, the screening synopsis, the footer columns)
- Fonts: Pliant (headings and the vertical rails, a variable font from weight 200 to 900 that pairs a light line with a heavy one; card and cell titles at weight 600), Host Grotesk (body text, labels, form fields and buttons, in weights 400 to 600; labels and buttons are small uppercase with wide spacing)

A hairline grid divides each section. On a desktop a left column about a third wide holds the label, with the content to its right; the opening and FAQ add a narrow rail of rotated type. Sections mostly alternate white and near black, with one light-blue journal. The programme, artists and passes read as ruled rows or cards, the screening is a three by three credits grid around the still, and the relay is a row of eight cells.

The programme window, the artist portraits and the journal feature photo sit in arch shapes, and the stars, discs and glow are CSS and SVG, not images. Section headings pair a light line with a heavy one, and the artists' names swap weights as you scroll.

## Sections and motion

- **Navigation** (navigation): white top bar over the right two thirds: arch logo, coral dot, four links, Menu button; Menu opens a dark overlay with seven links; the bar hides on scroll down. Motion: The bar hides when you scroll down past half a screen and returns on scroll up; Menu opens a dark overlay of seven links.
- **Lights down at nine. Eyes open till two.** (opening): dark screen with the heading "Lights down at nine. Eyes open till two.", intro, Get a pass button, See the season link, three fact cells and five stars. Motion: On load the heading lines, text and three fact cells rise in one after another. The glow breathes and the five stars turn slowly, and both pause while the section is off screen.
- **Six nights to stay up for** (programme): ledger of six nights with dates, titles, formats and rooms, beside a sticky arch window that shows a photo per night. Motion: As each row reaches the reading line its photo rises into the arch over the previous one, and on desktop a coral dot slides down the rule to that row.
- **Four rooms, one long night** (rooms): dark stage with the heading "Four rooms, one long night", a Plan a visit button and a plan of four rooms that a coral lamp walks through. Motion: Pinned: each room starts under a dark veil, a coral lamp travels from room to room, and each veil lifts as the lamp arrives.
- **Five artists who work at night** (artists): five resident artists as huge two-weight names with a role line and an arch portrait each. Motion: As each row crosses the screen the light first name thickens while the heavy surname thins, they trade back, and the portrait slides along the row.
- **Head lights** (screening): 3x3 ruled credits grid with a film still in the middle that opens to the full screen. Motion: Pinned: the still opens from the middle cell to the full screen, the other cells slide off the edges and the title travels down onto the picture.
- **One film, eight midnights** (relay): one row of eight city cells in midnight order that a coral line sweeps across, each turning dark. Motion: A coral line sweeps across the row of cities, and each cell fills with night as the line passes.
- **Close your eyes** (journal): light-blue section: one featured note in a big arch, two short notes with round photos, a row of five stars. Motion: The heading rises, the arch photo opens upward, the two notes draw their hairlines and the five stars turn with scroll.
- **One evening, or every one** (pass): three passes with price, three included items and a button each: One Night, Night Pass, Patron. Motion: The three cards start stacked and slightly turned, then fan out into a row as you scroll.
- **Questions for the night** (faq): vertical rail "Before you come", an intro with three stars and five questions that open and close. Motion: A hairline draws in below each question and the three stars turn with scroll.
- **Come late. Stay later.** (contact): four info cells, the heading "Come late. Stay later." and a form with name, email and question, over a light-blue dawn disc. Motion: A large light-blue disc rises from below and grows behind the heading and form as you scroll.
- **Footer** (footer): dark footer with the wordmark filling the width and four ruled columns

## Good for

- art gallery or kunsthalle with a changing programme
- museum, art centre or cultural venue with late openings
- cinema, performance space or festival with a season of events
- any venue with rooms, resident artists and tiered passes, by its ruled hairline look

## Questions

**Is this one of the free website templates for art gallery sites, and can I use it for a client?** Yes. It is one index.html under the MIT license, so you can adapt it for your own venue or a client at no cost. GSAP, ScrollTrigger and Lenis load from jsDelivr, there is no build step, and CREDITS.md lists the Unsplash photos.

**Can a museum or a daytime gallery use it?** Yes, after a text pass. A museum website design can keep the rooms, programme and passes, but the demo copy is built around night hours: nine to two, free entry before 22:00 and a Friday midnight screening. Replace those, or remove the screening and relay sections with their animation scripts and repoint the links to #screening.

**Where does the visit form send its messages?** Nowhere yet. The form needs a name, an email and a question, then shows a thank-you line and clears itself without sending anything. Connect Formspree or Netlify Forms with the steps in AGENTS.md, or replace the form with a link, and rewrite the thank-you line.

**How do I give it to Claude Code, Cursor or Codex?** Download index.html and AGENTS.md with the curl lines near the start of AGENTS.md, put them in an empty folder 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 with your venue's facts.

**What must I keep when I change the text?** Keep the ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the classes AGENTS.md lists. Keep four rooms, eight relay cities and three pass cards, and reset each --len. Keep the header comment before the html tag, the 8B meta tag and the Design: 8B footer link unless the site owner asks to remove it.

**Can I get a site like this without editing code?** Yes, in a different way. [8B's AI website builder](https://8b.com/) designs a new site from a sentence, with its own design, not this template. Designing and restyling are free; publishing with hosting and SSL, 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.

## Before publishing

Replace: social preview image, favicon, email address, phone number, contact form (sends nothing yet) and social media links, plus the invented demo facts (prices, dates, addresses).

- Get a pass button in the opening lead to #pass now; point them to your ticket or membership shop, or keep #pass.
- See the season link in the opening lead to #programme now; point them to keep it, or your full programme page.
- Details link in the first programme row, and the Book a seat button in the screening lead to #screening and #pass now; point them to your event page and your ticket page for the screening.
- Book links in the other five programme rows lead to #pass now; point them to the ticket page of each event.
- Plan a visit button in the rooms section lead to #contact now; point them to your visitor information page, or keep #contact.
- Buy a ticket, Join and Become a patron buttons on the three pass cards lead to #contact now; point them to your ticket shop, membership signup and patron signup pages.
- Ask for the note and Ask for it links in the journal lead to #contact now; point them to the article pages, or keep #contact if the notes are sent on request.
- Instagram link in the footer lead to https://www.instagram.com/ (the Instagram home page) now; point them to your Instagram profile.
- Newsletter link in the footer lead to a mailto: link to the contact email with the subject Newsletter now; point them to your newsletter signup page.
- The contact form does not send anything: it only shows the thank-you line. Connect Formspree, Netlify Forms or your own endpoint, or replace it with a link.
- The rooms and screening scenes pin their section for the length of the scroll; on short screens or in landscape on phones the room captions and the credits grid are tight.
- The relay city text passes through a mid-grey for a moment while the night fills its cell.

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