Cinematic Parallax Landing Page
A dark, cinematic architecture landing page with layered parallax, a horizontal project reel, and a commission form.
Creative Agency Landing Page
A studio marketing page with case studies, capabilities, process, team, and a project inquiry form.
Use this free Northbound page as a starting point for an agency or freelance studio. The layout is a single HTML file with CSS variables for color, selected work, and clearly marked copy you can replace.
What's included
- Sticky navigation with a mobile menu
- Hero with studio stats and two calls to action
- Case study list with CSS visual placeholders
- Capabilities, process steps, and team with initials
- Client names as text instead of fake logos
- Accessible inquiry form that does not pretend to submit to a backend
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.
<!--
Northbound — Creative agency landing page template
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>Northbound — Brand and digital studio</title>
<meta name="description" content="Northbound is an independent studio for brand, websites, and product design. We work with a small number of companies at a time.">
<style>
:root {
--bg: #f3efe6;
--ink: #0b1f3a;
--muted: #4b5568;
--card: #fffdf8;
--line: #d9d1c3;
--accent: #c45c26;
--accent-dark: #9a4318;
--navy: #0b1f3a;
--radius: 6px;
--font: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
--ui: "Avenir Next", "Segoe UI", sans-serif;
--max: 1120px;
}
* { 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 { font: inherit; color: inherit; }
.skip-link {
position: absolute;
left: 1rem;
top: -40px;
background: var(--navy);
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(243, 239, 230, 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.12em;
text-transform: uppercase;
font-size: 0.86rem;
}
.nav-links { display: flex; align-items: center; gap: 1.25rem; }
.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: #fff; }
.nav-links .btn-primary:hover { color: #fff; background: var(--accent-dark); }
.nav-toggle {
display: none;
border: 1px solid var(--line);
background: var(--card);
border-radius: 4px;
padding: 0.45rem 0.7rem;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 4px;
padding: 0.8rem 1.15rem;
text-decoration: none;
font-weight: 700;
cursor: pointer;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: #16345c; }
.hero { padding: 5rem 0 3rem; }
.eyebrow {
color: var(--accent);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 0.76rem;
margin: 0 0 0.9rem;
}
h1, h2, h3 { font-family: var(--font); letter-spacing: -0.03em; line-height: 1.12; }
h1 { font-size: clamp(2.6rem, 6vw, 5rem); margin: 0 0 1rem; max-width: 16ch; }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 0 0 0.7rem; }
h3 { font-size: 1.25rem; margin: 0 0 0.4rem; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 38rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.8rem; }
.stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: 3rem;
border-top: 1px solid var(--line);
padding-top: 1.4rem;
}
.stats strong { display: block; font-family: var(--font); font-size: 2rem; }
section { padding: 4rem 0; }
.work-list { display: grid; gap: 1rem; margin-top: 1.6rem; }
.case {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 0;
background: var(--card);
border: 1px solid var(--line);
overflow: hidden;
text-decoration: none;
}
.case-visual { min-height: 220px; }
.case:nth-child(1) .case-visual { background: linear-gradient(135deg, #0b1f3a, #c45c26); }
.case:nth-child(2) .case-visual { background: linear-gradient(135deg, #14532d, #f3efe6); }
.case:nth-child(3) .case-visual { background: linear-gradient(135deg, #1e1b4b, #e7e5e4); }
.case-body { padding: 1.4rem; }
.case-body p { color: var(--muted); }
.caps, .steps, .people {
display: grid;
gap: 1rem;
margin-top: 1.6rem;
}
.caps { grid-template-columns: repeat(3, 1fr); }
.steps { grid-template-columns: repeat(4, 1fr); }
.people { grid-template-columns: repeat(3, 1fr); }
.card {
background: var(--card);
border: 1px solid var(--line);
padding: 1.2rem;
}
.step-num {
font-family: var(--font);
font-size: 1.6rem;
color: var(--accent);
margin: 0 0 0.4rem;
}
.avatar {
width: 56px;
height: 56px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--navy);
color: #fff;
font-weight: 700;
margin-bottom: 0.8rem;
}
.clients {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.5rem;
color: var(--muted);
font-weight: 700;
letter-spacing: 0.04em;
margin-top: 1.2rem;
}
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 1.5rem; }
form { display: grid; gap: 0.85rem; }
label { font-weight: 600; font-size: 0.92rem; }
input, textarea {
width: 100%;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 4px;
padding: 0.75rem 0.9rem;
}
textarea { min-height: 130px; resize: vertical; }
.form-status { min-height: 1.4em; color: var(--muted); }
.cta-band {
background: var(--navy);
color: #f3efe6;
padding: 3rem 1.5rem;
border-radius: 4px;
}
.cta-band .lede { color: #cbd5e1; }
.site-footer {
border-top: 1px solid var(--line);
padding: 2rem 0 2.4rem;
color: var(--muted);
}
.footer-row {
display: flex;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 860px) {
.stats, .caps, .steps, .people, .contact-grid, .case { 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: stretch;
}
.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">Northbound</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="#work">Work</a>
<a href="#capabilities">Capabilities</a>
<a href="#studio">Studio</a>
<a class="btn btn-primary" href="#contact">Start a project</a>
</nav>
</div>
</header>
<main id="main">
<section class="wrap hero" id="top">
<p class="eyebrow">Brand, web, and product · Lisbon and remote</p>
<h1>We design the next version of companies people already trust.</h1>
<p class="lede">Northbound is a small studio. We take on a handful of brand and digital projects a year so the work can stay specific, and the people doing it stay on the account.</p>
<div class="hero-actions">
<a class="btn btn-primary" href="#work">See selected work</a>
<a class="btn btn-navy" href="#contact">Start a project</a>
</div>
<div class="stats">
<p><strong>12</strong> active clients, by design</p>
<p><strong>8 yrs</strong> as an independent studio</p>
<p><strong>3</strong> disciplines in one room</p>
</div>
</section>
<section class="wrap" id="work" aria-labelledby="work-heading">
<h2 id="work-heading">Selected work</h2>
<p class="lede">Replace the color fields with case-study stills. Keep the copy short enough that a founder can read it between meetings.</p>
<div class="work-list">
<a class="case" href="#contact">
<div class="case-visual" aria-hidden="true"></div>
<div class="case-body">
<p class="eyebrow">Harbor · Product and site</p>
<h3>A quieter marketing site for a planning tool that already had too many words.</h3>
<p>Brand refresh, landing page, and a component library the product team kept after launch.</p>
</div>
</a>
<a class="case" href="#contact">
<div class="case-visual" aria-hidden="true"></div>
<div class="case-body">
<p class="eyebrow">Cedar & Rye · Hospitality</p>
<h3>Identity and a one-page site for a kitchen that did not want a booking widget shouting.</h3>
<p>Type, menus, and a reservation path that still feels like the room.</p>
</div>
</a>
<a class="case" href="#contact">
<div class="case-visual" aria-hidden="true"></div>
<div class="case-body">
<p class="eyebrow">Field Notes · Climate research</p>
<h3>A public archive that scientists could update without a CMS specialist.</h3>
<p>Information architecture, templates, and a visual system for maps and field photos.</p>
</div>
</a>
</div>
</section>
<section class="wrap" id="capabilities" aria-labelledby="cap-heading">
<h2 id="cap-heading">What we take on</h2>
<div class="caps">
<article class="card">
<h3>Brand</h3>
<p>Naming when needed, identity, and a short set of rules a team can actually follow.</p>
</article>
<article class="card">
<h3>Websites</h3>
<p>Marketing pages, docs homes, and the templates behind them. Built to be edited.</p>
</article>
<article class="card">
<h3>Product design</h3>
<p>Flows, UI, and a system that engineering can ship without a weekly design bottleneck.</p>
</article>
</div>
<h3 style="margin-top: 2.5rem;">How a project usually runs</h3>
<div class="steps">
<article class="card">
<p class="step-num">01</p>
<h3>Listen</h3>
<p>A week of interviews, existing work, and the constraint you cannot ignore.</p>
</article>
<article class="card">
<p class="step-num">02</p>
<h3>Direction</h3>
<p>Two tight routes, not twelve. You pick one before we draw the whole system.</p>
</article>
<article class="card">
<p class="step-num">03</p>
<h3>Build</h3>
<p>Design and front-end in the same pass so nothing dies in a handoff folder.</p>
</article>
<article class="card">
<p class="step-num">04</p>
<h3>Handover</h3>
<p>Files, tokens, and a live session with whoever will keep the work going.</p>
</article>
</div>
</section>
<section class="wrap" id="studio" aria-labelledby="studio-heading">
<h2 id="studio-heading">The studio</h2>
<p class="lede">A small team on purpose. Initials stand in for photos until you drop in real portraits.</p>
<div class="people">
<article class="card">
<div class="avatar" aria-hidden="true">IN</div>
<h3>Ines Navarro</h3>
<p>Design director. Brand and type. Previously at a newspaper, which still shows.</p>
</article>
<article class="card">
<div class="avatar" aria-hidden="true">JT</div>
<h3>Jonah Teal</h3>
<p>Product design. Makes the messy workflow into something a new hire can use on day one.</p>
</article>
<article class="card">
<div class="avatar" aria-hidden="true">RK</div>
<h3>Rina Kole</h3>
<p>Web and systems. Turns the identity into pages, components, and a README people read.</p>
</article>
</div>
<p style="margin-top: 2rem;">A few teams we have worked with, named in text rather than fake logos:</p>
<div class="clients">
<span>Harbor</span>
<span>Cedar & Rye</span>
<span>Field Notes</span>
<span>Lattice Lab</span>
<span>Northwind Co-op</span>
</div>
</section>
<section class="wrap" id="contact" aria-labelledby="contact-heading">
<div class="cta-band">
<h2 id="contact-heading">Tell us what needs a next version.</h2>
<p class="lede">Share a site, a product, or a sentence about the company. We reply within a week, even if the answer is not now.</p>
</div>
<div class="contact-grid" style="margin-top: 1.5rem;">
<div>
<p>New business: use the form. This demo does not send mail until you connect a provider.</p>
<p>Studio hours are weekdays, Lisbon time.</p>
</div>
<form id="contact-form">
<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>
<label for="company">Company</label>
<input id="company" name="company" type="text" autocomplete="organization">
</div>
<div>
<label for="message">What are you trying to change?</label>
<textarea id="message" name="message" required></textarea>
</div>
<button class="btn btn-primary" type="submit">Send</button>
<p class="form-status" id="contact-status" role="status" aria-live="polite"></p>
</form>
</div>
</section>
</main>
<footer class="site-footer">
<div class="wrap footer-row">
<p>© <span id="year"></span> Northbound. Agency 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('contact-form');
const status = document.getElementById('contact-status');
form.addEventListener('submit', (event) => {
event.preventDefault();
status.textContent = 'This demo form does not send data. Connect it to your email or form provider.';
form.reset();
});
</script>
</body>
</html>
Related templates
Restaurant Landing Page
A warm, responsive page for a neighborhood restaurant, with hours, a sample menu, and a reservation form.
Modern SaaS Landing Page
A complete responsive landing page for a SaaS product, with navigation, pricing, FAQ, and a final call to action.