Open demo

CSS code

HTML 
<footer class="fm">
  <div class="fm-band">
    <input class="fm-toggle fm-sr" type="checkbox" id="fm-pause">
    <label class="fm-pause" for="fm-pause"><span class="fm-sr">Pause the scrolling band</span>
      <svg class="fm-stop" viewBox="0 0 12 12" aria-hidden="true" focusable="false"><rect x="2" y="1" width="3" height="10" rx="1"/><rect x="7" y="1" width="3" height="10" rx="1"/></svg>
      <svg class="fm-play" viewBox="0 0 12 12" aria-hidden="true" focusable="false"><path d="M3 1.5v9l7.5-4.5z"/></svg></label>
    <div class="fm-track" aria-hidden="true">
      <span>Ship weekly <i>◆</i> Review faster <i>◆</i> Fewer meetings <i>◆</i> One board <i>◆</i> Ship weekly <i>◆</i> Review faster <i>◆</i> Fewer meetings <i>◆</i> One board <i>◆</i></span>
      <span>Ship weekly <i>◆</i> Review faster <i>◆</i> Fewer meetings <i>◆</i> One board <i>◆</i> Ship weekly <i>◆</i> Review faster <i>◆</i> Fewer meetings <i>◆</i> One board <i>◆</i></span>
    </div>
  </div>
  <div class="fm-body">
    <div class="fm-in">
      <div class="fm-brand"><b>Northwind</b><p>Boards, reviews and release notes for teams that ship every week.</p></div>
      <nav class="fm-links" aria-label="Footer">
        <div><h2>Product</h2><ul><li><a href="#">Overview</a></li><li><a href="#">Pricing</a></li><li><a href="#">Changelog</a></li></ul></div>
        <div><h2>Company</h2><ul><li><a href="#">About</a></li><li><a href="#">Careers</a></li><li><a href="#">Contact</a></li></ul></div>
        <div><h2>Resources</h2><ul><li><a href="#">Docs</a></li><li><a href="#">Status</a></li><li><a href="#">Support</a></li></ul></div>
      </nav>
    </div>
    <div class="fm-base">
      <p>© Northwind Ltd.</p>
      <nav aria-label="Legal"><ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul></nav>
    </div>
  </div>
</footer>
CSS 
/* Footer topped by a scrolling band. The band's content is written twice and the track moves by exactly half
   its width, so the loop is seamless. A pause toggle (a real checkbox) and hovering both stop it; under
   reduced motion the band is static and the toggle is removed. */
