...
This compact, elegant ticker fits perfectly under your logo on any page.
Updates every 4 seconds • Fully responsive • 100% Larecoin branding.
<!-- LARE Ticker -->
<div class="lare-ticker" style="max-width:320px;">
<div class="ticker-item">
<span class="coin">LARE</span>
<span class="price" id="larePrice">$0.042</span>
<span class="change positive" id="lareChange">+2.84%</span>
</div>
</div>
<!-- LUSD Ticker (separate)-->
<div class="lare-ticker" style="max-width:320px; margin-top:12px;">
<div class="ticker-item">
<span class="coin">LUSD</span>
<span class="price" id="lusdPrice">$1.000</span>
<span class="change positive" id="lusdChange">+0.01%</span>
</div>
</div>
<style>
.lare-ticker { background:#f8fbff; border:1px solid rgba(77,166,255,0.2); border-radius:50px; padding:8px 16px; display:flex; align-items:center; gap:12px; box-shadow:0 8px 25px rgba(77,166,255,0.15); font-family:'Inter',sans-serif; font-size:0.95rem; font-weight:700; backdrop-filter:blur(10px); margin:0 auto; }
.ticker-item { display:flex; align-items:center; gap:8px; }
.coin { color:#003087; font-weight:900; }
.price { color:#0f172a; font-weight:800; }
.change { padding:3px 10px; border-radius:50px; font-size:0.85rem; }
.positive { background:rgba(16,185,129,0.15); color:#10b981; }
.negative { background:rgba(239,68,68,0.15); color:#ef4444; }
</style>
<script>
setInterval(() => {
const baseLare = 0.042;
const lareChange = (Math.random() - 0.5) * 0.006;
const newLare = baseLare + lareChange;
document.getElementById('larePrice').textContent = '$' + newLare.toFixed(4);
const larePct = ((newLare - baseLare) / baseLare * 100).toFixed(2);
const lareEl = document.getElementById('lareChange');
lareEl.textContent = (larePct >= 0 ? '+' : '') + larePct + '%';
lareEl.className = larePct >= 0 ? 'change positive' : 'change negative';
const baseLusd = 1.000;
const lusdChange = (Math.random() - 0.5) * 0.0006;
const newLusd = baseLusd + lusdChange;
document.getElementById('lusdPrice').textContent = '$' + newLusd.toFixed(3);
const lusdPct = ((newLusd - baseLusd) / baseLusd * 100).toFixed(2);
const lusdEl = document.getElementById('lusdChange');
lusdEl.textContent = (lusdPct >= 0 ? '+' : '') + lusdPct + '%';
lusdEl.className = lusdPct >= 0 ? 'change positive' : 'change negative';
}, 4000);
</script><!-- LARE Vertical -->
<div class="lare-ticker" style="flex-direction:column; border-radius:20px; padding:16px; max-width:250px; margin:0 auto;">
<div class="ticker-item">
<span class="coin">LARE</span>
<span class="price" id="larePriceV">$0.042</span>
<span class="change positive" id="lareChangeV">+2.84%</span>
</div>
</div>
<!-- LUSD Vertical -->
<div class="lare-ticker" style="flex-direction:column; border-radius:20px; padding:16px; max-width:250px; margin:12px auto 0;">
<div class="ticker-item">
<span class="coin">LUSD</span>
<span class="price" id="lusdPriceV">$1.000</span>
<span class="change positive" id="lusdChangeV">+0.01%</span>
</div>
</div>
<style>
.lare-ticker { background:#f8fbff; border:1px solid rgba(77,166,255,0.2); box-shadow:0 8px 25px rgba(77,166,255,0.15); font-family:'Inter',sans-serif; font-size:0.95rem; font-weight:700; backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; gap:8px; }
.ticker-item { display:flex; flex-direction:column; align-items:center; gap:4px; }
.coin { color:#003087; font-weight:900; }
.price { color:#0f172a; font-weight:800; }
.change { padding:3px 10px; border-radius:50px; font-size:0.85rem; }
.positive { background:rgba(16,185,129,0.15); color:#10b981; }
.negative { background:rgba(239,68,68,0.15); color:#ef4444; }
</style><div class="lare-ticker" style="font-size:0.8rem; gap:12px; padding:8px 12px;">
<div class="ticker-item"><span class="coin">LARE</span> <span class="price">$0.042</span> <span class="change positive">+2.84%</span></div>
<div class="ticker-item"><span class="coin">SOL</span> <span class="price">$168.50</span> <span class="change negative">-1.2%</span></div>
<div class="ticker-item"><span class="coin">BTC</span> <span class="price">$62,400</span> <span class="change positive">+0.8%</span></div>
<div class="ticker-item"><span class="coin">ETH</span> <span class="price">$3,380</span> <span class="change negative">-0.5%</span></div>
<div class="ticker-item"><span class="coin">BNB</span> <span class="price">$580</span> <span class="change positive">+1.3%</span></div>
<div class="ticker-item"><span class="coin">MATIC</span> <span class="price">$0.92</span> <span class="change positive">+3.1%</span></div>
<div class="ticker-item"><span class="coin">AVAX</span> <span class="price">$48.20</span> <span class="change negative">-2.4%</span></div>
</div>
<style>
.lare-ticker { background:#f8fbff; border:1px solid rgba(77,166,255,0.2); border-radius:50px; display:flex; align-items:center; box-shadow:0 8px 25px rgba(77,166,255,0.15); font-family:'Inter',sans-serif; font-weight:700; backdrop-filter:blur(10px); margin:0 auto; }
.ticker-item { display:flex; align-items:center; gap:8px; }
.coin { color:#003087; font-weight:900; }
.price { color:#0f172a; font-weight:800; }
.change { padding:3px 10px; border-radius:50px; font-size:0.8rem; }
.positive { background:rgba(16,185,129,0.15); color:#10b981; }
.negative { background:rgba(239,68,68,0.15); color:#ef4444; }
</style><div class="lare-marquee-ticker">
<div class="marquee-container">
<div class="marquee-content" id="marquee">
LARE $0.042 +2.84% • BTC $62,400 +0.8% • ETH $3,380 -0.5% • BNB $580 +1.3% • SOL $168.50 -1.2% • XRP $0.58 +0.4% • ADA $0.62 +1.9% • DOGE $0.17 +3.2% • TRX $0.14 +0.6% • AVAX $48.20 -2.4% • SHIB $0.000028 +4.1% • DOT $8.90 +1.5% • LINK $18.50 -0.8% • MATIC $0.92 +3.1% • LTC $92 -0.3% • NEAR $7.80 +2.7% • UNI $12.40 -1.1% • LEO $5.80 +0.2% • DAI $1.000 +0.01% • PEPE $0.000012 +5.6% • ICP $12.30 -1.4% • KAS $0.19 +2.9% • ETC $32.10 +0.7% • APT $9.80 -0.9% • FDUSD $1.000 +0.00% • STX $2.90 +3.8% • FIL $8.20 -1.6% • CRO $0.12 +1.1% • XMR $180 +0.5% • HBAR $0.11 +2.3% • ATOM $10.50 -0.7% • OKB $55 +1.2% • MNT $1.05 +0.9% • VET $0.04 +2.0% • IMX $2.80 -1.3% • ARB $1.45 +1.8% • MKR $2,900 +0.6% • GRT $0.32 +3.5% • OP $2.70 -0.4% • INJ $28.50 +2.2% • AR $38 -1.7% • FLOKI $0.00023 +4.8% • BGB $1.20 +0.3% • THETA $2.60 +1.9% • FTM $0.85 -0.6% • RUNE $6.50 +2.1% • NOT $0.021 +5.3% • BONK $0.000032 +6.1% • JASMY $0.038 +3.7% • TIA $12.80 -1.2%
</div>
</div>
</div>
<style>
.lare-marquee-ticker { background:#f8fbff; border:1px solid rgba(77,166,255,0.2); border-radius:20px; padding:12px; box-shadow:0 8px 25px rgba(77,166,255,0.15); overflow:hidden; font-family:'Inter',sans-serif; font-weight:700; color:#0f172a; }
.marquee-container { overflow:hidden; white-space:nowrap; }
.marquee-content { display:inline-block; animation: marquee 60s linear infinite; }
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.marquee-content::after {
content: '• LARE $0.042 +2.84% • BTC $62,400 +0.8% • ETH $3,380 -0.5% • ...'; /* Duplicate for seamless loop */
white-space: nowrap;
}
</style>
