This demo presents Sheppard Creative as a more structured, systems-driven studio. The attached files focus on clearer signal, modular page building, project proof, service architecture, and a stronger intake flow for better-fit leads.
This wrapper is built around the attached Demo 05 files: a stronger editorial homepage, project and services pages, a more serious intake/contact page, and the shared styling and scripting that keep the whole system consistent.
Main homepage 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 — Structured Signal</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=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
<script defer src="script.js"></script>
</head>
<body class="mod-body">
<a class="skip-link" href="#main">Skip to content</a>
<header class="mod-header">
<a href="index.html" class="mod-brand">
<svg viewBox="0 0 120 120" aria-label="Sheappard Creative logo">
<path d="M30 88V32h26c16 0 26 6 26 17 0 8-5 14-13 16l16 12"></path>
</svg>
<div>
<strong>Sheappard Creative</strong>
<span>Structured Signal</span>
</div>
</a>
<nav class="mod-nav" aria-label="Primary">
<a href="index.html" class="active">Start</a>
<a href="projects.html">Projects</a>
<a href="services.html">Services</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main id="main">
<section class="mod-hero">
<div class="hero-cell label reveal">
<span>Sheappard Creative / 01</span>
</div>
<div class="hero-cell main reveal">
<h1>Structured websites for companies that need clearer signal.</h1>
</div>
<div class="hero-cell side reveal">
<p>
Brand systems, launch sites, and modular digital experiences built with hierarchy, speed, and visual control.
</p>
<a class="mod-link" href="projects.html">Browse projects</a>
</div>
</section>
<section class="mod-grid-overview">
<article class="grid-box reveal">
<p class="box-id">System view</p>
<h2>We design systems that scale across landing pages, websites, campaigns, and internal brand assets.</h2>
</article>
<article class="grid-box accent reveal">
<p class="box-id">Signal view</p>
<p>
Every layout is built to make the offer, the message, and the trust signals easier to understand.
</p>
</article>
</section>
<section class="mod-metrics">
<div class="metric reveal">
<strong data-count="12">0</strong>
<span>Distinct web directions</span>
</div>
<div class="metric reveal">
<strong data-count="18">0</strong>
<span>Sharper message systems</span>
</div>
<div class="metric reveal">
<strong data-count="27">0</strong>
<span>Template clichés avoided</span>
</div>
</section>
<section class="mod-list-section">
<div class="section-intro reveal">
<p class="eyebrow">Capabilities</p>
<h2>What gets built, tightened, and clarified.</h2>
</div>
<div class="mod-list">
<a href="services.html" class="mod-row reveal">
<span>01</span>
<strong>Brand positioning</strong>
<em>Clarify the company signal, message direction, and what should be remembered first.</em>
</a>
<a href="services.html" class="mod-row reveal">
<span>02</span>
<strong>Website systems</strong>
<em>Build structures for homepages, service pages, project pages, and launch flows that feel coherent end to end.</em>
</a>
<a href="services.html" class="mod-row reveal">
<span>03</span>
<strong>Creative direction</strong>
<em>Shape typography, motion, spacing, and page behavior into a more ownable digital language.</em>
</a>
</div>
</section>
</main>
</body>
</html>Project proof page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sheappard Creative — Projects</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=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
<script defer src="script.js"></script>
</head>
<body class="mod-body">
<a class="skip-link" href="#main">Skip to content</a>
<header class="mod-header">
<a href="index.html" class="mod-brand">
<svg viewBox="0 0 120 120" aria-label="Sheappard Creative logo">
<path d="M30 88V32h26c16 0 26 6 26 17 0 8-5 14-13 16l16 12"></path>
</svg>
<div>
<strong>Sheappard Creative</strong>
<span>Structured Signal</span>
</div>
</a>
<nav class="mod-nav" aria-label="Primary">
<a href="index.html">Start</a>
<a href="projects.html" class="active">Projects</a>
<a href="services.html">Services</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main id="main" class="mod-inner">
<section class="mod-page-hero reveal">
<p class="eyebrow">Selected projects</p>
<h1>Examples of structure, pressure, and digital cleanup.</h1>
</section>
<section class="project-board reveal">
<article class="project-strip">
<span>01</span>
<h2>Northline Systems</h2>
<p>Designed a modern service website with clearer content flow, tighter hierarchy, and stronger conversion emphasis.</p>
</article>
<article class="project-strip">
<span>02</span>
<h2>Field Assembly</h2>
<p>Built a promotional web system around timing, contrast, and page-by-page momentum.</p>
</article>
<article class="project-strip">
<span>03</span>
<h2>Meridian Practice</h2>
<p>Translated a vague brand presence into a more credible and more ownable digital language.</p>
</article>
</section>
</main>
</body>
</html>Capabilities page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sheappard Creative — Services</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=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
<script defer src="script.js"></script>
</head>
<body class="mod-body">
<a class="skip-link" href="#main">Skip to content</a>
<header class="mod-header">
<a href="index.html" class="mod-brand">
<svg viewBox="0 0 120 120" aria-label="Sheappard Creative logo">
<path d="M30 88V32h26c16 0 26 6 26 17 0 8-5 14-13 16l16 12"></path>
</svg>
<div>
<strong>Sheappard Creative</strong>
<span>Structured Signal</span>
</div>
</a>
<nav class="mod-nav" aria-label="Primary">
<a href="index.html">Start</a>
<a href="projects.html">Projects</a>
<a href="services.html" class="active">Services</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main id="main" class="mod-inner">
<section class="mod-page-hero reveal">
<p class="eyebrow">Capabilities</p>
<h1>The systems behind a stronger digital signal.</h1>
</section>
<section class="service-matrix">
<article class="service-tile reveal">
<small>01</small>
<h2>Brand positioning</h2>
<p>Clarify what the company stands for, what it should sound like, and what should be remembered first.</p>
</article>
<article class="service-tile reveal">
<small>02</small>
<h2>Website systems</h2>
<p>Create flexible structures for homepages, service pages, project pages, and launch flows.</p>
</article>
<article class="service-tile reveal">
<small>03</small>
<h2>Campaign pages</h2>
<p>Build high-attention digital moments for announcements, offers, new products, or new positioning.</p>
</article>
<article class="service-tile reveal">
<small>04</small>
<h2>Creative direction</h2>
<p>Shape typography, motion, tone, grid behavior, and overall visual pressure into one language.</p>
</article>
</section>
</main>
</body>
</html>Intake and inquiry page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sheappard Creative — Contact</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=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
<script defer src="script.js"></script>
</head>
<body class="mod-body">
<a class="skip-link" href="#main">Skip to content</a>
<header class="mod-header">
<a href="index.html" class="mod-brand">
<svg viewBox="0 0 120 120" aria-label="Sheappard Creative logo">
<path d="M30 88V32h26c16 0 26 6 26 17 0 8-5 14-13 16l16 12"></path>
</svg>
<div>
<strong>Sheappard Creative</strong>
<span>Structured Signal</span>
</div>
</a>
<nav class="mod-nav" aria-label="Primary">
<a href="index.html">Start</a>
<a href="projects.html">Projects</a>
<a href="services.html">Services</a>
<a href="contact.html" class="active">Contact</a>
</nav>
</header>
<main id="main" class="mod-inner">
<section class="mod-page-hero reveal">
<p class="eyebrow">Project intake</p>
<h1>Bring the messy brief. We’ll build the structure.</h1>
</section>
<section class="intake-shell reveal">
<aside class="intake-intro">
<p>
Tell us what you are building, what feels off right now, and what kind of shift you want the brand or website to make.
</p>
<div class="intake-mini-stats">
<div>
<strong>01</strong>
<span>Clear structure</span>
</div>
<div>
<strong>02</strong>
<span>Fast screening</span>
</div>
<div>
<strong>03</strong>
<span>Better-fit leads</span>
</div>
</div>
</aside>
<section>
<form class="intake-form">
<div class="field-grid two">
<div class="field">
<label for="name">Name</label>
<input id="name" type="text" placeholder="Your name" />
</div>
<div class="field">
<label for="email">Email</label>
<input id="email" type="email" placeholder="Your email" />
</div>
</div>
<div class="field">
<label for="company">Company</label>
<input id="company" type="text" placeholder="Company or studio name" />
</div>
<fieldset class="choice-field">
<legend>What are you building?</legend>
<div class="choice-grid">
<label class="choice-pill"><input type="radio" name="project" checked /><span>Website</span></label>
<label class="choice-pill"><input type="radio" name="project" /><span>Launch page</span></label>
<label class="choice-pill"><input type="radio" name="project" /><span>Rebrand</span></label>
<label class="choice-pill"><input type="radio" name="project" /><span>Campaign</span></label>
</div>
</fieldset>
<div class="field">
<label for="brief">Project brief</label>
<textarea id="brief" rows="7" placeholder="What feels off right now, and what should this shift change?"></textarea>
<div class="field-meta">
<span class="field-note">The clearer the mess, the better the structure.</span>
<span class="char-count">0 / 500</span>
</div>
</div>
<div class="form-footer">
<p class="form-status">Inquiry sent</p>
<button type="button" class="submit-btn">Send inquiry</button>
</div>
</form>
<section class="success-panel" style="margin-top: 18px;">
<p class="eyebrow">Inquiry sent</p>
<h2>Nice. This already feels more promising than a vague “hey”.</h2>
<p>We’ve got the project intake. Next step: review, fit check, and a sharper conversation.</p>
</section>
</section>
</section>
</main>
</body>
</html>Editorial layout and visual system
:root {
--bg: #f3f2ee;
--surface: #fbfaf7;
--surface-2: #e7e5df;
--ink: #101010;
--muted: #5e5c57;
--line: rgba(16,16,16,.14);
--accent: #0f6b64;
--accent-soft: #d8ebe8;
}
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.mod-body {
margin: 0;
background:
linear-gradient(to right, transparent 0, transparent calc(25% - .5px), rgba(16,16,16,.05) calc(25% - .5px), rgba(16,16,16,.05) 25%, transparent 25%, transparent calc(50% - .5px), rgba(16,16,16,.05) calc(50% - .5px), rgba(16,16,16,.05) 50%, transparent 50%, transparent calc(75% - .5px), rgba(16,16,16,.05) calc(75% - .5px), rgba(16,16,16,.05) 75%, transparent 75%),
var(--bg);
color: var(--ink);
font-family: "Inter", sans-serif;
}
.skip-link {
position: absolute;
left: 10px;
top: -40px;
background: var(--ink);
color: var(--bg);
padding: 10px 12px;
z-index: 1000;
}
.skip-link:focus { top: 10px; }
.mod-header,
.mod-hero,
.mod-grid-overview,
.mod-metrics,
.mod-list-section,
.mod-inner {
width: min(1240px, calc(100% - 36px));
margin-inline: auto;
}
.mod-header {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid var(--line);
}
.mod-brand {
display: flex;
gap: 14px;
align-items: center;
text-decoration: none;
color: var(--ink);
}
.mod-brand svg {
width: 42px;
height: 42px;
stroke: currentColor;
fill: none;
stroke-width: 6;
}
.mod-brand strong,
.mod-brand span {
display: block;
}
.mod-brand strong {
font-size: .95rem;
}
.mod-brand span {
font-size: .76rem;
text-transform: uppercase;
letter-spacing: .18em;
color: var(--muted);
}
.mod-nav {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.mod-nav a {
text-decoration: none;
color: var(--ink);
font-size: .92rem;
position: relative;
}
.mod-nav a.active::after,
.mod-nav a:hover::after {
content: "";
position: absolute;
left: 0;
bottom: -6px;
width: 100%;
height: 2px;
background: var(--accent);
}
.mod-hero {
display: grid;
grid-template-columns: .28fr .92fr .55fr;
gap: 18px;
padding: 28px 0 60px;
min-height: 70vh;
align-items: end;
}
.hero-cell {
border-top: 1px solid var(--line);
padding-top: 18px;
min-height: 220px;
}
.hero-cell.main h1 {
font-family: "Space Grotesk", sans-serif;
font-size: clamp(3rem, 7vw, 7rem);
line-height: .92;
max-width: 8ch;
margin: 0;
}Reveal and counter logic
const revealObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) entry.target.classList.add("visible");
});
}, { threshold: 0.15 });
document.querySelectorAll(".reveal").forEach((el) => revealObserver.observe(el));
const counters = document.querySelectorAll("[data-count]");
const countObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
const el = entry.target;
const target = Number(el.dataset.count);
let current = 0;
const step = Math.max(1, Math.ceil(target / 36));
const tick = () => {
current += step;
if (current >= target) {
el.textContent = target;
} else {
el.textContent = current;
requestAnimationFrame(tick);
}
};
tick();
countObserver.unobserve(el);
});
}, { threshold: 0.5 });
counters.forEach((el) => countObserver.observe(el));
document.querySelectorAll(".mod-row").forEach((row) => {
row.addEventListener("mouseenter", () => {
row.style.background = "rgba(15,107,100,.05)";
});
row.addEventListener("mouseleave", () => {
row.style.background = "transparent";
});
});