Overview

An HTML template for an independent photo zine and collective: a publication that prints other photographers’ street and documentary work, runs open calls, hangs the prints in its project space and holds a launch night for every issue. Silvera 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 calls whose deadlines, states and countdowns follow the visitor’s date, an entry fee calculator and a five-step submission, the issues with their print runs and copies left, a subscription priced by plan and postage, the nights and shows from their own rules with places left, and a zine shop with prints by size.

What’s included

• 3 home pages, each with its own scroll moment: the issue fan (twelve covers stacked in the middle fan out by year), the contact frame (a photograph shrinks into its own frame on the roll) and the wall of prints (the contributors’ portraits, scattered, line up along the picture rail)
• A white theme by default and a dark theme on one switch, remembered between visits and applied before the page paints
• Right-to-left stylesheets and a flag language picker: a right-to-left language turns any page around
• A WebGL layer of long city shadows — lamp posts and passers-by thrown up the bands by a low sun — and the zine riffling its pages in the footer
• 5 open calls with their dates worked out from today, tabs by state, a live countdown and the fee calculator
• A five-step submission with a live summary and a reference; Continue never blocks, only Submit checks
• 12 issues by year with copies left, an issue page with spreads, the subscription calculator
• 12 series, two series layouts (big numbered frames, a contact sheet), contributors and profiles
• Exhibitions and nights with places left and a launch-night guest list; the project space’s open-now line on every page
• The zine shop: categories, price filter, sort and search, prints by size, bag, coupon, shipping by zone, VAT included, checkout with an order number, wishlist
• Staple Bind preloader, the blend-disc cursor, Test Strip reveals, word-rise titles, the highlighter sweeping behind titles on hover
• Fully responsive, valid HTML5, no console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open silvera/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the call dates, the countdowns, the fees, the submission, the subscription, the guest list and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the silvera/ 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 issues, the calls, the people, the series, the nights, the shows, the products and the shop rules live in one place — see Zine 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 silvera/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

silvera/
├── *.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 (31 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
        ├── faces/                       6 files
        ├── flags/                       6 files
        ├── hero/                        16 files
        ├── icons/                       22 files
        ├── issues/                      12 files
        ├── logo/                        4 files
        ├── menu/                        3 files
        ├── people/                      12 files
        ├── photos/                      39 files
        └── shop/                        10 files

To publish the site, upload the contents of silvera/ 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 --si-yellow-rgb) — change both together.

White is the page and ink the type, as in the zine. Highlighter yellow is the one accent: the button faces (with ink text), the frames round the photographs, the yellow bands, the marker behind a hovered title and the open-now dot. It is never used for text on white. The closing red marks a call in its last days. --si-bg, --si-surface, --si-panel, --si-heading and --si-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: Roboto (headings at weight 500 with tight tracking, body text, navigation and buttons) and Courier Prime (the typed voice: eyebrows, captions, credits, issue numbers, deadlines and labels). Swap them by editing the Google Fonts link and the --si-ff-body / --si-ff-mono variables.

Logo

The logo is an S built from two clinched staples — the binding of a zine — beside the name in Roboto. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — ink staples and name, for white grounds
• logo-light.png — yellow staples and a white name, for the dark grounds: the header over Home 1’s slider, the night bands, the footer, the dark theme
• logo-cover.png — the same, large, for the preloader’s cover
• favicon.png — the yellow staples on an ink square, the browser tab icon

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

Silvera opens white: the light theme is the default and needs no attribute. The theme switch (in the header on wide screens and always in the menu panel) turns the lights down. The choice is saved in the browser under the key silvera-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 issue fan, the contact sheet, the wall of prints, the page titles without a photograph, the footer) are ink in both themes, and the yellow bands (is-yellow) stay yellow with ink type.
• Logo and icons — the light logo shows on dark grounds and the ink logo on white ones; 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.

Zine Logic

The figures on every page come from one data block, JS block 09 Silvera Data near the top of main.js (var SILVERA). Edit it once and the cards, dates, prices and totals follow. Prices are in euros with VAT included; times are minutes after midnight (720 = 12:00 pm); weekdays run 0 = Sunday to 6 = Saturday.

Open calls, from the date

Every call’s deadline is worked out from the day the page is opened, so the calls never go stale. A call is upcoming before it opens, open (or closing soon) until 23:59 on its deadline, judging until its results and closed after. The bar on each card fills with the share of its time that has passed.

The entry fee

The subscription

Nights and shows

Every night repeats on its weekday of the month, so its next dates are always ahead of the visitor; names put down on a night’s list come off its places left:

How the shop totals

The bag, the wishlist, the applied coupon, the submissions and the guest-list names 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 26 Zine Shop) to []. Checkout, the submission and the guest list confirm on screen with a reference — connect them to your own systems to take real orders and entries.

WebGL & Motion

One small WebGL shader draws the long shadows — lamp posts and passers-by thrown up the band by a low sun on the left, sliding slowly; on dark bands it draws the low light instead and the shadows cut through it. Each layer is one canvas:

<canvas class="si-gl" data-gl="shadows" aria-hidden="true"></canvas>

• Colours — each layer reads three colours, an opacity and a mode from CSS variables on its section: --gl-1, --gl-2, --gl-3, --gl-alpha and --gl-mode (0 draws shadows, 1 draws light). 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.

The footer’s riffling zine (<canvas data-riffle>, block 21) is a second small WebGL scene: sixteen pages hinged on the spine, each bent as it turns, riffled over and back. The preloader folds a sheet into the zine, staples it and opens its cover onto the page, once a session; the cursor is a small disc in difference blend that grows over headings, on mouse-driven screens only.

RTL (Right To Left)

Silvera 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) in the top bar and the menu panel lists the languages that read left to right and right to left. Choosing Arabic or Hebrew stores the language and the direction (keys silvera-lang and silvera-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 figures keep reading left to right inside their rows.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 31 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 Staple Bind preloader, the header, the Test Strip reveals, the theme and direction switch and the WebGL shadows.
• 09–10 — Silvera Data, Zine Clock. Silvera Data holds every figure; Zine Clock works out from the date and time whether the project space is open, every call’s opening, deadline, results and state, the countdowns, the next date of every night and the run of every show.
• 11–19 — Custom Select, Blend Disc Cursor, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: selects, the blend-disc cursor, sliders, accordions, filters, search, the letter, choice cards.
• 20–21 — Scroll Moments, The Zine Riffling. The scroll moments - the issue fan (Home 1), the contact frame (Home 2), the wall of prints (Home 3) - and the footer’s riffling zine.
• 22–31 — Open Call Submissions, Subscriptions, Launch Night RSVP, Contact Form, Zine Shop, Account Forms, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: the fee calculator and the submission, subscriptions, the launch-night list, contact, the zine shop, accounts, the journal, demo forms, the countdown, 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 scroll moments rest finished.

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 shown on the live preview, the issue covers and the print packshots among it, is for preview purposes only and is not included in the download.

Contact Form

The contact form 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, submission, guest list, 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: Roboto, Courier Prime

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheet and the Google Maps embed.

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.