← Back to all products
$19
Event Template
Event & conference template with schedule, speakers, venue info, and ticket integration.
JavaScriptMarkdownJSON
📄 Product Preview
Try the interactive reader and demo tools below, or get the full product with all content unlocked.
📖 Interactive Reader (Free Preview) ⚙ Try Demo Tools 📦 Download Free Sample📁 File Structure 7 files
event-template/
├── LICENSE
├── README.md
├── assets/
│ └── README.md
├── index.html
├── script.js
└── style.css
📖 Documentation Preview README excerpt
Event Template
An event and conference website template for conferences, meetups, and workshops. Includes speaker profiles, schedule, venue details, and ticket tiers.
Price
$19 -- one-time purchase, lifetime updates.
Features
- Fully responsive -- Mobile-first design with tablet and desktop breakpoints
- Dark/Light mode -- Built-in theme toggle, persists to localStorage
- No dependencies -- Pure HTML, CSS, and vanilla JavaScript
- Under 400KB -- Lightweight and fast-loading
- Scroll animations -- Reveal-on-scroll using Intersection Observer
- SEO ready -- Semantic HTML5, meta tags, Open Graph tags
- Accessible -- ARIA labels, keyboard navigation, proper contrast ratios
- CSS custom properties -- Easy color, font, and spacing customization
Sections
- Hero with event name, date, and CTA
- Speaker profiles with photos and bios
- Schedule / agenda with time slots
- Ticket tiers with pricing
- Venue information with map placeholder
- Sponsors section
- FAQ accordion
- Footer with organizer info and social links
What's Included
event-template/
├── index.html # Main HTML (all sections)
├── style.css # Complete stylesheet with CSS tokens
├── script.js # Theme toggle, scroll reveal, tabs, nav
├── manifest.json # Product metadata and file listing
├── assets/
│ └── README.md # Guide for adding your own images
├── README.md # This documentation
└── LICENSE # MIT License
Installation
1. Download and unzip the template
2. Open index.html in your browser
3. Edit the HTML content with your event details
4. Deploy to any static hosting provider
# Open locally
open index.html
# Or use a local server
python -m http.server 8000
Customization
... continues with setup instructions, usage examples, and more.
📄 Code Sample .js preview
script.js
/**
* Event Template — Interactive Features
* ──────────────────────────────────────
* Pure vanilla JS — zero dependencies.
*
* Features:
* 1. Theme toggle (light/dark) with localStorage persistence
* 2. Scroll-reveal via IntersectionObserver
* 3. Mobile hamburger navigation
* 4. Smooth-scroll for anchor links
* 5. Schedule multi-day tabs (ARIA tablist)
*/
(function () {
'use strict';
/* ── 1. THEME TOGGLE ──────────────────────────────────────── */
var themeToggle = document.getElementById('themeToggle');
var htmlEl = document.documentElement;
/** Reads saved theme or falls back to OS preference. */
function getPreferredTheme() {
var saved = localStorage.getItem('theme');
if (saved) return saved;
return window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light';
}
/** Applies the given theme string to the page. */
function applyTheme(theme) {
htmlEl.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
if (themeToggle) {
var isDark = theme === 'dark';
themeToggle.setAttribute('aria-pressed', String(isDark));
themeToggle.setAttribute(
'aria-label',
isDark ? 'Switch to light mode' : 'Switch to dark mode'
);
}
// Update the theme-color meta tag to match
var metaThemeColor = document.querySelector('meta[name="theme-color"]');
if (metaThemeColor) {
metaThemeColor.setAttribute(
'content',
theme === 'dark' ? '#0f0a1e' : '#7c3aed'
);
# ... 228 more lines ...