Marquee Headline
A single phrase scrolls horizontally on a loop with a counter-direction line beneath. Hot tangerine on chocolate brown — the streetwear / drop-culture treatment.
The code
<section class="hs-mar" aria-label="Hero">
<div class="hs-mar-track hs-mar-r" aria-hidden="true">
<span
>EVERYTHING SELLS OUT · EVERYTHING SELLS OUT · EVERYTHING SELLS OUT · EVERYTHING SELLS OUT ·
</span>
<span
>EVERYTHING SELLS OUT · EVERYTHING SELLS OUT · EVERYTHING SELLS OUT · EVERYTHING SELLS OUT ·
</span>
</div>
<div class="hs-mar-inner">
<h2>Drop 04. <em>Tuesday 11am EST.</em></h2>
<p>72 pieces. No restock. No back-orders. No DM begging.</p>
<a class="hs-mar-cta" href="#join">Set the alarm</a>
</div>
<div class="hs-mar-track hs-mar-l" aria-hidden="true">
<span>NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · </span>
<span>NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · </span>
</div>
</section> <section class="hs-mar" aria-label="Hero">
<div class="hs-mar-track hs-mar-r" aria-hidden="true">
<span
>EVERYTHING SELLS OUT · EVERYTHING SELLS OUT · EVERYTHING SELLS OUT · EVERYTHING SELLS OUT ·
</span>
<span
>EVERYTHING SELLS OUT · EVERYTHING SELLS OUT · EVERYTHING SELLS OUT · EVERYTHING SELLS OUT ·
</span>
</div>
<div class="hs-mar-inner">
<h2>Drop 04. <em>Tuesday 11am EST.</em></h2>
<p>72 pieces. No restock. No back-orders. No DM begging.</p>
<a class="hs-mar-cta" href="#join">Set the alarm</a>
</div>
<div class="hs-mar-track hs-mar-l" aria-hidden="true">
<span>NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · </span>
<span>NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · </span>
</div>
</section>.hs-mar {
display: flex; flex-direction: column; justify-content: space-between;
width: 100%; min-height: 480px;
padding: 0;
background: #2a1410;
font-family: 'Inter', system-ui, sans-serif;
color: #ffe4d6;
box-sizing: border-box;
overflow: hidden;
contain: layout paint;
}
.hs-mar-track {
display: flex; gap: 32px;
white-space: nowrap; overflow: hidden;
padding: 18px 0;
font-family: 'Inter', sans-serif;
font-size: clamp(32px, 5vw, 52px); font-weight: 900;
font-style: italic; letter-spacing: -0.01em;
background: #f04e23; color: #2a1410;
border-block: 4px solid #2a1410;
}
.hs-mar-track span { animation: hs-mar-roll 22s linear infinite; flex-shrink: 0; }
.hs-mar-r span { animation-direction: normal; }
.hs-mar-l { background: #2a1410; color: #f04e23; border-color: #f04e23; }
.hs-mar-l span { animation-direction: reverse; }
@keyframes hs-mar-roll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.hs-mar-inner {
flex: 1;
display: grid; place-items: center;
padding: clamp(24px, 4vw, 56px);
text-align: center;
}
.hs-mar h2 {
margin: 0 0 14px;
font-size: clamp(32px, 5vw, 52px);
font-weight: 900; letter-spacing: -0.025em; line-height: 1.05;
color: #ffe4d6;
}
.hs-mar h2 em { color: #f5b148; font-style: italic; }
.hs-mar p { margin: 0 auto 22px; font-size: 16px; color: #c8a899; max-width: 460px; line-height: 1.55; }
.hs-mar-cta {
display: inline-block; padding: 13px 28px;
background: #f5b148; color: #2a1410;
border-radius: 0; text-decoration: none;
font-weight: 800; font-size: 14.5px; letter-spacing: 0.04em;
transition: background 0.15s;
}
.hs-mar-cta:hover { background: #ffe4d6; }
@media (prefers-reduced-motion: reduce) {
.hs-mar-track span { animation: none; }
.hs-mar-cta { transition: none; }
} .hs-mar {
display: flex; flex-direction: column; justify-content: space-between;
width: 100%; min-height: 480px;
padding: 0;
background: #2a1410;
font-family: 'Inter', system-ui, sans-serif;
color: #ffe4d6;
box-sizing: border-box;
overflow: hidden;
contain: layout paint;
}
.hs-mar-track {
display: flex; gap: 32px;
white-space: nowrap; overflow: hidden;
padding: 18px 0;
font-family: 'Inter', sans-serif;
font-size: clamp(32px, 5vw, 52px); font-weight: 900;
font-style: italic; letter-spacing: -0.01em;
background: #f04e23; color: #2a1410;
border-block: 4px solid #2a1410;
}
.hs-mar-track span { animation: hs-mar-roll 22s linear infinite; flex-shrink: 0; }
.hs-mar-r span { animation-direction: normal; }
.hs-mar-l { background: #2a1410; color: #f04e23; border-color: #f04e23; }
.hs-mar-l span { animation-direction: reverse; }
@keyframes hs-mar-roll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.hs-mar-inner {
flex: 1;
display: grid; place-items: center;
padding: clamp(24px, 4vw, 56px);
text-align: center;
}
.hs-mar h2 {
margin: 0 0 14px;
font-size: clamp(32px, 5vw, 52px);
font-weight: 900; letter-spacing: -0.025em; line-height: 1.05;
color: #ffe4d6;
}
.hs-mar h2 em { color: #f5b148; font-style: italic; }
.hs-mar p { margin: 0 auto 22px; font-size: 16px; color: #c8a899; max-width: 460px; line-height: 1.55; }
.hs-mar-cta {
display: inline-block; padding: 13px 28px;
background: #f5b148; color: #2a1410;
border-radius: 0; text-decoration: none;
font-weight: 800; font-size: 14.5px; letter-spacing: 0.04em;
transition: background 0.15s;
}
.hs-mar-cta:hover { background: #ffe4d6; }
@media (prefers-reduced-motion: reduce) {
.hs-mar-track span { animation: none; }
.hs-mar-cta { transition: none; }
}