# Progresso do curso (C 083)

Categoria: Cards  
Tags: course, learning, progress, image-top, light  
Página: https://designforai.dev/pt/snippet/card-083

## Prompt

Construa um card de curso de 290px: branco, borda de 1px #e5e7eb, raio de 16px. No topo um gradiente ardósia de 130px (#1e293b para #334155) com uma pílula branca translúcida "12 lessons" (branco rgba a 15%, blur) no canto inferior direito. Corpo: título 17px, descrição 13px #6b7280, uma trilha de progresso em pílula de 8px sobre #f1f5f9 preenchida 58% com gradiente verde #22c55e para #16a34a (avança para 62% no hover), e uma legenda 12px "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
}
```