Design for AIProgresso do curso
Progresso do curso: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
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
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%".