Logo Cloud + Quote (marquee)

Infinite logo marquee with centered quote; pauses on hover and reduced-motion.

"Bedrijven die niet mogen verliezen, kiezen NedDev."

Vertrouwd door 40+ merken in heel Nederland

SCHADE EXPERTSMME BOUWIMMERSIVECLAIMHANDLERGRASGROENNOVARAMOONAY SCHADE EXPERTSMME BOUWIMMERSIVECLAIMHANDLERGRASGROENNOVARAMOONAY

How to use it

Paste the HTML where the page sections should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- Logo Cloud + Quote (marquee) · NedDev · eigen werk. -->
<div class="jouw-container">
<section class="lcq">
  <div class="lcq__inner">
    <blockquote class="lcq__quote">"Bedrijven die niet mogen verliezen, kiezen NedDev."</blockquote>
    <span class="lcq__sub">Vertrouwd door 40+ merken in heel Nederland</span>
  </div>
  <div class="lcq__marquee" data-lcq>
    <div class="lcq__row">
      <span>SCHADE EXPERTS</span><span>MME BOUW</span><span>IMMERSIVE</span><span>CLAIMHANDLER</span><span>GRASGROEN</span><span>NOVARA</span><span>MOONAY</span>
      <span>SCHADE EXPERTS</span><span>MME BOUW</span><span>IMMERSIVE</span><span>CLAIMHANDLER</span><span>GRASGROEN</span><span>NOVARA</span><span>MOONAY</span>
    </div>
  </div>
</section>
</div>

/* Logo Cloud + Quote (marquee) · NedDev · eigen werk. */
.lcq{overflow:hidden;width:100%;box-sizing:border-box;background:#fff;color:#0a0a0a;border-bottom:1px solid rgba(10,10,10,.12);padding:56px 0;display:flex;flex-direction:column;justify-content:center}
.lcq__inner{max-width:900px;margin:0 auto;padding:0 28px 40px;text-align:center;box-sizing:border-box}
.lcq__quote{font-family:'Boldonse','Switzer',sans-serif;font-weight:400;font-size:clamp(24px,4vw,42px);line-height:1.1;letter-spacing:-.02em;margin:0 0 16px}
.lcq__sub{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:#999;text-transform:uppercase}
.lcq__marquee{position:relative;overflow:hidden;border-top:1px solid rgba(10,10,10,.12);border-bottom:1px solid rgba(10,10,10,.12);padding:26px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.lcq__row{display:flex;gap:56px;width:max-content;animation:lcq-scroll 28s linear infinite}
.lcq__marquee:hover .lcq__row{animation-play-state:paused}
.lcq__row span{font-family:'Boldonse',sans-serif;font-weight:400;font-size:20px;letter-spacing:.02em;color:#0a0a0a;opacity:.55;white-space:nowrap;transition:opacity .25s,color .25s;cursor:default}
.lcq__row span:hover{opacity:1;color:#F5480F}
@keyframes lcq-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.lcq__row{animation:none}}

// Logo Cloud + Quote (marquee) · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.lcq')||root;
if(matchMedia('(prefers-reduced-motion: reduce)').matches){var r=root.querySelector('.lcq__row');if(r)r.style.animation='none';}
}
init(document.querySelector('.jouw-container'));

More page sections

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →