Waitlist
Code
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Turn interest into momentum. | Early access</title>
<style>
* { box-sizing: border-box; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; background: #fff; color: #111; font-family: Arial, Helvetica, sans-serif; }
.hero { position: relative; min-height: 430px; height: min(67vh, 620px); display: flex; align-items: flex-end; overflow: hidden; background: #111; color: #fff; }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 52%; filter: grayscale(1) brightness(.46); }
.hero-copy { position: relative; z-index: 1; width: min(100%, 1040px); padding: 52px 6% 42px; }
.eyebrow { margin: 0 0 19px; font-size: 10px; font-weight: 700; }
h1 { max-width: 900px; margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 70px; font-weight: 400; line-height: .98; }
.subtitle { max-width: 540px; margin: 18px 0 24px; color: #e4e4e4; font-size: 15px; line-height: 1.55; }
.signup { display: flex; width: min(100%, 480px); gap: 0; }
.signup input { min-width: 0; flex: 1; height: 52px; padding: 0 15px; border: 1px solid #fff; border-right: 0; border-radius: 0; background: transparent; color: #fff; font: inherit; }
.signup input::placeholder { color: #d4d4d4; }
.signup button { min-height: 52px; padding: 0 19px; border: 1px solid #fff; border-radius: 0; background: #fff; color: #111; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.note { margin: 12px 0 0; color: #d4d4d4; font-size: 11px; }
.hero-index { position: absolute; right: 6%; bottom: 46px; z-index: 1; font-size: 10px; }
.details { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding: 42px 6% 30px; }
.details .eyebrow { color: #626262; }
h2 { max-width: 480px; margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 38px; font-weight: 400; line-height: 1.05; }
.details-copy { max-width: 420px; margin: 26px 0 0; color: #525252; font-size: 14px; line-height: 1.7; }
.details-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid #dedede; color: #626262; font-size: 9px; font-weight: 700; }
footer { display: flex; justify-content: space-between; gap: 16px; padding: 16px 6%; border-top: 1px solid #dedede; color: #626262; font-size: 10px; }
.success { width: 100%; margin: 0; padding: 17px; border: 1px solid #fff; color: #fff; font-size: 14px; }
@media (max-width: 700px) {
.hero { min-height: 570px; height: auto; }
.hero-copy { padding: 40px 6% 34px; }
h1 { font-size: 45px; }
.subtitle { font-size: 14px; }
.signup { flex-direction: column; gap: 8px; }
.signup input { border-right: 1px solid #fff; }
.hero-index { right: 6%; bottom: 12px; }
.details { grid-template-columns: 1fr; gap: 10px; padding-top: 32px; }
h2 { font-size: 32px; }
.details-copy { margin-top: 8px; }
.details-bottom { grid-column: auto; margin-top: 22px; }
}
</style>
</head>
<body>
<main>
<section class="hero" aria-labelledby="waitlist-title">
<img class="hero-image" src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=2200&q=85" alt="A bright, thoughtfully designed collaborative studio" />
<div class="hero-copy">
<p class="eyebrow">NOW OPEN / EARLY ACCESS</p>
<h1 id="waitlist-title">Turn interest into momentum.</h1>
<p class="subtitle">Join the early access list for a calmer, smarter way to get work done.</p>
<form class="signup">
<label hidden for="email">Email address</label>
<input id="email" type="email" placeholder="Your email address" autocomplete="email" required />
<button type="submit">Join the waitlist</button>
</form>
<p class="note">No spam. Just a note when we are ready.</p>
</div>
<div class="hero-index">01 / A NEW WAY FORWARD</div>
</section>
<section class="details">
<div><p class="eyebrow">A GOOD PLACE TO BEGIN</p><h2>Be there from the beginning.</h2></div>
<p class="details-copy">Get a first look, thoughtful updates, and an invitation when we open the doors. No noise. Just the things worth knowing.</p>
<div class="details-bottom"><span>EARLY ACCESS, NOT NOISE</span><span>MADE FOR WHAT COMES NEXT</span></div>
</section>
</main>
<footer><span>WAITLIST / 2026</span><span>See you soon.</span></footer>
<script>
document.querySelector('.signup').addEventListener('submit', (event) => {
event.preventDefault();
event.currentTarget.innerHTML = '<p class="success" role="status">You are on the list. We will be in touch.</p>';
});
</script>
</body>
</html>