A dramatic one-page concept for premium launches, bold service brands, and luxury-feeling digital storytelling. This page is built to showcase the live website and present the HTML, CSS, and JS in a polished, screenshot-ready layout.
Each panel drops down into a colorful code window with the real demo files inside. The code areas are scrollable, so they stay clean for screenshots and presentations.
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 — Loud Launch Systems</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=Archivo+Black&family=IBM+Plex+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="ticker">
<span>### Launch systems that hit immediately. — Homepages, pitch sites, landing pages, campaign pages, event drops. ###</span>
</div>
<header class="header">
<div class="logo-box">
<svg viewBox="0 0 100 100" aria-label="Sheappard Creative logo" role="img">
<path d="M20 55c0-20 14-34 32-34 16 0 28 10 28 22 0 11-10 18-22 18H38" />
<path d="M38 39h26M38 71h26" />
</svg>
<div>
<strong>Sheappard Creative</strong>
<p>Loud colours, strong hierarchy, launch pages, and internet presence with pressure.</p>
</div>
</div>
<nav>
<a href="#work">Work</a>
<a href="#offer">Offer</a>
<a href="#contact">Contact</a>
</nav>
</header>
<section class="hero">
<p class="tag">CREATIVE COMPANY / WEB / BRAND / INTERNET PRESENCE</p>
<h1>We make <span>loud</span> websites for people done looking safe.</h1>
<p class="intro">
Sheappard Creative makes loud colours, striking launch pages, and hard-to-ignore
digital experiences for brands that are done looking beige.
</p>
<div class="hero-actions">
<a href="#contact" class="btn black">Start A Project</a>
<a href="#work" class="btn outline">See The Work</a>
</div>
<div class="slashes">
<div>WEB</div>
<div>BRAND</div>
<div>LOUD</div>
<div>FAST</div>
</div>
</section>
<section class="manifesto">
<div class="manifesto-left">
<h2>You are buying attention.</h2>
</div>
<div class="manifesto-right">
<p>You are buying perception.</p>
<p>You are buying a sharper version of your company.</p>
<p>Homepages, pitch sites, landing pages, campaign pages, event drops.</p>
<p>Brand systems, voice, typography, art direction, and visual pressure.</p>
<p>Sharper concepts, stronger hierarchy, and bolder execution.</p>
</div>
</section>
<section class="work" id="work">
<article class="case red">
<span>01</span>
<h3>Event Drop</h3>
<p>A launch page built to punch hard and sell a moment immediately.</p>
</article>
<article class="case yellow">
<span>02</span>
<h3>Campaign Site</h3>
<p>Bold hierarchy, fast messaging, and a look that feels impossible to scroll past.</p>
</article>
<article class="case white">
<span>03</span>
<h3>Pitch Platform</h3>
<p>A site that makes a company feel sharper, bigger, and more ready than it did yesterday.</p>
</article>
</section>
<section class="offer" id="offer">
<h2>What we build.</h2>
<div class="offer-grid">
<div>Launch Pages</div>
<div>Homepages</div>
<div>Pitch Sites</div>
<div>Brand Systems</div>
<div>Campaign Pages</div>
<div>Creative Direction</div>
</div>
</section>
<section class="contact" id="contact">
<h2>Need a website that hits harder?</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: #f6f1e8;
--text: #0a0a0a;
--red: #ff4d36;
--yellow: #ffd84d;
--line: #0a0a0a;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
background: var(--bg);
color: var(--text);
font-family: "IBM Plex Mono", monospace;
}
a { color: inherit; }
.ticker {
overflow: hidden;
white-space: nowrap;
border-bottom: 4px solid var(--line);
font-size: .9rem;
padding: 10px 0;
}
.ticker span {
display: inline-block;
padding-left: 100%;
animation: ticker 16s linear infinite;
font-weight: 700;
}
.header,
.hero,
.manifesto,
.work,
.offer,
.contact {
width: min(1280px, calc(100% - 32px));
margin-inline: auto;
}
.header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 22px 0;
border-bottom: 4px solid var(--line);
}
.logo-box {
display: flex;
gap: 14px;
align-items: flex-start;
}
.logo-box svg {
width: 60px;
height: 60px;
stroke: currentColor;
fill: none;
stroke-width: 8;
}
.logo-box strong {
font-family: "Archivo Black", sans-serif;
display: block;
font-size: 1.1rem;
}
.logo-box p {
margin: 4px 0 0;
max-width: 30ch;
}
nav {
display: flex;
gap: 18px;
flex-wrap: wrap;
}
nav a {
font-weight: 700;
text-decoration: none;
border: 3px solid var(--line);
padding: 10px 14px;
}
.hero {
padding: 40px 0 24px;
}
.tag {
font-size: .84rem;
font-weight: 700;
}
.hero h1 {
font-family: "Archivo Black", sans-serif;
font-size: clamp(3.2rem, 11vw, 9rem);
line-height: .9;
margin: 18px 0;
max-width: 8ch;
}
.hero h1 span {
background: var(--yellow);
display: inline-block;
padding: 0 .18em;
}
.intro {
font-size: 1.1rem;
max-width: 48rem;
border-left: 6px solid var(--line);
padding-left: 18px;
}
.hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 26px;
}
.btn {
text-decoration: none;
display: inline-block;
padding: 16px 20px;
border: 3px solid var(--line);
font-weight: 700;
}
.btn.black {
background: var(--text);
color: var(--bg);
}
.btn.outline {
background: transparent;
}
.slashes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 4px solid var(--line);
border-bottom: 4px solid var(--line);
margin-top: 30px;
}
.slashes div {
padding: 34px 10px;
font-family: "Archivo Black", sans-serif;
font-size: clamp(2rem, 8vw, 5rem);
text-align: center;
border-right: 4px solid var(--line);
}
.slashes div:last-child { border-right: 0; }
.manifesto {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
padding: 40px 0;
border-bottom: 4px solid var(--line);
}
.manifesto h2,
.offer h2,
.contact h2 {
font-family: "Archivo Black", sans-serif;
font-size: clamp(2rem, 6vw, 5rem);
line-height: .95;
margin: 0;
}
.manifesto-right p {
font-size: clamp(1.1rem, 2vw, 1.7rem);
border-bottom: 3px solid var(--line);
padding-bottom: 12px;
margin: 0 0 12px;
}
.work {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.case {
min-height: 340px;
padding: 24px;
border-right: 4px solid var(--line);
border-bottom: 4px solid var(--line);
}
.case:last-child { border-right: 0; }
.case span {
font-family: "Archivo Black", sans-serif;
font-size: 4rem;
display: block;
}
.case h3 {
font-family: "Archivo Black", sans-serif;
font-size: 2rem;
line-height: .95;
margin: 10px 0;
}
.case.red { background: var(--red); }
.case.yellow { background: var(--yellow); }
.case.white { background: #ffffff; }
.offer {
padding: 40px 0;
}
.offer-grid {
margin-top: 20px;
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 4px solid var(--line);
}
.offer-grid div {
padding: 26px 18px;
border-right: 4px solid var(--line);
border-bottom: 4px solid var(--line);
font-family: "Archivo Black", sans-serif;
font-size: 1.3rem;
}
.offer-grid div:nth-child(3n) { border-right: 0; }
.contact {
padding: 50px 0 70px;
}
.contact a {
font-family: "Archivo Black", sans-serif;
font-size: clamp(1.4rem, 4vw, 3rem);
text-decoration: none;
display: inline-block;
margin-top: 16px;
background: var(--red);
padding: 8px 12px;
}
@keyframes ticker {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
@media (max-width: 900px) {
.header,
.manifesto,
.work,
.offer-grid,
.slashes {
grid-template-columns: 1fr;
display: grid;
}
.header { display: block; }
nav { margin-top: 18px; }
.case,
.slashes div,
.offer-grid div {
border-right: 0;
}
}Hover cursor effect and ticker scroll movement
document.querySelectorAll(".btn, nav a, .case").forEach((el) => {
el.addEventListener("mouseenter", () => {
document.body.style.cursor = "crosshair";
});
el.addEventListener("mouseleave", () => {
document.body.style.cursor = "default";
});
});
window.addEventListener("scroll", () => {
const scrollY = window.scrollY;
document.querySelector(".ticker span").style.transform = `translateX(-${scrollY * 0.4}px)`;
});