Nocturne Gallery
A contemporary gallery page with a pinned white-cube hero, a horizontal hanging reel, and a collector viewing form.
Conference Landing Page
A one-day conference page with speakers, a schedule, venue facts, and a ticket request form.
Use this free Fieldwork page as a starting point for a conference, meetup, or workshop day. The layout is a single HTML file with CSS variables for color, a speaker grid, and a demo ticket form you can connect later.
What's included
- Sticky navigation with a mobile menu
- Hero with date, ticket card, and two calls to action
- Speaker grid with CSS avatar placeholders
- Schedule, venue facts, and access notes
- Accessible ticket form that does not pretend to take payment
Responsive support
This template is built as a full page and adapts to desktop, tablet, and mobile widths. Use the live preview to check each viewport before you copy the code.
Template source
Copy the HTML below into your project. A short README in the template folder explains colors, content, and placeholder visuals.
<!--
Fieldwork — One-day conference landing page
See README.md in this folder for usage, colors, content, and placeholder visuals.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fieldwork — A one-day conference for makers</title>
<meta name="description" content="Fieldwork is a one-day conference for designers and builders. Talks in the morning, workshops after lunch, and a hall that closes at a reasonable hour.">
<style>
:root {
--bg: #f6f4ef;
--ink: #121417;
--muted: #545b63;
--card: #fff;
--line: #ddd6c8;
--accent: #1f6b4a;
--accent-dark: #164c35;
--mark: #d7ee3a;
--radius: 10px;
--font: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
--ui: "Avenir Next", "Segoe UI", sans-serif;
--max: 1080px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
color: var(--ink);
background: var(--bg);
font-family: var(--ui);
line-height: 1.55;
}
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
.skip-link {
position: absolute;
left: 1rem;
top: -40px;
background: var(--ink);
color: #fff;
padding: 0.5rem 0.75rem;
z-index: 20;
}
.skip-link:focus { top: 1rem; }
.wrap { width: min(var(--max), calc(100% - 2rem)); margin: 0 auto; }
.site-header {
position: sticky;
top: 0;
z-index: 10;
background: rgba(246, 244, 239, 0.94);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--line);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 72px;
}
.logo {
text-decoration: none;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.86rem;
}
.nav-links { display: flex; align-items: center; gap: 1.2rem; }
.nav-links a:not(.btn) { text-decoration: none; color: var(--muted); }
.nav-links a:not(.btn):hover { color: var(--ink); }
.nav-links .btn-primary { color: var(--ink); }
.nav-toggle {
display: none;
border: 1px solid var(--line);
background: var(--card);
border-radius: 6px;
padding: 0.45rem 0.7rem;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 4px;
padding: 0.75rem 1.1rem;
text-decoration: none;
font-weight: 700;
cursor: pointer;
}
.btn-primary { background: var(--mark); color: var(--ink); }
.btn-primary:hover { background: #c5dc2a; }
.btn-ghost { background: transparent; border: 1px solid var(--ink); }
.hero {
padding: 4.4rem 0 3rem;
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 2.4rem;
align-items: center;
}
.eyebrow {
color: var(--accent);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 0.74rem;
margin: 0 0 0.8rem;
}
h1, h2, h3 { font-family: var(--font); letter-spacing: -0.03em; line-height: 1.12; }
h1 { font-size: clamp(2.6rem, 5vw, 4.3rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 0 0 0.7rem; }
h3 { font-size: 1.18rem; margin: 0 0 0.3rem; }
.lede { font-size: 1.12rem; color: var(--muted); max-width: 36rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.ticket {
background: var(--ink);
color: #f6f4ef;
border-radius: 16px;
padding: 1.4rem;
}
.ticket p { color: #c5c8cc; }
.ticket strong { color: var(--mark); font-size: 2rem; font-family: var(--font); }
section { padding: 3.3rem 0; }
.speakers, .slots, .facts {
display: grid;
gap: 1rem;
margin-top: 1.5rem;
}
.speakers { grid-template-columns: repeat(3, 1fr); }
.slots { grid-template-columns: 1fr; }
.facts { grid-template-columns: 1fr 1fr 1fr; }
.card, .panel, .slot {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.15rem;
}
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
display: grid;
place-items: center;
font-weight: 800;
background: var(--mark);
margin-bottom: 0.9rem;
}
.slot {
display: grid;
grid-template-columns: 7rem 1fr;
gap: 1rem;
align-items: start;
}
.time { font-weight: 800; color: var(--accent); }
form { display: grid; gap: 0.85rem; }
label { font-weight: 600; font-size: 0.92rem; }
input, select, textarea {
width: 100%;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
padding: 0.75rem 0.9rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.form-status { min-height: 1.4em; color: var(--muted); }
.cta-band {
background: var(--ink);
color: #f6f4ef;
border-radius: 16px;
padding: 1.8rem;
}
.cta-band .lede { color: #c5c8cc; }
.site-footer {
border-top: 1px solid var(--line);
padding: 2.2rem 0;
color: var(--muted);
}
.footer-row {
display: flex;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 860px) {
.hero, .speakers, .facts, .form-row, .slot { grid-template-columns: 1fr; }
.nav-toggle { display: inline-flex; }
.nav-links {
display: none;
position: absolute;
left: 1rem;
right: 1rem;
top: 72px;
background: var(--card);
border: 1px solid var(--line);
padding: 1rem;
flex-direction: column;
align-items: flex-start;
}
.nav-links.is-open { display: flex; }
}
</style>
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="site-header">
<div class="wrap nav">
<a class="logo" href="#top">Fieldwork</a>
<button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav">Menu</button>
<nav id="site-nav" class="nav-links" aria-label="Primary">
<a href="#speakers">Speakers</a>
<a href="#schedule">Schedule</a>
<a href="#venue">Venue</a>
<a class="btn btn-primary" href="#tickets">Get a ticket</a>
</nav>
</div>
</header>
<main id="main">
<section class="wrap hero" id="top">
<div>
<p class="eyebrow">Lisbon · 18 October 2026</p>
<h1>One day. No keynotes that waste the morning.</h1>
<p class="lede">Fieldwork is a conference for people who ship. Six talks, two workshops, and a hall that empties before dinner so you can still have one.</p>
<div class="hero-actions">
<a class="btn btn-primary" href="#tickets">Request a ticket</a>
<a class="btn btn-ghost" href="#schedule">Read the day</a>
</div>
</div>
<aside class="ticket">
<p class="eyebrow" style="color: var(--mark);">Early ticket</p>
<p><strong>$180</strong></p>
<p>Includes lunch, both workshops, and a printed program. This is sample copy; wire the button to your ticketing tool.</p>
</aside>
</section>
<section class="wrap" id="speakers" aria-labelledby="speakers-heading">
<h2 id="speakers-heading">Speakers</h2>
<p class="lede">Replace names and initials with your lineup. The avatars are CSS, not photographs.</p>
<div class="speakers">
<article class="card">
<div class="avatar" aria-hidden="true">AL</div>
<h3>Ada Lenz</h3>
<p>Design systems that survive a reorg. Writes the docs people actually open.</p>
</article>
<article class="card">
<div class="avatar" aria-hidden="true">JR</div>
<h3>Jules Rami</h3>
<p>Frontend that stays fast after the third redesign. Talks about budgets, not buzzwords.</p>
</article>
<article class="card">
<div class="avatar" aria-hidden="true">NK</div>
<h3>Noor Kale</h3>
<p>Research without a 40-slide deck. How to change a product in a week.</p>
</article>
</div>
</section>
<section class="wrap" id="schedule" aria-labelledby="schedule-heading">
<h2 id="schedule-heading">The day</h2>
<div class="slots">
<article class="slot"><p class="time">09:00</p><div><h3>Doors and coffee</h3><p>Badges, a quiet room, and a map of the two halls.</p></div></article>
<article class="slot"><p class="time">10:00</p><div><h3>Talks</h3><p>Three twenty-minute talks. No panels. Questions in the corridor.</p></div></article>
<article class="slot"><p class="time">13:00</p><div><h3>Lunch in the yard</h3><p>If it rains, the hall. Dietary notes go on the ticket form.</p></div></article>
<article class="slot"><p class="time">14:30</p><div><h3>Workshops</h3><p>Choose systems or performance. Laptops optional; paper is provided.</p></div></article>
<article class="slot"><p class="time">17:30</p><div><h3>Close</h3><p>The building empties. Dinner is not included on purpose.</p></div></article>
</div>
</section>
<section class="wrap" id="venue" aria-labelledby="venue-heading">
<h2 id="venue-heading">Venue</h2>
<div class="facts">
<article class="panel">
<h3>Hall Two</h3>
<p>Rua do Trabalho 12<br>Lisbon</p>
</article>
<article class="panel">
<h3>Transit</h3>
<p>Metro green line, ten minutes on foot. Bike racks in the courtyard.</p>
</article>
<article class="panel">
<h3>Access</h3>
<p>Step-free entry, captions on talks, and a quiet room on the first floor.</p>
</article>
</div>
</section>
<section class="wrap" id="tickets" aria-labelledby="tickets-heading">
<div class="cta-band">
<h2 id="tickets-heading">Request a ticket</h2>
<p class="lede">This demo form does not take payment. Connect it to your ticketing provider before you publish.</p>
</div>
<form id="ticket-form" class="panel" style="margin-top: 1.2rem;">
<div class="form-row">
<div>
<label for="name">Name</label>
<input id="name" name="name" type="text" autocomplete="name" required>
</div>
<div>
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email" required>
</div>
</div>
<div>
<label for="workshop">Workshop preference</label>
<select id="workshop" name="workshop">
<option>Design systems</option>
<option>Performance</option>
<option>Either</option>
</select>
</div>
<div>
<label for="note">Access or dietary notes</label>
<textarea id="note" name="note" rows="3"></textarea>
</div>
<button class="btn btn-primary" type="submit">Request a ticket</button>
<p class="form-status" id="ticket-status" role="status" aria-live="polite"></p>
</form>
</section>
</main>
<footer class="site-footer">
<div class="wrap footer-row">
<p>© <span id="year"></span> Fieldwork. Conference template by Designyff.</p>
<p><a href="#top">Back to top</a></p>
</div>
</footer>
<script>
document.getElementById('year').textContent = new Date().getFullYear();
const toggle = document.querySelector('.nav-toggle');
const nav = document.getElementById('site-nav');
toggle.addEventListener('click', () => {
const open = toggle.getAttribute('aria-expanded') === 'true';
toggle.setAttribute('aria-expanded', String(!open));
nav.classList.toggle('is-open', !open);
});
const form = document.getElementById('ticket-form');
const status = document.getElementById('ticket-status');
form.addEventListener('submit', (event) => {
event.preventDefault();
status.textContent = 'This demo form does not send data. Connect it to your ticketing or email provider.';
form.reset();
});
</script>
</body>
</html>
Related templates
Meridian Private Office
A quiet private-wealth page on paper and navy, with household figures, a mandate reel, and a referral introduction form.
Real Estate Landing Page
A residential brokerage page with featured homes, neighborhood notes, and a viewing request form.