Design for AIKursfortschritt
Kursfortschritt: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
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
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%".