# Kursfortschritt (C 083)

Kategorie: Cards  
Tags: course, learning, progress, image-top, light  
Seite: https://designforai.dev/de/snippet/card-083

## Prompt

Baue eine 290px Kurs-Card: weiß, 1px #e5e7eb Rahmen, 16px Radius. Oben ein 130px Schiefer-Gradient (#1e293b zu #334155) mit einer durchscheinenden weißen Pille "12 lessons" (rgba Weiß 15%, blur) in der unteren rechten Ecke. Body: 17px Titel, 13px #6b7280 Beschreibung, eine 8px Pillen-Fortschrittsspur auf #f1f5f9, zu 58% mit einem grünen Gradient #22c55e zu #16a34a gefüllt (rückt beim Hover auf 62%), und eine 12px Bildunterschrift "7 of 12 complete · 58%".

## HTML

```html
<article class="card-083">
  <div class="card-083__img"><span>12 lessons</span></div>
  <div class="card-083__body">
    <h3>Modern CSS layout</h3>
    <p>Grid, subgrid, container queries and :has() in real projects.</p>
    <div class="card-083__bar"><i style="--w:58%"></i></div>
    <small>7 of 12 complete · 58%</small>
  </div>
</article>
```

## CSS

```css
.card-083 {
  width: 290px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  font-family: system-ui,sans-serif;
  color: #111827
}
.card-083__img {
  position: relative;
  height: 130px;
  background: linear-gradient(135deg,#1e293b,#334155)
}
.card-083__img span {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(4px)
}
.card-083__body {
  padding: 16px 18px 18px
}
.card-083 h3 {
  margin: 0 0 4px;
  font-size: 17px
}
.card-083 p {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280
}
.card-083__bar {
  height: 8px;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden
}
.card-083__bar i {
  display: block;
  width: var(--w,0);
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg,#22c55e,#16a34a);
  transition: width .4s
}
.card-083:hover .card-083__bar i {
  width: 62%
}
.card-083 small {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280
}
```