Overview

A quiet, gallery-white HTML template for an art museum: exhibitions on now, next and past, timed-entry tickets, the collection by period, medium and room, membership and late nights. Curata ships three home pages, a light and a dark theme, right-to-left support, and logic that is worked out rather than typed in: open now and the late nights from the visitor’s date and time, the exhibitions placed on the calendar, the next arrival time with its places left, ticket totals with members and under sixes free, membership yearly or monthly, the next date of every talk and late, and a shop with a member saving, a code, shipping and tax.

What’s included

• 3 home pages, each with its own scroll moment: The Long Gallery (a corridor in perspective, the works passing along its walls as you scroll), Step Closer (a painting seen across the room, then its brushwork, then one ridge of paint) and The Salon Hang (the frames slide into a salon hang on the collection wall)
• A white-wall light theme by default and the museum after hours on one switch in every header, remembered between visits and applied before the page paints
• Right-to-left stylesheets and a flag language picker in every header: a right-to-left language turns any page around
• WebGL layers — Brushstroke Flow, impasto strokes drifting along a flow field at the edges of the bands, and the footer’s bust built from vertical slices that slide into line as it turns — tinted by the theme colours
• The museum clock: open now, late tonight or closed (and when it opens) in every header; today marked in every hours list; the next timed entry
• Timed-entry tickets: a month calendar with closed days and late nights, arrival times with places left, adult, concession, child and member tickets, a ticketed-exhibition surcharge, a booking code
• Exhibitions on a yearly programme, sorted into now, next and past from the date, with closes-in and opens-in on every card
• The collection browser: period, medium, room, on view only, search and sort, with the wall label sliding out beside every work
• Membership: four tiers yearly or monthly, a second member, a gift card, a three-step join; donations once or monthly with what they pay for
• The museum shop: categories, price filter, sort and search, the product page, bag, member saving, code, free-shipping meter, tax, checkout with an order number, wishlist
• Picture Hang preloader, Unveil reveals (a cloth drawn down off each work), word-rise titles, the media cursor (View, Drag) and the museum label on hover
• Curators, curator profile, gallery, journal with post formats, FAQ with search, account pages, coming soon, 404
• Fully responsive, W3C-valid, zero console errors

Getting Started

Thank you for choosing Curata. Follow the steps below to get your site live.

1. Open locally

Unzip the downloaded package and open curata/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the museum clock, the tickets, the collection browser, membership, the events and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the curata/ folder to your hosting provider using an FTP client (such as FileZilla) or your hosting control panel. Once uploaded, navigate to your domain and the template will load immediately.

3. Customise

All custom styling lives in assets/css/style.css (with a numbered Table of CSS at the top) and assets/css/responsive.css. Colours and fonts are controlled by CSS variables — see Colors & Fonts. The hours, admission, exhibitions, works, tiers, events and shop rules live in one place — see Museum Logic.

File Structure

Below is an overview of the key files and folders included in this template.

Folder Structure

The package unzips to two folders: Documentation/ (this guide) and curata/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

curata/
├── *.html                              the 32 pages, all in the root (see File Structure)
├── sendmail.php                        the AJAX mail handler for the forms
└── assets/
    ├── css/
    │   ├── style.css                   all custom styles, numbered Table of CSS
    │   ├── style.rtl.css               the right-to-left twin of style.css
    │   ├── responsive.css              breakpoints 1399 / 1199 / 991 / 767 / 575
    │   ├── responsive.rtl.css          the right-to-left twin of responsive.css
    │   ├── fontawesome-all.css         Font Awesome Free, loaded locally
    │   └── plugins/                    vendor stylesheets
    │       ├── bootstrap.min.css
    │       ├── bootstrap.rtl.min.css   Bootstrap for right-to-left pages
    │       ├── jquery.fancybox.min.css
    │       └── swiper-bundle.min.css
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (34 blocks)
    │   └── plugins/                    vendor scripts
    │       ├── bootstrap.bundle.min.js
    │       ├── gsap.min.js
    │       ├── jquery-3.7.1.min.js
    │       ├── jquery.fancybox.min.js
    │       ├── ScrollTrigger.min.js
    │       └── swiper-bundle.min.js
    ├── fonts/
    │   └── theme-icons/                the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── art/                         25 files
        ├── banner/                      14 files
        ├── faces/                       4 files
        ├── flags/                       6 files
        ├── icons/                       28 files
        ├── logo/                        5 files
        ├── menu/                        3 files
        ├── museum/                      30 files
        ├── shop/                        13 files
        ├── team/                        7 files
        └── textures/                    3 files

To publish the site, upload the contents of curata/ to your web root. Photos keep their folder, file name and size when you replace them, so no page needs editing.

Colors & Fonts

