← View the template

StaticThemes / Version 1.0.0

Noxen.
The owner’s guide.

Quick start

Open index.html in your browser. No installation, build step, framework or server is required. Upload the folder contents to any static host. There are 18 complete pages: all 14 requested page types plus two additional event pages and two additional journal articles.

Project structure

Root HTML files are the editable pages. assets/css/style.css contains the complete design. assets/js/main.js contains vanilla interactions. assets/images contains five responsive demo images. assets/audio contains three 45-second CC0-licensed electronic music previews. assets/fonts contains the display font and license. assets/icons contains the favicon. documentation/index.html is the browser-friendly guide. PACKAGE-CONTENTS.md gives a concise inventory.

Editing text and navigation

Edit HTML directly. Update the title and meta description with visible copy. Headers and footers are repeated intentionally so every page works independently. Apply navigation changes to all pages, including mobile and noscript navigation. Keep aria-current="page" on the current link. Keep one h1 per page and meaningful heading order. Relative .html links work locally and on static hosting.

Colors and fonts

Edit the :root tokens at the top of assets/css/style.css. --paper, --ink and --blue define the palette; --space controls outer gutters; --max controls content width. Update @font-face and --font-display to change the heading font. The body uses a system font stack. Include licenses for replacement fonts. Preserve visible focus states and check contrast after changes. Responsive breakpoints are 1100, 900 and 650 pixels.

Replacing images

Replace the WebP files or update every src and srcset reference. Landscape images have 640, 1200 and 1600 pixel variants; square artwork has 480 and 900 pixel variants. Update alt text and width/height when changing subjects or ratios. For gallery items also update data-gallery-image, data-alt and data-caption. Categories use data-category matched to data-filter buttons. Keep image files optimized and below-the-fold loading lazy.

Updating events

Update event rows on index.html and events.html and the corresponding detail page. Duplicate an event detail page for new dates. Keep venue, city, hours and date consistent. Replace demo ticket information with verified admission details. Real ticket links should lead to your ticket provider. booking.html?event=Your%20Event pre-fills the event reference; it does not book or sell anything.

Music and releases

Replace MP3 files with audio you have permission to distribute. Update data-audio, data-title, accessible button labels and visible duration. Update the native audio player src separately. The custom player allows one preview at a time and pauses the native player. Playback requires a click. Keep preload="none". The included files are 45-second edits of CC0-licensed electronic tracks; see ASSET-LICENSES.md for sources and terms. The visible Noxen track names are fictional demo labels, not authorship claims. Update demo length notices when replacing tracks.

Packages and services

Edit pricing.html cards, including currency, duration, equipment and exclusions. Update matching booking options. Package query values core, extended and full must match option values. Service links use type=club, wedding, private, corporate, festival or custom. Be explicit about travel, accommodation, taxes and technical requirements.

Connecting forms

The demo forms only validate in the browser; nothing is sent or saved. To connect a provider: set form action to your verified endpoint and method="post"; remove data-demo-form so the demo handler no longer intercepts submission; remove disabled from the submit button; change its label to Send enquiry; remove demo disclosures, demo status and noscript notice; add accurate privacy information. Configure the provider’s spam protection, field mapping, notifications and success/error handling. Test actual receipt and failure behavior. Never place secret API keys in client code. A provider may have fees; the unconnected template uses no paid API.

Social and business details

No fictional social accounts are linked. Add verified profile links to every footer with clear labels. If opening new tabs use rel="noopener noreferrer" and indicate that behavior. Replace artist details, demo prices and illustrative testimonials. Obtain permission for real testimonials. Add your privacy and business information. The discreet creator credit links to https://staticthemes.shop.

Deployment

Upload the contents of this folder to your host’s document root, with index.html at the root. No Node.js runtime is needed. Use HTTPS. Configure the host to serve 404.html with HTTP 404 for missing URLs; the file alone does not configure routing. Demo pages contain noindex, nofollow: remove those meta tags when your customized site should be indexed. Add canonical URLs and a sitemap using your real domain. Check mobile navigation, audio, forms, links and images after uploading.

Accessibility and compatibility

Semantic landmarks, associated labels, visible focus, reduced-motion support and native dialog/disclosure elements are included. Content and a fallback navigation remain available without JavaScript. The native player works without custom JavaScript. Filters, lightbox enlargement and demo form checking require JavaScript. Target modern evergreen browsers. Test your customized content at mobile, tablet and desktop widths.

Asset provenance

The demo imagery was created specifically for Noxen and depicts fictional subjects. The music previews use CC0/public-domain source tracks with credits recorded in ASSET-LICENSES.md. No reference-template source or assets were reused. DejaVu Sans Bold is redistributed with its license in assets/fonts/LICENSE-DejaVu.txt. Keep all applicable notices with an authorised client copy.

License, support and updates

Read LICENSE.txt before using the Template. One Standard License covers one completed website under one primary domain, including its local development and staging copies. A separate license is required for each additional independent website. SUPPORT.md explains purchaser support, CHANGELOG.md records releases, and ASSET-LICENSES.md contains media and font notices. A third-party marketplace license controls if its terms conflict with the included direct-sale license.

Created by StaticThemes.