← back to Hormuzy
mockups/063-skateboard-deck.html
71 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>skateboard-graphic — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bungee+Outline&family=Inter:wght@400;600&display=swap">
<style>
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; background: #1a0033; color: #fff; height: 100%; width: 100%; }
body { display: flex; flex-direction: column; }
header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; background: #0d0019; border-bottom: 2px solid #ff2a78; }
header h1 { font-family: 'Bungee Outline', cursive; font-size: 1.8rem; color: #ff2a78; }
.project-picker { padding: 0.5rem 1rem; background: #7fffd4; border: 2px solid #ffe066; border-radius: 5px; }
.status-pill { padding: 0.4rem 1rem; background: #1a0033; border: 2px solid #ff2a78; border-radius: 20px; font-size: 0.9rem; }
.main { display: flex; flex: 1; overflow: hidden; }
.chat-pane { width: 40%; display: flex; flex-direction: column; padding: 2rem; background: #0d0019; border-right: 2px solid #ff2a78; }
.chat-log { flex: 1; overflow-y: auto; margin-bottom: 1rem; }
.chat-message { margin: 1rem 0; }
.chat-message.user { text-align: right; }
.chat-message.agent { text-align: left; }
.chat-input { display: flex; }
.chat-input input { flex: 1; padding: 0.75rem; font-size: 1rem; border: none; border-radius: 5px; }
.chat-input button { padding: 0.75rem 1.5rem; background: #ff2a78; border: none; color: #fff; font-weight: bold; border-radius: 5px; margin-left: 0.5rem; }
.panels { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; padding: 2rem; }
.panel { background: #1a0033; border: 2px solid #ff2a78; border-radius: 10px; padding: 1.5rem; }
.panel h2 { font-family: 'Bungee Outline', cursive; font-size: 1.4rem; color: #ff2a78; margin-bottom: 1rem; }
.panel p { font-size: 1rem; color: #7fffd4; }
</style>
</head>
<body>
<header>
<h1>FOUR HORSEMEN</h1>
<div>
<div class="project-picker">Projects ▼<br><small>Skate Park Overhaul • Thrasher Logo Revamp • Street Art Stampede</small></div>
<div class="status-pill">idle</div>
</div>
</header>
<div class="main">
<div class="chat-pane">
<div class="chat-log">
<div class="chat-message user">/run-topic "street art"</div>
<div class="chat-message agent">Grindin' on that mural, boss. Let's drop some spray paint and make it pop.</div>
<div class="chat-message user">/stampede "neon gradients"</div>
<div class="chat-message agent">Riding the glow, chief. We're hitin' the pavement with a rainbow of chaos.</div>
</div>
<div class="chat-input">
<input type="text" placeholder="Type a command..." />
<button>SEND</button>
</div>
</div>
<div class="panels">
<div class="panel">
<h2>Preview</h2>
<p>Skateboard decks with graffiti splatter. Hit the ramp, catch some air, and leave your mark. No rules, just rails and rebellion.</p>
</div>
<div class="panel">
<h2>Paper</h2>
<p>Hand-drawn layouts of skatepark obstacles. Sharpie lines, X-Acto precision, and a touch of chaos. Burn the blueprint, ride the sketch.</p>
</div>
<div class="panel">
<h2>Figma</h2>
<p>Digital mockups of skateboard graphics. Layers, vectors, and a whole lot of neon. Make it shine, make it scream.</p>
</div>
<div class="panel">
<h2>Canva</h2>
<p>Template-based designs for stickers and t-shirts. Bold fonts, bright colors, and a dash of rebellion. Print it, wear it, break it.</p>
</div>
</div>
</div>
</body>
</html>