Untitled
Anonymous
plain_text
02/20/2026 5:59 PM
8.4 KB
31
Indexable
<style>
.ticker-section {
background: #f0f9fc;
border-radius: 50px;
padding: 18px 0;
margin: 20px auto;
max-width: 95%;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.ticker-track {
display: flex;
width: max-content;
animation: ticker-scroll 25s linear infinite;
}
.ticker-track:hover {
animation-play-state: paused;
}
.ticker-item {
display: flex;
align-items: center;
gap: 12px;
padding: 0 40px;
white-space: nowrap;
}
.ticker-icon {
background: #cef0f8;
border-radius: 10px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ticker-icon svg {
width: 24px;
height: 24px;
stroke: #1a7a9a;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.ticker-text {
font-size: 15px;
font-weight: 500;
color: #1a1a1a;
font-family: sans-serif;
}
.ticker-separator {
color: #cce8f0;
font-size: 20px;
padding: 0 10px;
}
@keyframes ticker-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@media (max-width: 768px) {
.ticker-section {
border-radius: 20px;
}
.ticker-text {
font-size: 13px;
}
.ticker-icon {
width: 36px;
height: 36px;
}
}
</style>
<section class="ticker-section">
<div class="ticker-track" id="tickerTrack">
<!-- ✏️ BLOC 1 — Modifiez le texte et l'icône SVG -->
<div class="ticker-item">
<div class="ticker-icon">
<svg viewBox="0 0 24 24"><path d="M12 2a5 5 0 0 1 5 5v1h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2h1V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v1h6V7a3 3 0 0 0-3-3zm0 8a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>
</div>
<span class="ticker-text">Cartouche recyclable</span>
</div>
<span class="ticker-separator">|</span>
<!-- ✏️ BLOC 2 -->
<div class="ticker-item">
<div class="ticker-icon">
<svg viewBox="0 0 24 24">
<path d="M9 3h6l1 4H8L9 3z"/>
<path d="M3 7h18v2l-2 12H5L3 9V7z"/>
<path d="M12 11v6M9 11l1 6M15 11l-1 6"/>
</svg>
</div>
<span class="ticker-text">2000 bouteilles évitées / an</span>
</div>
<span class="ticker-separator">|</span>
<!-- ✏️ BLOC 3 -->
<div class="ticker-item">
<div class="ticker-icon">
<svg viewBox="0 0 24 24">
<path d="M12 3C8 3 5 7 5 11c0 5 7 10 7 10s7-5 7-10c0-4-3-8-7-8z"/>
<line x1="5" y1="5" x2="19" y2="19"/>
</svg>
</div>
<span class="ticker-text">Zéro plastique jeté</span>
</div>
<span class="ticker-separator">|</span>
<!-- ✏️ BLOC 4 -->
<div class="ticker-item">
<div class="ticker-icon">
<svg viewBox="0 0 24 24">
<circle cx="12" cy="12" r="9"/>
<path d="M12 3a9 9 0 0 1 0 18"/>
<path d="M3 12h18"/>
<path d="M12 3c-2.5 2.5-4 5.6-4 9s1.5 6.5 4 9"/>
</svg>
</div>
<span class="ticker-text">Matériaux 100% renouvelables</span>
</div>
<span class="ticker-separator">|</span>
<!-- ✏️ BLOC 5 -->
<div class="ticker-item">
<div class="ticker-icon">
<svg viewBox="0 0 24 24">
<rect x="2" y="7" width="20" height="14" rx="2"/>
<path d="M16 7V5a4 4 0 0 0-8 0v2"/>
<line x1="12" y1="12" x2="12" y2="16"/>
</svg>
</div>
<span class="ticker-text">Réduction du transport polluant</span>
</div>
<span class="ticker-separator">|</span>
<!-- ✏️ BLOC 6 — Ajoutez autant de blocs que vous voulez -->
<div class="ticker-item">
<div class="ticker-icon">
<svg viewBox="0 0 24 24">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
</svg>
</div>
<span class="ticker-text">Votre texte ici</span>
</div>
<span class="ticker-separator">|</span>
<!-- 🔁 DUPLICATION pour le défilement infini (copiez-collez les mêmes blocs) -->
<div class="ticker-item">
<div class="ticker-icon">
<svg viewBox="0 0 24 24"><path d="M12 2a5 5 0 0 1 5 5v1h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2h1V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v1h6V7a3 3 0 0 0-3-3zm0 8a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>
</div>
<span class="ticker-text">Cartouche recyclable</span>
</div>
<span class="ticker-separator">|</span>
<div class="ticker-item">
<div class="ticker-icon">
<svg viewBox="0 0 24 24">
<path d="M9 3h6l1 4H8L9 3z"/>
<path d="M3 7h18v2l-2 12H5L3 9V7z"/>
<path d="M12 11v6M9 11l1 6M15 11l-1 6"/>
</svg>
</div>
<span class="ticker-text">2000 bouteilles évitées / an</span>
</div>
<span class="ticker-separator">|</span>
<div class="ticker-item">
<div class="ticker-icon">
<svg viewBox="0 0 24 24">
<path d="M12 3C8 3 5 7 5 11c0 5 7 10 7 10s7-5 7-10c0-4-3-8-7-8z"/>
<line x1="5" y1="5" x2="19" y2="19"/>
</svg>
</div>
<span class="ticker-text">Zéro plastique jeté</span>
</div>
<span class="ticker-separator">|</span>
<div class="ticker-item">
<div class="ticker-icon">
<svg viewBox="0 0 24 24">
<circle cx="12" cy="12" r="9"/>
<path d="M12 3a9 9 0 0 1 0 18"/>
<path d="M3 12h18"/>
<path d="M12 3c-2.5 2.5-4 5.6-4 9s1.5 6.5 4 9"/>
</svg>
</div>
<span class="ticker-text">Matériaux 100% renouvelables</span>
</div>
<span class="ticker-separator">|</span>
<div class="ticker-item">
<div class="ticker-icon">
<svg viewBox="0 0 24 24">
<rect x="2" y="7" width="20" height="14" rx="2"/>
<path d="M16 7V5a4 4 0 0 0-8 0v2"/>
<line x1="12" y1="12" x2="12" y2="16"/>
</svg>
</div>
<span class="ticker-text">Réduction du transport polluant</span>
</div>
<span class="ticker-separator">|</span>
<div class="ticker-item">
<div class="ticker-icon">
<svg viewBox="0 0 24 24">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
</svg>
</div>
<span class="ticker-text">Votre texte ici</span>
</div>
<span class="ticker-separator">|</span>
</div>
</section>Editor is loading...
Leave a Comment