EdTech Bright — Live CSS Playground

{CF} CodeFronts Back to CSS Testimonials & Reviews EdTech Bright Pure CSS

HTML

<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">&#x1F393;</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&#9733;</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">&#9733;&#9733;&#9733;&#9733;&#9733;</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 &middot; 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">&#9733;&#9733;&#9733;&#9733;&#9733;</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 &middot; 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">&#9733;&#9733;&#9733;&#9733;&#9733;</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 &middot; 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">&#9733;&#9733;&#9733;&#9733;&#9733;</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 &middot; 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">&#9733;&#9733;&#9733;&#9733;&#9733;</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 &middot; 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 &middot; Featured</div>
      <div class="tm-edu-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</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&times; 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 &rarr; Data analyst &middot; Poland</span></span>
      </figcaption>
    </article>

  </div>
</section>

CSS

/* 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; }
}