The whole design is driven by CSS variables declared at the top of style.css. Change a token once and every section, button and card updates. Colours used with transparency have an -rgb twin (for example --ct-gold-rgb) — change both together.

White is the gallery wall, the grey band the base’s quieter rooms. Gold draws the hairlines under the titles, the frames round the buttons and the button faces (with deep ink text); gold ink is the same gold made dark enough for small text, the italic eyebrows and the dates. Ink sets the headings, charcoal the footer and the after-hours bands, and aubergine is kept for the late nights. --ct-bg, --ct-surface, --ct-cream, --ct-heading and --ct-text are the semantic names the components use — the dark theme swaps those (see Light & Dark Mode).

Fonts

Two Google Fonts are loaded in the head of each page: EB Garamond (headings in tracked capitals, the italic eyebrows, dates and wall labels) and Alegreya Sans (body, navigation, buttons and figures). Swap them by editing the Google Fonts link and the --ct-ff-display / --ct-ff-body variables.

Logo

The logo is a frame hung on its wire from a nail, holding a Garamond C, beside CURATA in tracked Garamond capitals. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the white header and the light theme
• logo-light.png — for dark grounds: the header over the heroes, the footer and the dark theme
• logo-word.png — the word alone (the preloader’s wall label)
• mark.png — the framed C alone (the preloader’s frame)
• favicon.png — the browser tab icon

The logo’s lettering appears only inside the images. To use your own logo, replace these files; the header sizes the logo by its height, so a wider or narrower file needs no CSS change.

Light & Dark Mode

Curata opens light: the white wall is the default and needs no attribute. Every header (and the mobile menu) has a theme switch that turns the lights down to the museum after hours. The choice is saved in the browser under the key curata-theme and applied by a one-line script in the <head> before the page paints, so a dark visitor never sees a white flash. The switch sets data-theme="dark" on the <html> tag.

• Tokens — the dark values sit in one block, [data-theme="dark"] { … }, right after :root in style.css. Change a dark colour there.
• Bands that stay dark — sections with the class is-night (the heroes, the Long Gallery, Step Closer, the footer) are charcoal in both themes; is-plum is the aubergine late-night band.
• White panels — the panels on the paint grounds and the hero cards take ct-on-paper and keep their white and ink in both themes.
• Icons — each illustrated icon ships in an ink and a light version, and the right one shows by theme and ground.
• Start dark — to open the site dark for first-time visitors, add data-theme="dark" to the <html> tag of each page; the switch still works and is still remembered.

Museum Logic

The figures on every page come from one data block, JS block 09 Curata Data near the top of main.js (var CURATA). Edit it once and the hours, prices, dates, places and totals follow. Prices are in US dollars; times are minutes after midnight (1080 = 6:00 pm); weekdays run 0 = Sunday to 6 = Saturday; months 1 = January to 12 = December.

Open now and the late nights

Every element with data-open-status shows Open now, until 6 pm, Late tonight, open until 9 pm, Opens today at 10 am or Closed now, opens Tuesday at 10 am, from the visitor’s own clock. Hours lists marked data-hours-table mark today’s row.

The exhibitions on the calendar

The programme repeats every year, and each show is placed within half a year either side of today, so the site always has shows on now, opening next and just closed. A card with data-ex="slug" shows that exhibition; one with data-ex-slot="now:0" (or next:1, past:0, onview:3) shows whichever show holds that place today — Home 01’s first hero slide is now:0, the show closing soonest.

How a ticket booking totals

Membership

Talks, lates and workshops

Every event repeats on its own rule, so its next dates are always ahead of the visitor:

How the shop totals

The bag, the wishlist, the code, the member tick and a ticket draft are kept in the browser (localStorage), so they follow the visitor from page to page. The first visit starts with a small demo bag and wishlist so every shop page has something to show; to start empty, set the two demo lists in doShop() (block 28 Museum Shop) to []. Tickets, membership, event places, donations and checkout confirm on screen with a reference — connect them to your own systems to take real bookings and payments.

WebGL Layers

Two small WebGL scenes draw the moving layers: Brushstroke Flow — impasto strokes with bristle ridges, drifting along a flow field at the top and bottom edges of the page titles and bands, the copy in the middle left clear — and the Sliced Bust — a head and shoulders built from vertical slices, turning on its plinth in the footer while the slices fan open and slide back into line. Each is one canvas:

<canvas class="ct-gl" data-gl="flow" aria-hidden="true"></canvas>

• Colours — each layer reads three colours and an opacity from CSS variables on its canvas or section: --gl-1, --gl-2, --gl-3 and --gl-alpha. The theme switch repaints them.
• Performance — a layer only runs while its section is on screen and the tab is visible. Visitors who prefer reduced motion get one still frame. Without WebGL, the section’s own background shows.
• Remove one — delete the canvas; nothing else depends on it.

