A refined multi-section concept built around elegance, spacing, typography, and quiet luxury. This version presents the included site files in a cleaner editorial direction to show range beyond bold launch-focused work.[file:98][file:99]
This version showcases the attached editorial-style build with the real HTML, CSS, and JS inside expandable code panels. The code windows stay scrollable so the page remains polished and easy to present.[file:97][file:98][file:99]
Main 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 — Editorial Studio</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=Cormorant+Garamond:wght@400;500;600&family=Work+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="header">
<div class="brand">
<svg viewBox="0 0 100 100" aria-label="Sheappard Creative logo" role="img">
<path d="M22 52c0-17 12-29 28-29 14 0 24 9 24 19 0 10-8 16-19 16H38" />
<path d="M38 38h22M38 66h22" />
</svg>
<div>
<strong>Sheappard Creative</strong>
<div>Independent creative company</div>
</div>
</div>
<nav>
<a href="#portfolio">Work</a>
<a href="#services">Services</a>
<a href="#enquire">Enquiries</a>
</nav>
</header>
<section class="hero">
<p class="eyebrow">Independent creative company</p>
<h1>Sheappard Creative develops identity-led websites for companies that want gravity, elegance, and a stronger point of view online.</h1>
<p class="lede">
A hospitality brand world built around restraint, texture, and a booking journey that felt quietly luxurious.
</p>
</section>
<section class="image-band">
<div class="frame frame-a"></div>
<div class="frame frame-b"></div>
<div class="frame frame-c"></div>
</section>
<section class="philosophy">
<div class="label">01 / Philosophy</div>
<div class="large">
<p>A strong website should not merely contain information. It should control tempo, direct feeling, and establish confidence before a visitor reads the second paragraph.</p>
<p>We build with that belief in mind: generous spacing, intelligent hierarchy, disciplined typography, and motion that feels more like atmosphere than effect.</p>
</div>
</section>
<section class="portfolio" id="portfolio">
<div class="portfolio-row">
<div class="meta">01</div>
<div class="title">Arden Vale</div>
<div class="desc">A hospitality brand world built around restraint, texture, and a booking journey that felt quietly luxurious.</div>
</div>
<div class="portfolio-row">
<div class="meta">02</div>
<div class="title">North March</div>
<div class="desc">An advisory firm website that traded generic trust signals for editorial clarity and stronger visual authority.</div>
</div>
<div class="portfolio-row">
<div class="meta">03</div>
<div class="title">Cinder House</div>
<div class="desc">A fashion-led digital presence using rhythm, whitespace, and image framing to make the brand feel established from the first scroll.</div>
</div>
</section>
<section class="services" id="services">
<div class="services-intro">
<p class="label">02 / Services</p>
<h2>Identity, websites, and digital presence designed with restraint and precision.</h2>
</div>
<div class="services-list">
<div><span>Brand direction</span><em>Positioning, visual tone, typography, and art direction.</em></div>
<div><span>Editorial websites</span><em>Elegant multi-section builds with clear pacing and refined hierarchy.</em></div>
<div><span>Launch pages</span><em>Focused website experiences for new offers, campaigns, and announcements.</em></div>
</div>
</section>
<section class="enquire" id="enquire">
<p class="label">Enquiries</p>
<h2>For companies ready to look more considered online.</h2>
<a href="mailto:hello@sheappardcreative.com">hello@sheappardcreative.com</a>
</section>
<script src="script.js"></script>
</body>
</html>Typography, layout, colors, and responsive behavior
:root {
--bg: #f7f2ea;
--paper: #efe7db;
--ink: #1d1b19;
--muted: #746d65;
--line: rgba(29,27,25,0.15);
--accent: #9b7d61;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
background: var(--bg);
color: var(--ink);
font-family: "Work Sans", sans-serif;
}
.header,
.hero,
.philosophy,
.portfolio,
.services,
.enquire {
width: min(1200px, calc(100% - 48px));
margin-inline: auto;
}
.header {
padding: 26px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.brand {
display: flex;
align-items: center;
gap: 14px;
font-size: .95rem;
}
.brand svg {
width: 34px;
height: 34px;
stroke: currentColor;
fill: none;
stroke-width: 6;
}
nav {
display: flex;
gap: 28px;
}
nav a {
color: var(--ink);
text-decoration: none;
font-size: .92rem;
}
.hero {
min-height: 70vh;
display: grid;
align-content: center;
padding: 70px 0 90px;
}
.eyebrow,
.label {
text-transform: uppercase;
letter-spacing: .22em;
color: var(--accent);
font-size: .72rem;
}
.hero h1,
.services-intro h2,
.enquire h2 {
font-family: "Cormorant Garamond", serif;
font-weight: 500;
line-height: .92;
margin: 14px 0 16px;
}
.hero h1 {
font-size: clamp(4rem, 9vw, 8.8rem);
max-width: 9ch;
}
.lede {
max-width: 38rem;
color: var(--muted);
font-size: 1.05rem;
}
.image-band {
width: min(1360px, calc(100% - 48px));
margin: 0 auto 90px;
display: grid;
grid-template-columns: 1.2fr .8fr .8fr;
gap: 20px;
}
.frame {
min-height: 420px;
background: var(--paper);
position: relative;
overflow: hidden;
}
.frame::before {
content: "";
position: absolute;
inset: 20px;
border: 1px solid var(--line);
}
.frame-a {
background:
linear-gradient(180deg, rgba(255,255,255,0.1), rgba(0,0,0,0.04)),
url("https://picsum.photos/seed/sheappard-editorial-1/900/1200") center/cover;
}
.frame-b {
background:
linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0.08)),
url("https://picsum.photos/seed/sheappard-editorial-2/700/1000") center/cover;
}
.frame-c {
background:
linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0.08)),
url("https://picsum.photos/seed/sheappard-editorial-3/700/1000") center/cover;
}
.philosophy {
display: grid;
grid-template-columns: .4fr 1fr;
gap: 40px;
padding: 40px 0 110px;
}
.philosophy p {
margin-top: 0;
}
.philosophy .large p {
font-family: "Cormorant Garamond", serif;
font-size: clamp(1.8rem, 3vw, 3rem);
line-height: 1.05;
max-width: 20ch;
margin-bottom: 24px;
}
.portfolio {
border-top: 1px solid var(--line);
padding-top: 30px;
}
.portfolio-row {
display: grid;
grid-template-columns: .6fr .8fr 1fr;
gap: 30px;
padding: 28px 0;
border-bottom: 1px solid var(--line);
}
.meta,
.desc {
color: var(--muted);
}
.title {
font-family: "Cormorant Garamond", serif;
font-size: clamp(2rem, 4vw, 4rem);
line-height: .95;
}
.services {
display: grid;
grid-template-columns: .6fr 1fr;
gap: 40px;
padding: 110px 0;
}
.services-intro h2 {
font-size: clamp(2.5rem, 5vw, 5rem);
}
.services-list {
border-top: 1px solid var(--line);
}
.services-list div {
display: flex;
justify-content: space-between;
gap: 20px;
border-bottom: 1px solid var(--line);
padding: 20px 0;
}
.services-list span {
font-family: "Cormorant Garamond", serif;
font-size: 2rem;
}
.services-list em {
color: var(--muted);
font-style: normal;
max-width: 30ch;
text-align: right;
}
.enquire {
padding: 20px 0 100px;
text-align: center;
}
.enquire h2 {
font-size: clamp(2.4rem, 5vw, 5rem);
max-width: 11ch;
margin-inline: auto;
}
.enquire a {
display: inline-block;
margin-top: 18px;
color: var(--ink);
text-decoration: none;
font-size: 1.1rem;
border-bottom: 1px solid currentColor;
padding-bottom: 4px;
}
@media (max-width: 900px) {
.header,
.philosophy,
.portfolio-row,
.services,
.services-list div,
.image-band {
grid-template-columns: 1fr;
display: grid;
}
nav { display: none; }
.services-list em { text-align: left; }
}Frame interaction and reveal animation
const frames = document.querySelectorAll(".frame");
frames.forEach((frame) => {
frame.addEventListener("mousemove", (e) => {
const rect = frame.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width;
const y = (e.clientY - rect.top) / rect.height;
frame.style.backgroundPosition = `${50 + (x - 0.5) * 6}% ${50 + (y - 0.5) * 6}%`;
});
frame.addEventListener("mouseleave", () => {
frame.style.backgroundPosition = "center";
});
});
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.animate(
[
{ opacity: 0, transform: "translateY(32px)" },
{ opacity: 1, transform: "translateY(0)" }
],
{ duration: 900, easing: "cubic-bezier(.16,1,.3,1)", fill: "forwards" }
);
observer.unobserve(entry.target);
}
});
}, { threshold: 0.15 });
document.querySelectorAll(".portfolio-row, .services-list div, .philosophy .large p").forEach((el) => {
el.style.opacity = 0;
observer.observe(el);
});