<div class="cards-grid">
  <div class="card">
    <p class="card-quote">This course completely changed how I think about web layout. The visual examples made CSS Grid click for me in a way videos never did.</p>
    <div class="card-author">
      <div class="card-avatar">SM</div>
      <div class="card-author-info">
        <div class="name">Sarah Mitchell</div>
        <div class="role">UX Design Student</div>
      </div>
    </div>
  </div>
  <div class="card">
    <p class="card-quote">I went from copy-pasting CSS I didn't understand to actually building responsive layouts from scratch. The playground approach is brilliant.</p>
    <div class="card-author">
      <div class="card-avatar">JR</div>
      <div class="card-author-info">
        <div class="name">James Rodriguez</div>
        <div class="role">Junior Developer</div>
      </div>
    </div>
  </div>
  <div class="card">
    <p class="card-quote">Finally a resource that teaches CSS visually. Every concept has a live demo you can tweak, which is exactly how I learn best.</p>
    <div class="card-author">
      <div class="card-avatar">AK</div>
      <div class="card-author-info">
        <div class="name">Aisha Kaur</div>
        <div class="role">Graphic Designer</div>
      </div>
    </div>
  </div>
</div>

body { background: #0c0c14; font-family: 'DM Sans', sans-serif; padding: 32px; }
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 32px;
  transition: transform .2s, box-shadow .2s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.card-quote {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,.7);
  margin-bottom: 24px;
  padding-left: 20px;
  border-left: 3px solid rgba(245,158,11,.3);
}
.card-author { display: flex; align-items: center; gap: 12px; }
.card-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: #fff;
}
.card-author-info .name { font-size: 14px; font-weight: 600; color: #fff; }
.card-author-info .role { font-size: 12px; color: rgba(255,255,255,.35); }

<div class="large-quote-wrap">
  <p class="large-quote-text">The Visual Playground transformed my understanding of CSS. Instead of memorizing properties, I learned to think in systems &mdash; flexbox, grid, and responsive design all became intuitive.</p>
  <div class="large-quote-photo">DL</div>
  <div class="large-quote-name">David Lawson</div>
  <div class="large-quote-role">Full-Stack Developer at Webflow</div>
</div>

body { background: #0c0c14; font-family: 'DM Sans', sans-serif; padding: 64px 24px; }
.large-quote-wrap {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}
.large-quote-wrap::before {
  content: "\201C";
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 120px;
  color: rgba(245,158,11,.15);
  position: absolute;
  top: -30px; left: 50%;
  transform: translateX(-50%);
  line-height: 1;
  pointer-events: none;
}
.large-quote-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-style: italic;
  color: rgba(255,255,255,.85);
  line-height: 1.6;
  margin-bottom: 32px;
  position: relative;
}
.large-quote-photo {
  width: 72px; height: 72px;
  border-radius: 50%;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, #8b5cf6, #3b82f6);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; color: #fff;
  border: 3px solid rgba(139,92,246,.3);
}
.large-quote-name { font-size: 16px; font-weight: 700; color: #fff; }
.large-quote-role { font-size: 13px; color: rgba(255,255,255,.4); margin-top: 4px; }

<div class="rating-cards">
  <div class="rating-card">
    <div class="rating-stars">
      <span class="star">&#9733;</span><span class="star">&#9733;</span><span class="star">&#9733;</span><span class="star">&#9733;</span><span class="star">&#9733;</span>
    </div>
    <p class="rating-text">Hands down the best CSS learning resource I've found. The interactive examples are worth their weight in gold. I reference this playground weekly.</p>
    <div class="rating-source">
      <span class="name">Emily Chen</span>
      <span class="platform">Product Hunt</span>
    </div>
  </div>
  <div class="rating-card">
    <div class="rating-stars">
      <span class="star">&#9733;</span><span class="star">&#9733;</span><span class="star">&#9733;</span><span class="star">&#9733;</span><span class="star empty">&#9733;</span>
    </div>
    <p class="rating-text">Great resource for visual learners. The only thing I'd add is more advanced animation examples. But for core CSS, it's unbeatable.</p>
    <div class="rating-source">
      <span class="name">Marcus Johnson</span>
      <span class="platform">Trustpilot</span>
    </div>
  </div>
  <div class="rating-card">
    <div class="rating-stars">
      <span class="star">&#9733;</span><span class="star">&#9733;</span><span class="star">&#9733;</span><span class="star">&#9733;</span><span class="star">&#9733;</span>
    </div>
    <p class="rating-text">I've recommended this to every junior dev I mentor. It bridges the gap between reading docs and actually understanding how CSS layouts work.</p>
    <div class="rating-source">
      <span class="name">Priya Sharma</span>
      <span class="platform">G2</span>
    </div>
  </div>
</div>

body { background: #0c0c14; font-family: 'DM Sans', sans-serif; padding: 32px; }
.rating-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.rating-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 28px 32px;
}
.rating-stars { display: flex; gap: 4px; margin-bottom: 16px; }
.rating-stars .star { font-size: 18px; color: #f59e0b; }
.rating-stars .star.empty { color: rgba(255,255,255,.12); }
.rating-text {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.65);
  margin-bottom: 20px;
}
.rating-source {
  display: flex; align-items: center; justify-content: space-between;
}
.rating-source .name { font-size: 13px; font-weight: 600; color: #fff; }
.rating-source .platform {
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 4px 10px;
  background: rgba(255,255,255,.04);
  border-radius: 20px;
}

<div class="slider-wrapper">
  <div class="slider-track">
    <div class="slider-slide">
      <div class="slide-avatar" style="background:linear-gradient(135deg,#f59e0b,#ef4444);">NK</div>
      <p class="slide-text">This playground made me fall in love with CSS. I used to dread writing styles; now I actually enjoy it. The side-by-side code and visual output is genius.</p>
      <div class="slide-name">Nadia Kim</div>
      <div class="slide-role">Bootcamp Graduate</div>
    </div>
    <div class="slider-slide">
      <div class="slide-avatar" style="background:linear-gradient(135deg,#3b82f6,#8b5cf6);">TC</div>
      <p class="slide-text">As a backend developer, CSS always felt like black magic. The Visual Playground demystified everything from box-model to grid in a way that finally stuck.</p>
      <div class="slide-name">Tom Callahan</div>
      <div class="slide-role">Backend Engineer</div>
    </div>
    <div class="slider-slide">
      <div class="slide-avatar" style="background:linear-gradient(135deg,#10b981,#06b6d4);">LW</div>
      <p class="slide-text">I use this as my primary teaching tool now. Students can see the effect of every property change instantly. Engagement in my class went through the roof.</p>
      <div class="slide-name">Lisa Wong</div>
      <div class="slide-role">CS Instructor</div>
    </div>
    <div class="slider-slide">
      <div class="slide-avatar" style="background:linear-gradient(135deg,#ec4899,#f43f5e);">RP</div>
      <p class="slide-text">Perfect for quick reference when you can't remember if it's justify-content or align-items. The visual cheat sheets saved me countless Stack Overflow searches.</p>
      <div class="slide-name">Raj Patel</div>
      <div class="slide-role">Freelance Developer</div>
    </div>
  </div>
  <div class="slider-dots">
    <span></span><span></span><span></span><span></span>
  </div>
</div>

body { background: #0c0c14; font-family: 'DM Sans', sans-serif; padding: 48px 24px; }
.slider-wrapper {
  max-width: 640px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.slider-track {
  display: flex;
  animation: slide 12s ease-in-out infinite;
}
.slider-slide {
  min-width: 100%;
  padding: 48px 40px;
  text-align: center;
}
@keyframes slide {
  0%, 25%   { transform: translateX(0); }
  33%, 58%  { transform: translateX(-100%); }
  66%, 92%  { transform: translateX(-200%); }
  100%      { transform: translateX(0); }
}
.slider-wrapper:hover .slider-track { animation-play-state: paused; }
.slide-avatar {
  width: 60px; height: 60px; border-radius: 50%;
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: #fff;
}
.slide-text {
  font-size: 15px; line-height: 1.7;
  color: rgba(255,255,255,.7);
  margin-bottom: 20px;
  max-width: 480px; margin-left: auto; margin-right: auto;
}
.slide-name { font-size: 14px; font-weight: 700; color: #fff; }
.slide-role { font-size: 12px; color: rgba(255,255,255,.35); margin-top: 4px; }
.slider-dots {
  display: flex; justify-content: center; gap: 8px;
  padding: 0 0 24px;
}
.slider-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  cursor: pointer;
  transition: background .15s;
}
.slider-dots span.active { background: #f59e0b; }

// The slider animation is pure CSS. This optional JS keeps the dots
// in sync with the currently-visible slide so users see progress.
(function () {
  var dots = document.querySelectorAll('.slider-dots span');
  var slideCount = dots.length;
  var i = 0;
  function tick() {
    dots.forEach(function (d) { d.classList.remove('active'); });
    dots[i].classList.add('active');
    i = (i + 1) % slideCount;
  }
  tick();
  setInterval(tick, 4000); // matches @keyframes timing per slide
})();

<div class="side-testimonial">
  <div class="side-image">
    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=face" alt="Carlos Mendez">
  </div>
  <div class="side-content">
    <div class="side-quote-mark">&ldquo;</div>
    <blockquote>Moving from Figma to actual CSS was always my weak point. This resource gave me the confidence to translate my designs into pixel-perfect code.</blockquote>
    <div class="side-name">Carlos Mendez</div>
    <div class="side-role">Product Designer</div>
    <span class="side-company">Stripe</span>
  </div>
</div>

<div class="side-testimonial">
  <div class="side-image">
    <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&h=400&fit=crop&crop=face" alt="Dr. Helen Park">
  </div>
  <div class="side-content">
    <div class="side-quote-mark">&ldquo;</div>
    <blockquote>I assigned the playground as homework and got the best student projects I've ever seen. Interactive learning works &mdash; this proves it.</blockquote>
    <div class="side-name">Dr. Helen Park</div>
    <div class="side-role">Associate Professor</div>
    <span class="side-company">NYU</span>
  </div>
</div>

body { background: #0c0c14; font-family: 'DM Sans', sans-serif; padding: 32px; }
.side-testimonial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px;
  padding: 48px;
  margin-bottom: 24px;
}
.side-testimonial:nth-child(even) { direction: rtl; }
.side-testimonial:nth-child(even) > * { direction: ltr; }
.side-image {
  aspect-ratio: 1;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(59,130,246,.2), rgba(139,92,246,.2));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
}
.side-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-content .side-quote-mark {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 48px;
  color: rgba(245,158,11,.3);
  line-height: 1;
  margin-bottom: 8px;
}
.side-content blockquote {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,.7);
  margin-bottom: 24px;
  font-style: italic;
}
.side-content .side-name { font-size: 15px; font-weight: 700; color: #fff; }
.side-content .side-role { font-size: 13px; color: rgba(255,255,255,.35); margin-top: 4px; }
.side-content .side-company {
  display: inline-block; margin-top: 12px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.25);
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
}
@media (max-width: 1024px) {
  .side-testimonial { grid-template-columns: 1fr; gap: 24px; padding: 32px; }
}

<div class="masonry">
  <div class="masonry-card">
    <p class="m-text">Short, sweet, and incredibly useful. I bookmarked every single section.</p>
    <div class="m-author">
      <div class="m-avatar" style="background:linear-gradient(135deg,#f59e0b,#ef4444);">KT</div>
      <div><div class="m-name">Kevin Tran</div><div class="m-role">Student</div></div>
    </div>
  </div>
  <div class="masonry-card">
    <p class="m-text">The flexbox section alone saved me hours of debugging. Understanding the difference between justify-content and align-items visually was a game-changer. I no longer guess and check my flexbox properties.</p>
    <div class="m-author">
      <div class="m-avatar" style="background:linear-gradient(135deg,#3b82f6,#06b6d4);">AV</div>
      <div><div class="m-name">Ana Vasquez</div><div class="m-role">Frontend Dev</div></div>
    </div>
  </div>
  <div class="masonry-card">
    <p class="m-text">Clean, well-organized, and the dark theme is easy on the eyes during late-night coding sessions.</p>
    <div class="m-author">
      <div class="m-avatar" style="background:linear-gradient(135deg,#8b5cf6,#ec4899);">MR</div>
      <div><div class="m-name">Mike Ross</div><div class="m-role">Hobbyist</div></div>
    </div>
  </div>
  <div class="masonry-card">
    <p class="m-text">As a self-taught developer, I struggled with CSS for years. This playground gave me the mental model I was missing. Now I can look at any layout and immediately know which CSS approach to use.</p>
    <div class="m-author">
      <div class="m-avatar" style="background:linear-gradient(135deg,#10b981,#3b82f6);">SL</div>
      <div><div class="m-name">Sophie Liu</div><div class="m-role">Indie Hacker</div></div>
    </div>
  </div>
  <div class="masonry-card">
    <p class="m-text">Responsive design clicked for me after 20 minutes with this tool. Best learning resource of 2025.</p>
    <div class="m-author">
      <div class="m-avatar" style="background:linear-gradient(135deg,#ef4444,#f59e0b);">BN</div>
      <div><div class="m-name">Ben Nakamura</div><div class="m-role">CS Major</div></div>
    </div>
  </div>
  <div class="masonry-card">
    <p class="m-text">I used to avoid Grid because it seemed complicated. The playground showed me it's actually simpler than I thought. Now I reach for Grid before Flexbox for page layouts.</p>
    <div class="m-author">
      <div class="m-avatar" style="background:linear-gradient(135deg,#06b6d4,#8b5cf6);">DO</div>
      <div><div class="m-name">Diana Okafor</div><div class="m-role">Web Designer</div></div>
    </div>
  </div>
</div>

body { background: #0c0c14; font-family: 'DM Sans', sans-serif; padding: 32px; }
.masonry {
  columns: 3;
  column-gap: 20px;
}
.masonry-card {
  break-inside: avoid;
  margin-bottom: 20px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 24px;
}
.m-text {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.65);
  margin-bottom: 16px;
}
.m-author { display: flex; align-items: center; gap: 10px; }
.m-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.m-name { font-size: 13px; font-weight: 600; color: #fff; }
.m-role { font-size: 11px; color: rgba(255,255,255,.3); }
@media (max-width: 1024px) { .masonry { columns: 2; } }
@media (max-width: 640px)  { .masonry { columns: 1; } }

<div class="inline-list">
  <div class="inline-item">
    <div class="inline-num">01</div>
    <div class="inline-body">
      <p class="i-text">The Visual Playground is the resource I wish existed when I was learning CSS. It would have saved me six months of confusion and frustration.</p>
      <div class="i-author">Rachel Green <span class="i-role">&mdash; Senior Developer, Shopify</span></div>
    </div>
  </div>
  <div class="inline-item">
    <div class="inline-num">02</div>
    <div class="inline-body">
      <p class="i-text">I've tried Codecademy, freeCodeCamp, and YouTube. This playground is the first thing that made CSS positioning actually make sense to me.</p>
      <div class="i-author">Omar Farouk <span class="i-role">&mdash; Student, Community College</span></div>
    </div>
  </div>
  <div class="inline-item">
    <div class="inline-num">03</div>
    <div class="inline-body">
      <p class="i-text">Elegant, focused, and practical. Every example solves a real problem I've actually encountered in production. No filler content.</p>
      <div class="i-author">Yuki Tanaka <span class="i-role">&mdash; Tech Lead, Vercel</span></div>
    </div>
  </div>
</div>

body { background: #0c0c14; font-family: 'DM Sans', sans-serif; padding: 32px; }
.inline-list { display: flex; flex-direction: column; gap: 0; }
.inline-item {
  display: flex; align-items: flex-start; gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.inline-item:last-child { border-bottom: none; }
.inline-num {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 32px;
  color: rgba(245,158,11,.2);
  flex-shrink: 0;
  width: 48px;
  text-align: right;
  line-height: 1.2;
}
.inline-body { flex: 1; }
.i-text {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,.65);
  margin-bottom: 10px;
}
.i-author { font-size: 13px; font-weight: 600; color: #fff; }
.i-role { font-size: 12px; color: rgba(255,255,255,.3); font-weight: 400; }

<div class="gradient-grid">
  <div class="gradient-card">
    <div class="gradient-card-inner">
      <div class="g-icon">&#9889;</div>
      <p class="g-text">Lightning fast to get started. I opened the playground, tweaked a flexbox demo, and immediately understood how flex-wrap works. No setup, no signup &mdash; just learning.</p>
      <div class="g-footer">
        <div>
          <div class="g-name">Alex Rivera</div>
          <div class="g-role">Startup Founder</div>
        </div>
        <div class="g-rating"><span class="star">&#9733;</span><span class="star">&#9733;</span><span class="star">&#9733;</span><span class="star">&#9733;</span><span class="star">&#9733;</span></div>
      </div>
    </div>
  </div>
  <div class="gradient-card" style="background:linear-gradient(135deg,#3b82f6,#06b6d4,#10b981);">
    <div class="gradient-card-inner">
      <div class="g-icon">&#127912;</div>
      <p class="g-text">As a designer transitioning to code, the Visual Playground bridged the gap perfectly. I can see exactly how CSS properties map to visual outcomes.</p>
      <div class="g-footer">
        <div>
          <div class="g-name">Mia Johansson</div>
          <div class="g-role">UI/UX Designer</div>
        </div>
        <div class="g-rating"><span class="star">&#9733;</span><span class="star">&#9733;</span><span class="star">&#9733;</span><span class="star">&#9733;</span><span class="star">&#9733;</span></div>
      </div>
    </div>
  </div>
  <div class="gradient-card" style="background:linear-gradient(135deg,#ec4899,#8b5cf6,#3b82f6);">
    <div class="gradient-card-inner">
      <div class="g-icon">&#128640;</div>
      <p class="g-text">Went from zero CSS knowledge to building my portfolio site in two weeks. The structured progression from basics to grid to responsive design is perfect.</p>
      <div class="g-footer">
        <div>
          <div class="g-name">Jordan Blake</div>
          <div class="g-role">Career Changer</div>
        </div>
        <div class="g-rating"><span class="star">&#9733;</span><span class="star">&#9733;</span><span class="star">&#9733;</span><span class="star">&#9733;</span><span class="star">&#9733;</span></div>
      </div>
    </div>
  </div>
</div>

body { background: #0c0c14; font-family: 'DM Sans', sans-serif; padding: 32px; }
.gradient-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.gradient-card {
  position: relative;
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(135deg, #f59e0b, #ef4444, #8b5cf6);
}
.gradient-card-inner {
  background: #0c0c14;
  border-radius: 14px;
  padding: 32px;
  height: 100%;
}
.g-icon { font-size: 28px; margin-bottom: 16px; }
.g-text {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.7);
  margin-bottom: 20px;
}
.g-footer {
  display: flex; align-items: center; justify-content: space-between;
}
.g-name { font-size: 13px; font-weight: 600; color: #fff; }
.g-role { font-size: 11px; color: rgba(255,255,255,.35); margin-top: 2px; }
.g-rating { display: flex; gap: 2px; }
.g-rating .star { font-size: 14px; color: #f59e0b; }