Design for AIProgreso de curso
Progreso de curso: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
12 lessons
Modern CSS layout
Grid, subgrid, container queries and :has() in real projects.
7 of 12 complete · 58%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
}
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>Prompt
Construye una tarjeta de curso de 290px: blanca, borde 1px #e5e7eb, radio 16px. Arriba un degradado pizarra de 130px (#1e293b a #334155) con una píldora blanca translúcida "12 lessons" (blanco rgba al 15%, blur) en la esquina inferior derecha. Cuerpo: título 17px, descripción 13px #6b7280, una pista de progreso píldora de 8px sobre #f1f5f9 rellena al 58% con un degradado verde de #22c55e a #16a34a (se mueve al 62% en hover), y una leyenda 12px "7 of 12 complete · 58%".