A multi-page concept built around creative pressure, sharper brand systems, reveal motion, and a more experimental lab-style navigation structure. This version shows how Sheppard Creative Co. can build a connected digital world instead of a single isolated landing page.
This version showcases the attached lab-style build with the real HTML, CSS, and JavaScript inside expandable code panels. Because this demo spans multiple pages, the panel stack helps present the whole system clearly instead of reducing it to one screen.
Landing page structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sheappard Creative — Future Lab</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script defer src="script.js"></script>
</head>
<body class="lab-body">
<div class="grain"></div>
<header class="lab-header">
<a href="index.html" class="lab-brand">
<svg viewBox="0 0 120 120" aria-label="Sheappard Creative logo">
<path d="M24 60c0-20 16-36 36-36s36 16 36 36-16 36-36 36S24 80 24 60Z" />
<path d="M78 40 42 80M42 40h36M42 80h36" />
</svg>
<div>
<strong>Sheappard Creative</strong>
<span>Future Lab</span>
</div>
</a>
<button class="menu-toggle" aria-label="Toggle menu">Menu</button>
</header>
<nav class="lab-menu">
<a href="index.html" class="is-current">Start</a>
<a href="playground.html">Playground</a>
<a href="systems.html">Systems</a>
<a href="contact.html">Contact</a>
</nav>
<main class="lab-main">
<section class="lab-hero">
<div class="orb pink"></div>
<div class="orb cyan"></div>
<p class="lab-tag reveal">Creative company / web / motion / brand / pressure</p>
<h1 class="reveal">We build digital presence with more voltage.</h1>
<p class="lab-copy reveal">
Sheappard Creative creates websites and brand experiences for clients who want more energy, more originality, and more reaction from the people they are trying to reach.
</p>
<div class="lab-actions reveal">
<a href="playground.html" class="lab-btn solid">Enter the work</a>
<a href="systems.html" class="lab-btn ghost">See the system</a>
</div>
</section>
<section class="lab-cards">
<a href="playground.html" class="lab-card reveal cyan-card">
<span>Mode 01</span>
<strong>Playful launch pages</strong>
</a>
<a href="systems.html" class="lab-card reveal pink-card">
<span>Mode 02</span>
<strong>Brand systems with edge</strong>
</a>
<a href="contact.html" class="lab-card reveal lime-card">
<span>Mode 03</span>
<strong>Talk to the studio</strong>
</a>
</section>
</main>
</body>
</html>Experimental teaser page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Playground — Sheappard Creative</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script defer src="script.js"></script>
</head>
<body class="lab-body">
<div class="grain"></div>
<header class="lab-header">
<a href="index.html" class="lab-brand">
<svg viewBox="0 0 120 120" aria-label="Sheappard Creative logo">
<path d="M24 60c0-20 16-36 36-36s36 16 36 36-16 36-36 36S24 80 24 60Z" />
<path d="M78 40 42 80M42 40h36M42 80h36" />
</svg>
<div>
<strong>Sheappard Creative</strong>
<span>Future Lab</span>
</div>
</a>
<button class="menu-toggle" aria-label="Toggle menu">Menu</button>
</header>
<nav class="lab-menu">
<a href="index.html">Start</a>
<a href="playground.html" class="is-current">Playground</a>
<a href="systems.html">Systems</a>
<a href="contact.html">Contact</a>
</nav>
<main class="lab-main inner-lab">
<section class="lab-page-hero">
<p class="lab-tag reveal">Playground</p>
<h1 class="reveal">Campaign pages that feel like events.</h1>
</section>
<section class="stacked-panels">
<article class="panel reveal">
<span>01</span>
<h2>Teasers</h2>
<p>Short-burst pages designed to create curiosity before a launch lands.</p>
</article>
<article class="panel reveal alt">
<span>02</span>
<h2>Interactive landers</h2>
<p>Motion-forward experiences that turn scrolling into pacing and anticipation.</p>
</article>
<article class="panel reveal">
<span>03</span>
<h2>Showcase pages</h2>
<p>Experiences that frame one offer, one idea, or one announcement with more drama.</p>
</article>
</section>
</main>
</body>
</html>Brand system page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Systems — Sheappard Creative</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script defer src="script.js"></script>
</head>
<body class="lab-body">
<div class="grain"></div>
<header class="lab-header">
<a href="index.html" class="lab-brand">
<svg viewBox="0 0 120 120" aria-label="Sheappard Creative logo">
<path d="M24 60c0-20 16-36 36-36s36 16 36 36-16 36-36 36S24 80 24 60Z" />
<path d="M78 40 42 80M42 40h36M42 80h36" />
</svg>
<div>
<strong>Sheappard Creative</strong>
<span>Future Lab</span>
</div>
</a>
<button class="menu-toggle" aria-label="Toggle menu">Menu</button>
</header>
<nav class="lab-menu">
<a href="index.html">Start</a>
<a href="playground.html">Playground</a>
<a href="systems.html" class="is-current">Systems</a>
<a href="contact.html">Contact</a>
</nav>
<main class="lab-main inner-lab">
<section class="lab-page-hero">
<p class="lab-tag reveal">Systems</p>
<h1 class="reveal">Identity, direction, and digital behavior aligned.</h1>
</section>
<section class="systems-grid">
<div class="system-box reveal">
<small>Brand signal</small>
<strong>Sharper positioning</strong>
</div>
<div class="system-box reveal">
<small>Visual language</small>
<strong>More distinct design codes</strong>
</div>
<div class="system-box reveal">
<small>Motion behavior</small>
<strong>Interaction with more intent</strong>
</div>
<div class="system-box reveal">
<small>Web execution</small>
<strong>Launch-ready front-end polish</strong>
</div>
</section>
</main>
</body>
</html>Studio contact page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact — Sheappard Creative</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script defer src="script.js"></script>
</head>
<body class="lab-body">
<div class="grain"></div>
<header class="lab-header">
<a href="index.html" class="lab-brand">
<svg viewBox="0 0 120 120" aria-label="Sheappard Creative logo">
<path d="M24 60c0-20 16-36 36-36s36 16 36 36-16 36-36 36S24 80 24 60Z" />
<path d="M78 40 42 80M42 40h36M42 80h36" />
</svg>
<div>
<strong>Sheappard Creative</strong>
<span>Future Lab</span>
</div>
</a>
<button class="menu-toggle" aria-label="Toggle menu">Menu</button>
</header>
<nav class="lab-menu">
<a href="index.html">Start</a>
<a href="playground.html">Playground</a>
<a href="systems.html">Systems</a>
<a href="contact.html" class="is-current">Contact</a>
</nav>
<main class="lab-main inner-lab">
<section class="lab-page-hero">
<p class="lab-tag reveal">Contact</p>
<h1 class="reveal">Bring the next launch, rebuild, or bold idea.</h1>
</section>
<a href="mailto:sheppardcreativeco@gmail.com" class="lab-mail reveal">sheppardcreativeco@gmail.com</a>
</main>
</body>
</html>Visual system and layout
:root {
--bg: #0c1020;
--panel: rgba(255,255,255,.06);
--line: rgba(255,255,255,.12);
--text: #f6f8ff;
--muted: #b9c1d9;
--cyan: #51ecff;
--pink: #ff58b3;
--lime: #d9ff57;
}
*,
*::before,
*::after { box-sizing: border-box; }
body.lab-body {
margin: 0;
color: var(--text);
font-family: "Space Mono", monospace;
background:
radial-gradient(circle at 15% 20%, rgba(255,88,179,.2), transparent 20%),
radial-gradient(circle at 82% 16%, rgba(81,236,255,.16), transparent 22%),
radial-gradient(circle at 50% 80%, rgba(217,255,87,.12), transparent 24%),
var(--bg);
min-height: 100vh;
}
.grain {
position: fixed;
inset: 0;
pointer-events: none;
opacity: .15;
background-image:
linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
background-size: 3px 3px;
}
.lab-header,
.lab-menu,
.lab-main {
width: min(1180px, calc(100% - 32px));
margin-inline: auto;
}
.lab-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 0;
}
.lab-brand {
display: flex;
align-items: center;
gap: 12px;
color: var(--text);
text-decoration: none;
}
.lab-brand svg {
width: 46px;
height: 46px;
stroke: currentColor;
fill: none;
stroke-width: 6;
}
.lab-brand strong,
.lab-brand span {
display: block;
}
.lab-brand strong {
font-family: "Anton", sans-serif;
font-size: 1.25rem;
letter-spacing: .04em;
}
.lab-brand span {
color: var(--cyan);
font-size: .76rem;
text-transform: uppercase;
letter-spacing: .2em;
}
.menu-toggle {
border: 1px solid var(--line);
background: rgba(255,255,255,.04);
color: var(--text);
border-radius: 999px;
padding: 10px 16px;
font: inherit;
}
.lab-menu {
display: flex;
gap: 14px;
padding-bottom: 10px;
flex-wrap: wrap;
}
.lab-menu a {
text-decoration: none;
color: var(--text);
padding: 10px 14px;
border: 1px solid var(--line);
border-radius: 999px;
}
.lab-menu a.is-current {
background: var(--text);
color: var(--bg);
}
.lab-main {
padding: 24px 0 90px;
}
.lab-hero {
position: relative;
min-height: 74vh;
display: grid;
align-content: center;
overflow: hidden;
}
.lab-tag {
color: var(--lime);
text-transform: uppercase;
letter-spacing: .22em;
font-size: .72rem;
}
.lab-hero h1,
.lab-page-hero h1,
.panel h2,
.system-box strong {
font-family: "Anton", sans-serif;
letter-spacing: .02em;
}
.lab-hero h1 {
font-size: clamp(3.4rem, 10vw, 8.5rem);
line-height: .92;
margin: 14px 0;
max-width: 9ch;
}
.lab-copy {
max-width: 44rem;
color: var(--muted);
font-size: 1.04rem;
}
.lab-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 22px;
}
.lab-btn {
text-decoration: none;
padding: 16px 20px;
border-radius: 999px;
font-weight: 700;
}
.lab-btn.solid {
background: linear-gradient(90deg, var(--pink), var(--cyan));
color: #0b1020;
}
.lab-btn.ghost {
border: 1px solid var(--line);
color: var(--text);
}Menu and interaction logic
const menuToggle = document.querySelector(".menu-toggle");
const menu = document.querySelector(".lab-menu");
menuToggle?.addEventListener("click", () => {
if (getComputedStyle(menu).display === "none") {
menu.style.display = "flex";
} else if (window.innerWidth < 760) {
menu.style.display = "none";
}
});
if (window.innerWidth < 760) {
menu.style.display = "none";
}
window.addEventListener("resize", () => {
if (window.innerWidth >= 760) {
menu.style.display = "flex";
} else {
menu.style.display = "none";
}
});
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) entry.target.classList.add("visible");
});
}, { threshold: 0.18 });
document.querySelectorAll(".reveal").forEach((el) => observer.observe(el));
document.querySelectorAll(".lab-card").forEach((card) => {
card.addEventListener("mousemove", (e) => {
const rect = card.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width - 0.5) * 10;
const y = ((e.clientY - rect.top) / rect.height - 0.5) * -10;
card.style.transform = `rotateX(${y}deg) rotateY(${x}deg) translateY(-6px)`;
});
card.addEventListener("mouseleave", () => {
card.style.transform = "rotateX(0) rotateY(0) translateY(0)";
});
});