RTL (Right To Left)

Curata is RTL-ready: the layout with its paddings and margins, the sliders and the animations all mirror. Right to left comes from the stylesheets, not from separate pages: the language picker (a flag and a code) beside the light / dark switch lists the languages that read left to right and right to left. Choosing Arabic or Hebrew stores the language and the direction (keys curata-lang and curata-dir) and reloads; the one-line script in <head> then sets dir="rtl" and swaps the three stylesheets for the files named in their data-rtl attribute before the page paints. Nothing is translated — you bring your own right-to-left copy. To make a page right to left for good:

1. Set The Direction

Add dir="rtl" to the page’s <html> tag (and set lang to your language):

<html lang="en" class="no-js" dir="rtl">

2. Swap Three Stylesheets

The scripts read the direction from the dir attribute: sliders and every move that must mirror follow it on their own. Prices, dates and the pictures of the scroll moments keep reading left to right.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 34 numbered blocks (see the JS INDEX comment at the top of the file):

• 01–08 — Preloader, Sticky Header, Offcanvas Menu, Scroll Reveals, Back To Top, Anchor Scroll, Light & Dark Mode, Direction, WebGL Layers. The core every page shares: the Picture Hang preloader, the header, the Unveil reveals, the theme and direction switch and the WebGL layers.
• 09–10 — Curata Data, Museum Clock. Curata Data holds every figure; Museum Clock works out open now, late tonight or closed, today’s hours, the next timed entry, the exhibitions on now, next and past and the next date of every event from the visitor’s date.
• 11–19 — Custom Select, Media Cursor, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: selects, the media cursor, sliders, accordions, filters, search, forms.
• 20–22 — The Long Gallery, Step Closer, The Salon Hang. The three home pages’ scroll moments.
• 23–34 — Timed Tickets, Event Places, Membership, Collection Browser, Contact Form, Museum Shop, Account Forms, Donations, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: timed tickets, event places, membership, the collection browser, contact, the museum shop, accounts, donations, the journal, the coming-soon countdown and the FAQ.

Each block is a self-contained doSomething() function that safely skips pages where its section is not present — you can delete any block you do not need. Every animation respects prefers-reduced-motion automatically: content appears in its final state and the scrubbed scenes rest in place.

Images

The download package ships with neutral placeholder images so you can see every layout at the correct dimensions. Replace them with your own photos using the same file names, or update the src attributes. Images are grouped inside assets/img/:

The logo files, the illustrated icons and the language flags are included and ready to use. All demo photography and artwork shown on the live preview, the paint textures and the catalogue shots among it, is for preview purposes only and is not included in the download.

Contact Form

The contact form, the visitor-desk form on Home 01 and the comment form post to sendmail.php, a lightweight AJAX mail handler. The success or error message appears under the button without reloading the page. The newsletter, tickets, membership, event places, donations, checkout, account, login, register and forgot-password forms are demo forms: they confirm on screen and are ready to connect to your own systems. To activate the mail handler on your server:

1. Set your email address

Open sendmail.php and replace the placeholder recipient at the top of the file with your own address:

$email = 'example@example.com';

2. Upload to a PHP host

The form needs a server with PHP mail() support (virtually every shared host). It will not send from your local computer or from a static-only host — there the form shows a friendly “upload to a PHP-enabled host” notice instead.

3. Optional: enable Google reCAPTCHA v3

Invisible reCAPTCHA v3 spam protection is already built into the handler. It stays dormant until the form submits a token — that is why no badge or checkbox appears out of the box. To switch it on:

• Create v3 keys (a site key and a secret key) for your domain in the Google reCAPTCHA admin console
• In sendmail.php, replace YOUR_RECAPTCHA_V3_SECRET_KEY with your secret key
• In contact.html, add a hidden token field inside the form and load the reCAPTCHA script with your site key just before </body>:

<!-- inside the form -->
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

<!-- before the closing </body> tag -->
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
<script>
  grecaptcha.ready(function () {
    grecaptcha.execute('YOUR_SITE_KEY', { action: 'contact' }).then(function (token) {
      document.getElementById('g-recaptcha-response').value = token;
    });
  });
</script>

Once the token field is present, sendmail.php verifies every submission with Google and rejects low-score (bot) requests.

Credits

This template is built using the following open-source libraries and resources.

• Bootstrap 5.3.3
• jQuery 3.7.1
• Swiper 11
• GSAP 3 + ScrollTrigger
• Fancybox 3.5
• Font Awesome Free
• RTLCSS
• Google Fonts: EB Garamond, Alegreya Sans

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheet, the Google Maps embeds and the video popups.

Support

If you have any questions or need help with the template, please reach out through the marketplace where you purchased the template: open the item there and send us your question from its support page. We aim to respond within 24–48 hours.