Gradient Header Course Card

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="course-card-569"><div class="header-banner"><span class="bookmark">🔖</span></div><div class="body"><h5>Meeting your Colleagues</h5><span class="sub">6 Video • 40 min</span><div class="tag">✈️ Business Trip</div></div></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.course-card-569 { width: 180px; background: #ffffff; border-radius: 20px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,0.08); font-family: system-ui, sans-serif; margin: auto; transition: transform 0.3s; cursor: pointer; }
.course-card-569:hover { transform: translateY(-4px); }
.course-card-569 .header-banner { height: 110px; background: linear-gradient(135deg, #f43f5e 0%, #a855f7 100%); position: relative; padding: 10px; box-sizing: border-box; }
.course-card-569 .bookmark { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.8); backdrop-filter: blur(4px); padding: 4px 6px; border-radius: 50%; font-size: 10px; }
.course-card-569 .body { padding: 12px; }
.course-card-569 h5 { margin: 0; font-size: 11px; font-weight: 800; color: #0f172a; }
.course-card-569 .sub { font-size: 8px; color: #94a3b8; display: block; margin: 3px 0 8px; font-weight: 600; }
.course-card-569 .tag { display: inline-block; background: #ccfbf1; color: #0d9488; font-size: 8px; font-weight: 700; padding: 4px 8px; border-radius: 6px; }