Colour-coded for your convenience
Four different pieces of code that can be used in Kajabi landing pages.
If you accidentally tweak the code and something breaks, don't try to fix it. Just come back here, copy a fresh version, and paste it in again.
Logo Marquee
A row of logos that scrolls left on a seamless loop.
Text Marquee
A scrolling announcement banner with a bit of movement and emoji.
Countdown Timer
Days, hours, minutes and seconds ticking down to a date you set.
FAQ Accordion
Click-to-expand questions and answers.
A "Featured On" style logo row, scrolls continuously left with a seamless loop.
<style>
.logo-marquee-wrap {
overflow: hidden;
width: 100%;
padding: 20px 0;
background: transparent;
}
.logo-marquee-track {
display: flex;
align-items: center;
width: max-content;
animation: logo-scroll 30s linear infinite;
}
.logo-marquee-track img {
height: 100px !important;
width: auto !important;
margin: 0 60px;
flex-shrink: 0;
}
@keyframes logo-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
</style>
<div class="logo-marquee-wrap">
<div class="logo-marquee-track">
<img src="LOGO-URL-1" alt="">
<img src="LOGO-URL-2" alt="">
<img src="LOGO-URL-3" alt="">
<img src="LOGO-URL-4" alt="">
<img src="LOGO-URL-5" alt="">
<img src="LOGO-URL-6" alt="">
<!-- repeat the same logos again, same order, for the seamless loop -->
<img src="LOGO-URL-1" alt="">
<img src="LOGO-URL-2" alt="">
<img src="LOGO-URL-3" alt="">
<img src="LOGO-URL-4" alt="">
<img src="LOGO-URL-5" alt="">
<img src="LOGO-URL-6" alt="">
</div>
</div>What's highlighted: the scroll speed (30s), the logo height (100px), the gap between logos (60px), and all six LOGO-URL placeholders. To get a permanent image link, publish the image on a page first, then right-click the live image and choose "Copy image address". Don't use the Media Library link, that one expires in 7 days.
A scrolling announcement banner for short punchy lines with emoji.
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap');
.marquee-wrapper {
background-color: transparent;
padding: 6px 0;
overflow: hidden;
white-space: nowrap;
}
.marquee-track {
display: inline-block;
animation: marquee 30s linear infinite;
}
.marquee-track span {
color: #800040;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 25px;
letter-spacing: 0.05em;
padding: 0 10px;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
</style>
<div class="marquee-wrapper">
<div class="marquee-track">
<span>✨ Your message here</span>
<span>🧡 Another message</span>
<span>🔥 And another one</span>
<span>✨ Your message here</span>
<span>🧡 Another message</span>
<span>🔥 And another one</span>
</div>
</div>What's highlighted: the scroll speed (30s), the text colour (#800040, already brand-matched, only change it if you want a different colour), the font size (25px), and your three messages, each duplicated once so the loop is seamless rather than jumping.
Days / hours / minutes / seconds counting down to a set date.
<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap');
.countdown-wrap {
display: flex;
justify-content: center;
gap: 20px;
padding: 20px 0;
flex-wrap: wrap;
}
.countdown-block {
text-align: center;
min-width: 70px;
}
.countdown-number {
font-family: 'DM Sans', sans-serif;
font-size: 40px;
font-weight: 700;
color: #800040;
line-height: 1;
}
.countdown-label {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #4b4640;
margin-top: 6px;
}
</style>
<div class="countdown-wrap" id="countdown-timer">
<div class="countdown-block">
<div class="countdown-number" id="cd-days">00</div>
<div class="countdown-label">Days</div>
</div>
<div class="countdown-block">
<div class="countdown-number" id="cd-hours">00</div>
<div class="countdown-label">Hours</div>
</div>
<div class="countdown-block">
<div class="countdown-number" id="cd-minutes">00</div>
<div class="countdown-label">Minutes</div>
</div>
<div class="countdown-block">
<div class="countdown-number" id="cd-seconds">00</div>
<div class="countdown-label">Seconds</div>
</div>
</div>
<script>
(function() {
var countdownDate = new Date("2026-08-31T23:59:59").getTime();
var timer = setInterval(function() {
var now = new Date().getTime();
var distance = countdownDate - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById("countdown-timer").innerHTML = "<div class='countdown-label'>Offer closed</div>";
return;
}
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("cd-days").textContent = String(days).padStart(2, "0");
document.getElementById("cd-hours").textContent = String(hours).padStart(2, "0");
document.getElementById("cd-minutes").textContent = String(minutes).padStart(2, "0");
document.getElementById("cd-seconds").textContent = String(seconds).padStart(2, "0");
}, 1000);
})();
</script>What's highlighted: the deadline date and time, the number colour (#800040) and the label colour (#4b4640). You shouldn't need to touch anything below the script tag, that's what runs the countdown.
Click-to-expand questions.
<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap');
.faq-wrap {
max-width: 700px;
margin: 0 auto;
font-family: 'DM Sans', sans-serif;
}
.faq-item {
border-bottom: 1px solid #e3d9cd;
}
.faq-question {
width: 100%;
text-align: left;
background: none;
border: none;
padding: 18px 10px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
color: #1b264f;
}
.faq-icon {
font-size: 22px;
color: #800040;
transition: transform 0.3s ease;
flex-shrink: 0;
margin-left: 10px;
}
.faq-item.open .faq-icon {
transform: rotate(45deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding: 0 10px;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #4b4640;
}
.faq-item.open .faq-answer {
padding-bottom: 18px;
}
</style>
<div class="faq-wrap" id="faq-accordion">
<div class="faq-item">
<button class="faq-question">
Your question goes here?
<span class="faq-icon">+</span>
</button>
<div class="faq-answer">
<p>Your answer goes here.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
Another question?
<span class="faq-icon">+</span>
</button>
<div class="faq-answer">
<p>Another answer.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
A third question?
<span class="faq-icon">+</span>
</button>
<div class="faq-answer">
<p>A third answer.</p>
</div>
</div>
</div>
<script>
(function() {
var items = document.querySelectorAll("#faq-accordion .faq-item");
items.forEach(function(item) {
var question = item.querySelector(".faq-question");
var answer = item.querySelector(".faq-answer");
question.addEventListener("click", function() {
var isOpen = item.classList.contains("open");
items.forEach(function(i) {
i.classList.remove("open");
i.querySelector(".faq-answer").style.maxHeight = null;
});
if (!isOpen) {
item.classList.add("open");
answer.style.maxHeight = answer.scrollHeight + "px";
}
});
});
})();
</script>What's highlighted: the four brand colours (border, question text, icon, answer text) and your sample question/answer text in all three items. Want to add more questions? Copy one whole faq-item block and paste it above the closing div at the end, then swap in your question and answer.