EdTech Bright
Confetti-dot background, SVG circular progress rings per card, spring-bounce hover, color-coded subject badges (math/code/bio/design/psych), achievement chips, and a dark "career switch" featured card. Use case: online learning platform. Nunito for headings, DM Sans for body.
EdTech Bright the 8th of 15 designs in the 15 CSS Testimonials & Reviews collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<section class="tm-edu" aria-label="Learner testimonials">
<header class="tm-edu-hdr">
<div class="tm-edu-hdr-brand">
<span class="tm-edu-brand-icon" aria-hidden="true">🎓</span>
<div>
<div class="tm-edu-brand-name">LearnSpark</div>
<div class="tm-edu-brand-sub">Adaptive learning platform</div>
</div>
</div>
<div class="tm-edu-hdr-stats">
<div class="tm-edu-hstat tm-edu-sun"><div class="tm-edu-hstat-n">94%</div><div class="tm-edu-hstat-l">Completion rate</div></div>
<div class="tm-edu-hstat tm-edu-sky"><div class="tm-edu-hstat-n">2.1M</div><div class="tm-edu-hstat-l">Learners</div></div>
<div class="tm-edu-hstat tm-edu-mint"><div class="tm-edu-hstat-n">4.97★</div><div class="tm-edu-hstat-l">Avg rating</div></div>
</div>
</header>
<div class="tm-edu-layout">
<article class="tm-edu-card tm-edu-sun-card">
<div class="tm-edu-ring-wrap" aria-hidden="true">
<svg class="tm-edu-ring-svg" viewBox="0 0 42 42">
<circle class="tm-edu-ring-track" cx="21" cy="21" r="20"></circle>
<circle class="tm-edu-ring-prog" cx="21" cy="21" r="20" stroke="#f59e0b" stroke-dashoffset="13"></circle>
</svg>
</div>
<div class="tm-edu-badge tm-edu-sun-badge">Mathematics</div>
<div class="tm-edu-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-edu-q">"Failed calculus twice in college. Came to LearnSpark. Passed my <em>actuarial exam</em> on the first try. The adaptive pacing changed everything."</blockquote>
<figcaption class="tm-edu-author">
<span class="tm-edu-av tm-edu-sun-av" aria-hidden="true">TM</span>
<span><cite class="tm-edu-an">Tobias Müller</cite><span class="tm-edu-ar">Actuarial student · Germany</span></span>
</figcaption>
<span class="tm-edu-achiev" aria-hidden="true">Course completer</span>
</article>
<article class="tm-edu-card tm-edu-sky-card">
<div class="tm-edu-ring-wrap" aria-hidden="true">
<svg class="tm-edu-ring-svg" viewBox="0 0 42 42">
<circle class="tm-edu-ring-track" cx="21" cy="21" r="20"></circle>
<circle class="tm-edu-ring-prog" cx="21" cy="21" r="20" stroke="#2563eb" stroke-dashoffset="6"></circle>
</svg>
</div>
<div class="tm-edu-badge tm-edu-sky-badge">Coding</div>
<div class="tm-edu-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-edu-q">"Landed my <em>first dev job</em> six months after starting the Web Dev track. The project-based learning is genuinely how it should be taught."</blockquote>
<figcaption class="tm-edu-author">
<span class="tm-edu-av tm-edu-sky-av" aria-hidden="true">PA</span>
<span><cite class="tm-edu-an">Priscilla Adom</cite><span class="tm-edu-ar">Junior developer · Ghana</span></span>
</figcaption>
</article>
<article class="tm-edu-card tm-edu-mint-card">
<div class="tm-edu-ring-wrap" aria-hidden="true">
<svg class="tm-edu-ring-svg" viewBox="0 0 42 42">
<circle class="tm-edu-ring-track" cx="21" cy="21" r="20"></circle>
<circle class="tm-edu-ring-prog" cx="21" cy="21" r="20" stroke="#10b981" stroke-dashoffset="19"></circle>
</svg>
</div>
<div class="tm-edu-badge tm-edu-mint-badge">Biology</div>
<div class="tm-edu-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-edu-q">"Got into medical school. My LearnSpark <em>MCAT biology</em> score was in the 98th percentile. Coincidence? I don't think so."</blockquote>
<figcaption class="tm-edu-author">
<span class="tm-edu-av tm-edu-mint-av" aria-hidden="true">SC</span>
<span><cite class="tm-edu-an">Seo-Yeon Choi</cite><span class="tm-edu-ar">Med school applicant · Korea</span></span>
</figcaption>
<span class="tm-edu-achiev" aria-hidden="true">Top 1% learner</span>
</article>
<article class="tm-edu-card tm-edu-coral-card">
<div class="tm-edu-badge tm-edu-coral-badge">Design</div>
<div class="tm-edu-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-edu-q">"The design thinking curriculum is <em>better than my $40K degree</em>. I mean that without exaggeration. Hired at a top-5 agency within 3 months."</blockquote>
<figcaption class="tm-edu-author">
<span class="tm-edu-av tm-edu-coral-av" aria-hidden="true">LR</span>
<span><cite class="tm-edu-an">Lucia Romero</cite><span class="tm-edu-ar">UI designer · Spain</span></span>
</figcaption>
</article>
<article class="tm-edu-card tm-edu-lavender-card">
<div class="tm-edu-badge tm-edu-lavender-badge">Psychology</div>
<div class="tm-edu-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-edu-q">"The AI tutor remembered <em>where I struggled</em> three weeks ago and revisited it unprompted. That's better than most human tutors I've had."</blockquote>
<figcaption class="tm-edu-author">
<span class="tm-edu-av tm-edu-lavender-av" aria-hidden="true">NW</span>
<span><cite class="tm-edu-an">Nia Williams</cite><span class="tm-edu-ar">PhD student · UK</span></span>
</figcaption>
</article>
<article class="tm-edu-card tm-edu-ink-card tm-edu-feat">
<div class="tm-edu-badge tm-edu-white-badge">Career switch · Featured</div>
<div class="tm-edu-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-edu-q">"I was a high school PE teacher for 12 years. Not unhappy — just curious whether I could do more with my life. I finished the Data Science bootcamp in nine months, evenings only. Within two weeks of finishing, I had <em>three offers</em>. Accepted a senior analyst role at 2.4× my old salary."</blockquote>
<figcaption class="tm-edu-author">
<span class="tm-edu-av tm-edu-ink-av" aria-hidden="true">DK</span>
<span><cite class="tm-edu-an">Damien Kowalski</cite><span class="tm-edu-ar">Former PE teacher → Data analyst · Poland</span></span>
</figcaption>
</article>
</div>
</section> /* EdTech Bright — confetti-dot background contained in the wrapper.
Six color families (sun/sky/mint/coral/lavender/ink) cycle through
subject badges + avatar tints. SVG progress rings use stroke-dasharray
to render a fillable circular arc. */
.tm-edu {
--tm-edu-bg: #fdf9f3;
--tm-edu-ink: #1a1a2e;
--tm-edu-sun: #ffb700;
--tm-edu-sky: #2563eb;
--tm-edu-mint: #10b981;
--tm-edu-coral: #f43f5e;
--tm-edu-lavender: #8b5cf6;
position: relative;
padding: clamp(28px, 4vw, 48px);
background: var(--tm-edu-bg);
background-image:
radial-gradient(circle, rgba(255,183,0,0.15) 1px, transparent 1px),
radial-gradient(circle, rgba(37,99,235,0.1) 1px, transparent 1px),
radial-gradient(circle, rgba(16,185,129,0.1) 1px, transparent 1px);
background-size: 60px 60px, 90px 90px, 120px 120px;
background-position: 0 0, 30px 45px, 60px 15px;
font-family: 'DM Sans', system-ui, sans-serif;
color: var(--tm-edu-ink);
min-height: 520px;
}
.tm-edu-hdr {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
flex-wrap: wrap;
gap: 18px;
}
.tm-edu-hdr-brand {
display: flex;
align-items: center;
gap: 10px;
}
.tm-edu-brand-icon {
width: 40px;
height: 40px;
background: var(--tm-edu-sun);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 4px 12px rgba(255,183,0,0.4);
}
.tm-edu-brand-name {
font-family: 'Nunito', system-ui, sans-serif;
font-size: 18px;
font-weight: 900;
color: var(--tm-edu-ink);
}
.tm-edu-brand-sub {
font-size: 10px;
color: #888;
margin-top: -2px;
font-weight: 400;
}
.tm-edu-hdr-stats { display: flex; gap: 22px; }
.tm-edu-hstat { text-align: center; }
.tm-edu-hstat-n {
font-family: 'Nunito', system-ui, sans-serif;
font-size: 1.3rem;
font-weight: 900;
color: var(--tm-edu-ink);
}
.tm-edu-hstat-l { font-size: 10px; color: #888; margin-top: 1px; }
.tm-edu-sun .tm-edu-hstat-n { color: var(--tm-edu-sun); }
.tm-edu-sky .tm-edu-hstat-n { color: var(--tm-edu-sky); }
.tm-edu-mint .tm-edu-hstat-n { color: var(--tm-edu-mint); }
.tm-edu-layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.tm-edu-card {
border-radius: 20px;
padding: 24px 22px;
position: relative;
overflow: hidden;
transition: transform 0.35s cubic-bezier(.34, 1.56, .64, 1),
box-shadow 0.35s;
animation: tm-edu-pop 0.65s cubic-bezier(.34, 1.2, .64, 1) both;
}
.tm-edu-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.tm-edu-card:nth-child(1) { animation-delay: 0.04s; }
.tm-edu-card:nth-child(2) { animation-delay: 0.10s; }
.tm-edu-card:nth-child(3) { animation-delay: 0.16s; }
.tm-edu-card:nth-child(4) { animation-delay: 0.22s; }
.tm-edu-card:nth-child(5) { animation-delay: 0.28s; }
.tm-edu-card:nth-child(6) { animation-delay: 0.34s; }
@keyframes tm-edu-pop {
from { opacity: 0; transform: scale(.94) translateY(12px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.tm-edu-sun-card { background: linear-gradient(135deg, #fff8dc, #fff3ba); border: 2px solid rgba(255,183,0,0.2); }
.tm-edu-sky-card { background: linear-gradient(135deg, #eff6ff, #dbeafe); border: 2px solid rgba(37,99,235,0.15); }
.tm-edu-mint-card { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border: 2px solid rgba(16,185,129,0.15); }
.tm-edu-coral-card { background: linear-gradient(135deg, #fff1f2, #ffe4e6); border: 2px solid rgba(244,63,94,0.15); }
.tm-edu-lavender-card { background: linear-gradient(135deg, #f5f3ff, #ede9fe); border: 2px solid rgba(139,92,246,0.15); }
.tm-edu-ink-card { background: var(--tm-edu-ink); border: 2px solid transparent; }
.tm-edu-feat { grid-column: span 2; }
.tm-edu-ring-wrap {
position: absolute;
top: 18px;
right: 18px;
width: 44px;
height: 44px;
}
.tm-edu-ring-svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.tm-edu-ring-track {
fill: none;
stroke: rgba(0,0,0,0.08);
stroke-width: 4;
}
.tm-edu-ring-prog {
fill: none;
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 126;
}
.tm-edu-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: 'Nunito', system-ui, sans-serif;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 20px;
margin-bottom: 12px;
}
.tm-edu-sun-badge { background: rgba(255,183,0,0.2); color: #b45309; }
.tm-edu-sky-badge { background: rgba(37,99,235,0.12); color: var(--tm-edu-sky); }
.tm-edu-mint-badge { background: rgba(16,185,129,0.15); color: #059669; }
.tm-edu-coral-badge { background: rgba(244,63,94,0.12); color: var(--tm-edu-coral); }
.tm-edu-lavender-badge { background: rgba(139,92,246,0.15); color: var(--tm-edu-lavender); }
.tm-edu-white-badge { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85); }
.tm-edu-stars {
display: flex;
gap: 3px;
margin-bottom: 10px;
font-size: 13px;
}
.tm-edu-sun-card .tm-edu-stars { color: var(--tm-edu-sun); }
.tm-edu-sky-card .tm-edu-stars { color: var(--tm-edu-sky); }
.tm-edu-mint-card .tm-edu-stars { color: var(--tm-edu-mint); }
.tm-edu-coral-card .tm-edu-stars { color: var(--tm-edu-coral); }
.tm-edu-lavender-card .tm-edu-stars { color: var(--tm-edu-lavender); }
.tm-edu-ink-card .tm-edu-stars { color: var(--tm-edu-sun); }
.tm-edu-q {
font-size: 0.88rem;
line-height: 1.65;
font-weight: 400;
margin: 0 0 16px;
color: #333;
font-style: normal;
}
.tm-edu-ink-card .tm-edu-q { color: rgba(255,255,255,0.75); }
.tm-edu-q em { font-style: normal; font-weight: 700; }
.tm-edu-sun-card .tm-edu-q em { color: #b45309; }
.tm-edu-sky-card .tm-edu-q em { color: var(--tm-edu-sky); }
.tm-edu-mint-card .tm-edu-q em { color: #059669; }
.tm-edu-coral-card .tm-edu-q em { color: var(--tm-edu-coral); }
.tm-edu-lavender-card .tm-edu-q em { color: var(--tm-edu-lavender); }
.tm-edu-ink-card .tm-edu-q em { color: var(--tm-edu-sun); }
.tm-edu-author {
display: flex;
align-items: center;
gap: 10px;
}
.tm-edu-av {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Nunito', system-ui, sans-serif;
font-size: 12px;
font-weight: 900;
flex-shrink: 0;
}
.tm-edu-sun-av { background: var(--tm-edu-sun); color: #7c5000; }
.tm-edu-sky-av { background: var(--tm-edu-sky); color: #fff; }
.tm-edu-mint-av { background: var(--tm-edu-mint); color: #fff; }
.tm-edu-coral-av { background: var(--tm-edu-coral); color: #fff; }
.tm-edu-lavender-av { background: var(--tm-edu-lavender); color: #fff; }
.tm-edu-ink-av { background: rgba(255,255,255,0.15); color: #fff; }
.tm-edu-an {
font-family: 'Nunito', system-ui, sans-serif;
font-size: 13px;
font-weight: 800;
font-style: normal;
line-height: 1.3;
display: block;
}
.tm-edu-ink-card .tm-edu-an { color: #fff; }
.tm-edu-ar { font-size: 10px; color: #888; margin-top: 2px; }
.tm-edu-ink-card .tm-edu-ar { color: rgba(255,255,255,0.4); }
.tm-edu-achiev {
position: absolute;
bottom: 18px;
right: 18px;
background: rgba(255,183,0,0.9);
color: #7c5000;
font-family: 'Nunito', system-ui, sans-serif;
font-size: 8px;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 20px;
}
@media (max-width: 820px) {
.tm-edu-layout { grid-template-columns: 1fr; }
.tm-edu-feat { grid-column: 1; }
.tm-edu-hdr-stats { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.tm-edu-card { animation: none; transition: none; }
.tm-edu-card:hover { transform: none; }
}