A playful arcade-style concept built around neon contrast, pixel energy, retro interactions, and louder brand personality. This version shows how Sheppard Creative Co. can build bold campaign-style experiences that feel alive, memorable, and nothing like a boring template.
This version showcases the attached arcade-style build with the real HTML, CSS, and JavaScript inside expandable code panels. The code windows stay scrollable so the page remains polished while still showing exactly how the experience is built.
Main arcade 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 — Retro 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=Press+Start+2P&family=Nunito:wght@500;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script defer src="script.js"></script>
</head>
<body>
<div class="stars"></div>
<header class="topbar">
<div class="brand">
<svg viewBox="0 0 120 120" aria-label="Sheappard Creative logo">
<circle cx="60" cy="60" r="40"></circle>
<path d="M60 20v80M20 60h80M36 36l48 48M84 36 36 84"></path>
</svg>
<div>
<strong>Sheappard Creative</strong>
<span>Retro Future Lab</span>
</div>
</div>
<a class="pill" href="#contact">INSERT COIN</a>
</header>
<main>
<section class="hero">
<p class="mini">PLAYER ONE: YOUR BRAND</p>
<h1>LEVEL UP YOUR INTERNET LOOK.</h1>
<p class="summary">
Websites, launch pages, visual identity systems, and campaign worlds built with personality instead of autopilot.
</p>
<div class="hero-buttons">
<a href="#modes" class="arcade-btn pink">START</a>
<a href="#contact" class="arcade-btn yellow">SELECT</a>
</div>
</section>
<section class="modes" id="modes">
<h2>CHOOSE A MODE</h2>
<div class="mode-grid">
<article class="mode-card cyan">
<span>01</span>
<h3>BRAND BOSS MODE</h3>
<p>Identity, messaging, and visual systems with more edge and more clarity.</p>
</article>
<article class="mode-card pink">
<span>02</span>
<h3>LAUNCH RUSH MODE</h3>
<p>Landing pages and campaign sites designed to create momentum fast.</p>
</article>
<article class="mode-card yellow">
<span>03</span>
<h3>SHOW-OFF MODE</h3>
<p>Portfolio and studio websites that make people assume you are bigger than you are.</p>
</article>
</div>
</section>
<section class="scoreboard">
<div class="score">
<small>PIXEL POWER</small>
<strong data-count="88">0</strong>
</div>
<div class="score">
<small>STYLE DAMAGE</small>
<strong data-count="99">0</strong>
</div>
<div class="score">
<small>CLIENT WOW</small>
<strong data-count="94">0</strong>
</div>
</section>
<section class="features">
<div class="speech">
<p>NO BORING TEMPLATES.</p>
</div>
<div class="feature-list">
<div>LOUDER VISUAL SYSTEMS</div>
<div>FUNNER MICRO-INTERACTIONS</div>
<div>SHARPER CREATIVE DIRECTION</div>
<div>MEMORABLE DIGITAL LAUNCHES</div>
</div>
</section>
<section class="contact" id="contact">
<h2>READY PLAYER SHEAPPARD?</h2>
<a href="mailto:sheppardcreativeco@gmail.com" class="arcade-btn cyan">EMAIL THE STUDIO</a>
</section>
</main>
</body>
</html>Typography, layout, colors, and responsive behavior
:root {
--bg: #140b2d;
--pink: #ff4fae;
--yellow: #ffe45e;
--cyan: #55f3ff;
--lime: #b9ff66;
--white: #fff8ef;
--panel: #24124d;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
background:
radial-gradient(circle at 20% 20%, rgba(85,243,255,.18), transparent 20%),
radial-gradient(circle at 80% 12%, rgba(255,79,174,.2), transparent 18%),
linear-gradient(180deg, #120824, #1b0f38 70%);
color: var(--white);
font-family: "Nunito", sans-serif;
overflow-x: hidden;
}
.stars {
position: fixed;
inset: 0;
background-image:
radial-gradient(circle, rgba(255,255,255,0.7) 1px, transparent 1px);
background-size: 34px 34px;
opacity: .22;
pointer-events: none;
animation: drift 16s linear infinite;
}
.topbar,
.hero,
.modes,
.scoreboard,
.features,
.contact {
width: min(1180px, calc(100% - 32px));
margin-inline: auto;
}
.topbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 0;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
}
.brand svg {
width: 48px;
height: 48px;
stroke: currentColor;
fill: none;
stroke-width: 7;
}
.brand strong,
.brand span {
display: block;
}
.brand span {
color: var(--cyan);
font-size: .8rem;
font-family: "Press Start 2P", cursive;
}
.pill {
color: var(--bg);
background: var(--lime);
text-decoration: none;
padding: 12px 16px;
border-radius: 999px;
font-family: "Press Start 2P", cursive;
font-size: .7rem;
}
.hero {
text-align: center;
padding: 90px 0 70px;
}
.mini,
.modes h2,
.contact h2,
.feature-list div {
font-family: "Press Start 2P", cursive;
}
.mini {
color: var(--yellow);
font-size: .75rem;
}
.hero h1 {
font-family: "Press Start 2P", cursive;
font-size: clamp(2rem, 6vw, 4.8rem);
line-height: 1.2;
max-width: 12ch;
margin: 22px auto;
}
.summary {
max-width: 44rem;
margin: 0 auto;
font-size: 1.1rem;
}
.hero-buttons {
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
margin-top: 28px;
}
.arcade-btn {
text-decoration: none;
color: var(--bg);
padding: 16px 18px;
display: inline-block;
font-family: "Press Start 2P", cursive;
font-size: .8rem;
box-shadow: 0 8px 0 rgba(0,0,0,.25);
transform: translateY(0);
transition: transform .12s ease, box-shadow .12s ease;
}
.arcade-btn:hover {
transform: translateY(4px);
box-shadow: 0 4px 0 rgba(0,0,0,.25);
}
.arcade-btn.pink { background: var(--pink); }
.arcade-btn.yellow { background: var(--yellow); }
.arcade-btn.cyan { background: var(--cyan); }
.modes {
padding: 40px 0 70px;
}
.modes h2 {
text-align: center;
font-size: 1.5rem;
margin-bottom: 24px;
}
.mode-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.mode-card {
padding: 20px;
border: 4px solid #fff;
box-shadow: 10px 10px 0 rgba(0,0,0,.25);
}
.mode-card span {
font-family: "Press Start 2P", cursive;
font-size: .72rem;
}
.mode-card h3 {
font-family: "Press Start 2P", cursive;
font-size: 1rem;
line-height: 1.4;
}
.mode-card.cyan { background: var(--cyan); color: #120824; }
.mode-card.pink { background: var(--pink); color: #120824; }
.mode-card.yellow { background: var(--yellow); color: #120824; }
.scoreboard {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
padding-bottom: 70px;
}
.score {
background: var(--panel);
border: 3px solid rgba(255,255,255,.4);
text-align: center;
padding: 24px;
}
.score small {
display: block;
color: var(--lime);
font-family: "Press Start 2P", cursive;
font-size: .66rem;
margin-bottom: 12px;
}
.score strong {
font-family: "Press Start 2P", cursive;
font-size: clamp(2rem, 5vw, 4rem);
}
.features {
display: grid;
grid-template-columns: .8fr 1fr;
gap: 20px;
align-items: start;
padding-bottom: 80px;
}
.speech {
background: var(--white);
color: var(--bg);
padding: 26px;
border-radius: 30px;
position: relative;
}
.speech::after {
content: "";
position: absolute;
left: 40px;
bottom: -18px;
width: 0;
height: 0;
border-left: 18px solid transparent;
border-right: 18px solid transparent;
border-top: 22px solid var(--white);
}
.speech p {
margin: 0;
font-family: "Press Start 2P", cursive;
line-height: 1.6;
}
.feature-list {
display: grid;
gap: 14px;
}
.feature-list div {
padding: 20px;
background: rgba(255,255,255,.08);
border: 2px dashed rgba(255,255,255,.5);
}
.contact {
text-align: center;
padding: 10px 0 100px;
}
.contact h2 {
font-size: clamp(1.4rem, 4vw, 3rem);
line-height: 1.5;
margin-bottom: 22px;
}
@keyframes drift {
from { transform: translateY(0); }
to { transform: translateY(34px); }
}
@media (max-width: 900px) {
.mode-grid,
.scoreboard,
.features {
grid-template-columns: 1fr;
}
.topbar {
flex-direction: column;
gap: 14px;
}
}Counter and hover interactions
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 n = 0;
const timer = setInterval(() => {
n += 1;
el.textContent = n;
if (n >= target) clearInterval(timer);
}, 18);
countObserver.unobserve(el);
});
}, { threshold: 0.5 });
counters.forEach((el) => countObserver.observe(el));
document.querySelectorAll(".mode-card").forEach((card) => {
card.addEventListener("mouseenter", () => {
card.style.transform = "rotate(-1deg) scale(1.02)";
});
card.addEventListener("mouseleave", () => {
card.style.transform = "rotate(0deg) scale(1)";
});
});