.fm{background:#111827;color:#9ca3af}
.fm,.fm *{box-sizing:border-box}
:where(.fm) a{color:inherit;text-decoration:none}
:where(.fm) ul{list-style:none;margin:0;padding:0}
:where(.fm) :is(p,h2){margin:0}
.fm a:focus-visible{outline:2px solid #818cf8;outline-offset:2px}
.fm-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.fm-band{position:relative;color:#fff;overflow:hidden;padding:14px 0;border-top:1px solid #1f2937;border-bottom:1px solid #1f2937}
.fm-track{display:flex;width:max-content;animation:fm-slide 26s linear infinite}
.fm-track span{display:flex;align-items:center;gap:34px;padding-right:34px;font-size:.92rem;font-weight:800;
  letter-spacing:-.01em;white-space:nowrap}
.fm-track i{font-style:normal;color:#6366f1}
@keyframes fm-slide{to{transform:translateX(-50%)}}
.fm-band:hover .fm-track,.fm-toggle:checked ~ .fm-track{animation-play-state:paused}
.fm-pause{position:absolute;z-index:1;right:12px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:#111827;border:1px solid #6b7280;color:#fff;cursor:pointer}
.fm-pause svg{width:12px;height:12px;fill:currentColor}
.fm-pause:hover{border-color:#9ca3af}
.fm-toggle:focus-visible + .fm-pause{outline:2px solid #818cf8;outline-offset:2px}
.fm-play,.fm-toggle:checked + .fm-pause .fm-stop{display:none}
.fm-toggle:checked + .fm-pause .fm-play{display:block}

.fm-body{padding:38px 34px 22px}
.fm-in{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1.3fr 3fr;gap:30px}
.fm-brand b{display:block;color:#fff;font-size:1.02rem;font-weight:800;letter-spacing:-.02em}
.fm-brand p{font-size:.85rem;line-height:1.65;margin-top:8px;max-width:30ch}
.fm-links{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.fm h2{color:#fff;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:11px}
.fm-links ul{display:flex;flex-direction:column;gap:8px;font-size:.85rem}
.fm-body a:hover{color:#fff}
.fm-base{max-width:1040px;margin:30px auto 0;padding-top:18px;border-top:1px solid #1f2937;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.8rem}
.fm-base ul{display:flex;gap:16px}
@media (max-width:780px){.fm-in{grid-template-columns:1fr}.fm-links{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fm-body{padding:36px 20px 22px}}
@media (prefers-reduced-motion:reduce){.fm-track{animation:none}.fm-toggle,.fm-pause{display:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<footer class="fm">
  <div class="fm-band">
    <input class="btn-check" type="checkbox" id="fm-pause" autocomplete="off">
    <label class="btn fm-pause" for="fm-pause"><span class="visually-hidden">Pause the scrolling band</span>
      <svg class="fm-stop" viewBox="0 0 12 12" aria-hidden="true" focusable="false"><rect x="2" y="1" width="3" height="10" rx="1"/><rect x="7" y="1" width="3" height="10" rx="1"/></svg>
      <svg class="fm-play" viewBox="0 0 12 12" aria-hidden="true" focusable="false"><path d="M3 1.5v9l7.5-4.5z"/></svg></label>
    <div class="fm-track" aria-hidden="true">
      <span>Ship weekly <i>◆</i> Review faster <i>◆</i> Fewer meetings <i>◆</i> One board <i>◆</i> Ship weekly <i>◆</i> Review faster <i>◆</i> Fewer meetings <i>◆</i> One board <i>◆</i></span>
      <span>Ship weekly <i>◆</i> Review faster <i>◆</i> Fewer meetings <i>◆</i> One board <i>◆</i> Ship weekly <i>◆</i> Review faster <i>◆</i> Fewer meetings <i>◆</i> One board <i>◆</i></span>
    </div>
  </div>
  <div class="fm-body">
    <div class="fm-in">
      <div class="row g-4">
        <div class="fm-brand col-md-4"><b>Northwind</b><p class="mt-2 mb-0">Boards, reviews and release notes for teams that ship every week.</p></div>
        <nav class="col-md-8" aria-label="Footer">
          <div class="row row-cols-2 row-cols-md-3 g-4">
            <div class="col"><h2>Product</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Overview</a></li><li class="nav-item"><a class="nav-link" href="#">Pricing</a></li><li class="nav-item"><a class="nav-link" href="#">Changelog</a></li></ul></div>
            <div class="col"><h2>Company</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">About</a></li><li class="nav-item"><a class="nav-link" href="#">Careers</a></li><li class="nav-item"><a class="nav-link" href="#">Contact</a></li></ul></div>
            <div class="col"><h2>Resources</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Docs</a></li><li class="nav-item"><a class="nav-link" href="#">Status</a></li><li class="nav-item"><a class="nav-link" href="#">Support</a></li></ul></div>
          </div>
        </nav>
      </div>
      <div class="fm-base d-flex flex-wrap justify-content-between gap-3 mt-4 pt-3">
        <p class="mb-0">© Northwind Ltd.</p>
        <nav aria-label="Legal"><ul class="nav"><li class="nav-item"><a class="nav-link" href="#">Privacy</a></li><li class="nav-item"><a class="nav-link" href="#">Terms</a></li></ul></nav>
      </div>
    </div>
  </div>
</footer>
CSS 
/* The pause toggle is Bootstrap's .btn-check + label.btn; checking it (or hovering the band) pauses the
   track. The links use the grid and .nav.flex-column. Under reduced motion the band is static and the
   toggle is removed. */
.fm{background:#111827;color:#9ca3af}
.fm a{text-decoration:none}
.fm a:focus-visible{outline:2px solid #818cf8;outline-offset:2px;box-shadow:none}
.fm-band{position:relative;color:#fff;overflow:hidden;padding:14px 0;border-top:1px solid #1f2937;border-bottom:1px solid #1f2937}
.fm-track{display:flex;width:max-content;animation:fm-slide 26s linear infinite}
.fm-track span{display:flex;align-items:center;gap:34px;padding-right:34px;font-size:.92rem;font-weight:800;
  letter-spacing:-.01em;white-space:nowrap}
.fm-track i{font-style:normal;color:#6366f1}
@keyframes fm-slide{to{transform:translateX(-50%)}}
.fm-band:hover .fm-track,.btn-check:checked ~ .fm-track{animation-play-state:paused}
.fm-pause{--bs-btn-padding-x:0;--bs-btn-padding-y:0;--bs-btn-bg:#111827;--bs-btn-color:#fff;--bs-btn-border-color:#6b7280;
  --bs-btn-hover-bg:#111827;--bs-btn-hover-color:#fff;--bs-btn-hover-border-color:#9ca3af;--bs-btn-active-bg:#111827;
  --bs-btn-active-color:#fff;--bs-btn-active-border-color:#9ca3af;--bs-btn-border-radius:50%;
  position:absolute;z-index:1;right:12px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:grid;place-items:center}
.fm-pause svg{width:12px;height:12px;fill:currentColor}
.btn-check:focus-visible + .fm-pause{outline:2px solid #818cf8;outline-offset:2px;box-shadow:none}
.fm-play,.btn-check:checked + .fm-pause .fm-stop{display:none}
.btn-check:checked + .fm-pause .fm-play{display:block}
.fm-body{padding:38px 34px 22px}
.fm-in{max-width:1040px;margin:0 auto}
.fm-brand b{display:block;color:#fff;font-size:1.02rem;font-weight:800;letter-spacing:-.02em}
.fm-brand p{font-size:.85rem;line-height:1.65;max-width:30ch}
.fm h2{color:#fff;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:11px;line-height:normal}
.fm .nav{--bs-nav-link-color:#9ca3af;--bs-nav-link-hover-color:#fff;--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0;
  --bs-nav-link-font-size:.85rem;gap:8px}
.fm-base{border-top:1px solid #1f2937;font-size:.8rem}
.fm-base .nav{--bs-nav-link-font-size:.8rem;gap:16px}
@media (max-width:575.98px){.fm-body{padding:36px 20px 22px}}
@media (prefers-reduced-motion:reduce){.fm-track{animation:none}.fm-band .btn-check,.fm-pause{display:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<footer class="bg-[#111827] text-[#9ca3af]">
  <div class="group/band relative overflow-hidden border-y border-[#1f2937] py-3.5 text-white">
    <input class="peer sr-only motion-reduce:hidden" type="checkbox" id="fm-pause">
    <label class="absolute top-1/2 right-3 z-10 grid size-[30px] -translate-y-1/2 cursor-pointer place-items-center rounded-full border border-[#6b7280] bg-[#111827] text-white peer-checked:[&>.i-play]:block peer-checked:[&>.i-stop]:hidden peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[#818cf8] hover:border-[#9ca3af] motion-reduce:hidden" for="fm-pause"><span class="sr-only">Pause the scrolling band</span>
      <svg class="i-stop size-3 fill-current" viewBox="0 0 12 12" aria-hidden="true" focusable="false"><rect x="2" y="1" width="3" height="10" rx="1"/><rect x="7" y="1" width="3" height="10" rx="1"/></svg>
      <svg class="i-play hidden size-3 fill-current" viewBox="0 0 12 12" aria-hidden="true" focusable="false"><path d="M3 1.5v9l7.5-4.5z"/></svg></label>
    <div class="flex w-max animate-marquee group-hover/band:[animation-play-state:paused] peer-checked:[animation-play-state:paused] motion-reduce:animate-none [&>span]:flex [&>span]:items-center [&>span]:gap-[34px] [&>span]:pr-[34px] [&>span]:text-[.92rem] [&>span]:font-extrabold [&>span]:tracking-[-.01em] [&>span]:whitespace-nowrap [&_i]:text-[#6366f1] [&_i]:not-italic" aria-hidden="true">
      <span>Ship weekly <i>◆</i> Review faster <i>◆</i> Fewer meetings <i>◆</i> One board <i>◆</i> Ship weekly <i>◆</i> Review faster <i>◆</i> Fewer meetings <i>◆</i> One board <i>◆</i></span>
      <span>Ship weekly <i>◆</i> Review faster <i>◆</i> Fewer meetings <i>◆</i> One board <i>◆</i> Ship weekly <i>◆</i> Review faster <i>◆</i> Fewer meetings <i>◆</i> One board <i>◆</i></span>
    </div>
  </div>
  <div class="px-5 pt-9 pb-[22px] min-[561px]:px-[34px] min-[561px]:pt-[38px]">
    <div class="mx-auto grid max-w-[1040px] grid-cols-1 gap-[30px] min-[781px]:grid-cols-[1.3fr_3fr]">
      <div><b class="block text-[1.02rem] font-extrabold tracking-[-.02em] text-white">Northwind</b><p class="mt-2 max-w-[30ch] text-[.85rem] leading-[1.65]">Boards, reviews and release notes for teams that ship every week.</p></div>
      <nav class="grid grid-cols-2 gap-[30px] min-[781px]:grid-cols-3 [&_a]:hover:text-white [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&_a]:focus-visible:outline-[#818cf8]" aria-label="Footer">
        <div><h2 class="mb-[11px] text-[.74rem] font-extrabold tracking-[.08em] text-white uppercase">Product</h2><ul class="flex flex-col gap-2 text-[.85rem]"><li><a href="#">Overview</a></li><li><a href="#">Pricing</a></li><li><a href="#">Changelog</a></li></ul></div>
        <div><h2 class="mb-[11px] text-[.74rem] font-extrabold tracking-[.08em] text-white uppercase">Company</h2><ul class="flex flex-col gap-2 text-[.85rem]"><li><a href="#">About</a></li><li><a href="#">Careers</a></li><li><a href="#">Contact</a></li></ul></div>
        <div><h2 class="mb-[11px] text-[.74rem] font-extrabold tracking-[.08em] text-white uppercase">Resources</h2><ul class="flex flex-col gap-2 text-[.85rem]"><li><a href="#">Docs</a></li><li><a href="#">Status</a></li><li><a href="#">Support</a></li></ul></div>
      </nav>
    </div>
    <div class="mx-auto mt-[30px] flex max-w-[1040px] flex-wrap justify-between gap-3.5 border-t border-[#1f2937] pt-[18px] text-[.8rem]">
      <p>© Northwind Ltd.</p>
      <nav aria-label="Legal"><ul class="flex gap-4 [&_a]:hover:text-white [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&_a]:focus-visible:outline-[#818cf8]"><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul></nav>
    </div>
  </div>
</footer>
CSS 
@theme {
  --animate-marquee: marquee 26s linear infinite;
  @keyframes marquee {
    to { transform: translateX(-50%); }
  }
}

About this set

A dark footer topped by a band of short slogans that scrolls sideways without end, separated by small indigo diamonds. The loop is CSS only: the slogans are written twice in a track set to max-content width, and a keyframe moves the track by exactly half its width, so the second copy lands where the first began and the jump is invisible. Below the band sit the brand with a description, three link columns (Product, Company, Resources) and a legal bar. Use it on a landing page, an event site or a product with a few punchy claims you want repeated. Because moving content that runs longer than five seconds needs a way to stop it, the band has a round pause button at its right edge. It is a real checkbox labelled Pause the scrolling band, and checking it pauses the animation with animation-play-state; hovering the band pauses it too. Under reduced motion the band is still and the pause button is removed. The slogans are aria-hidden, since they repeat and carry no links.

What’s included

  • Seamless CSS-only loop from duplicated content and a -50% translate
  • Pause toggle built on a checkbox, no JavaScript
  • Hovering the band pauses it too
  • Static band and no toggle under prefers-reduced-motion
  • Bootstrap version uses .btn-check with a label.btn for the toggle

Accessibility

The pause control is a checkbox with the accessible name Pause the scrolling band, reachable with Tab and toggled with Space; its round button shows a 2px indigo outline on keyboard focus. The repeated slogans are aria-hidden. Link columns sit in a nav labelled Footer, and under prefers-reduced-motion the band does not move at all.

Customise it

Change the 26s duration in the fm-slide animation (plain CSS and Bootstrap) or --animate-marquee (Tailwind) for speed, #111827 for the background and #6366f1 for the diamonds. Edit the slogans in both spans so the copies stay identical.