<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Studio Name | Production & Assets</title>
<style>
:root {
--vermillion: #FF4D00;
--black: #000000;
--white: #FFFFFF;
}
body {
background-color: var(--white);
color: var(--black);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
/* Vulf-style Header */
header {
background: var(--black);
color: var(--white);
padding: 4rem 2rem;
text-align: center;
border-bottom: 10px solid var(--vermillion);
}
h1 {
font-size: 5rem;
text-transform: uppercase;
letter-spacing: -2px;
margin: 0;
}
.subtitle {
font-family: monospace;
color: var(--vermillion);
font-size: 1.2rem;
}
/* Navigation */
nav {
position: sticky;
top: 0;
background: var(--white);
border-bottom: 2px solid var(--black);
padding: 1rem;
text-align: center;
z-index: 100;
}
nav a {
margin: 0 15px;
text-decoration: none;
color: var(--black);
font-weight: bold;
text-transform: uppercase;
}
nav a:hover {
color: var(--vermillion);
}
/* Section Styling */
section {
padding: 5rem 2rem;
max-width: 900px;
margin: 0 auto;
border-bottom: 1px solid #eee;
}
h2 {
font-size: 3rem;
text-transform: uppercase;
border-left: 8px solid var(--vermillion);
padding-left: 15px;
margin-bottom: 2rem;
}
/* Media Containers */
.media-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.box {
border: 3px solid var(--black);
padding: 10px;
transition: transform 0.2s;
}
.box:hover {
transform: translate(-5px, -5px);
box-shadow: 5px 5px 0px var(--vermillion);
}
video, img {
width: 100%;
display: block;
}
/* Patreon Button */
.patreon-btn {
display: inline-block;
background: var(--vermillion);
color: white;
padding: 20px 40px;
text-decoration: none;
font-size: 1.5rem;
font-weight: bold;
margin-top: 2rem;
border-radius: 0; /* Vulf stays boxy */
}
footer {
text-align: center;
padding: 3rem;
font-family: monospace;
background: #f4f4f4;
}
@media (max-width: 768px) {
h1 { font-size: 3rem; }
.media-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<header>
<h1>YOUR NAME</h1>
<p class="subtitle">PRODUCTION // MIXING // ASSETS</p>
</header>
<nav>
<a href="#work">WORK</a>
<a href="#services">SERVICES</a>
<a href="#packs">SOUND PACKS</a>
<a href="#contact">CONTACT</a>
</nav>
<section id="work">
<h2>LATEST WORK</h2>
<div class="media-grid">
<div class="box">
<iframe width="100%" height="250" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
</div>
<div class="box">
<img src="https://via.placeholder.com/400x250" alt="Studio Shot">
</div>
</div>
</section>
<section id="services">
<h2>SERVICES</h2>
<p><strong>01. PRODUCTION:</strong> From scratch to finish.</p>
<p><strong>02. MIXING:</strong> Analog-weighted digital mixing.</p>
<p><strong>03. MASTERING:</strong> Competitive loudness, dynamic integrity.</p>
</section>
<section id="packs" style="background-color: #fafafa;">
<h2>PATREON & ASSETS</h2>
<p>I release monthly drum breaks, MIDI kits, and sample packs exclusively through my Patreon community.</p>
<a href="#" class="patreon-btn">JOIN THE PATREON</a>
</section>
<section id="contact">
<h2>GET IN TOUCH</h2>
<p>Email: studio@example.com</p>
<p>IG: @YourHandle</p>
</section>
<footer>
<p>© 2026 YOUR NAME STUDIOS - ALL RIGHTS RESERVED</p>
</footer>
</body>
</html>