Шаг 20: Мини‑карточка курса на CSS

Собираем карточку: Flexbox, тени, скругления, адаптивность. Это база для каталога курсов.

Код примера

<style>
  .course-card {
    border: 1px solid #ddd; border-radius: 8px; padding: 16px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    max-width: 320px;
  }
  @media (max-width: 600px) { .course-card { max-width: 100%; } }
</style>
<div class="course-card">
  <h3>Курс по CSS</h3>
  <p>Изучим Flexbox, Grid, адаптивность и анимации.</p>
  <button style="padding:8px 16px; background:#8c6dd1; color:#fff; border:none; border-radius:4px;">Подробнее</button>
</div>