Design for AIBanner-Profil mit Stats
Banner-Profil mit Stats: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
Jonas Ekberg
Builds dashboards nobody hates.
- 128Posts
- 4.2kFollowers
- 310Following
CSS
.card-011 {
width: 280px;
background: #fff;
border-radius: 16px;
overflow: hidden;
text-align: center;
font-family: system-ui,sans-serif;
color: #1f2937;
box-shadow: 0 4px 16px rgba(0,0,0,.08)
}
.card-011__banner {
height: 80px;
background: linear-gradient(90deg,#0ea5e9,#8b5cf6)
}
.card-011__avatar {
width: 68px;
height: 68px;
margin: -34px auto 10px;
border-radius: 50%;
border: 4px solid #fff;
background: linear-gradient(135deg,#fde68a,#f97316)
}
.card-011 h3 {
margin: 0;
font-size: 17px
}
.card-011 p {
margin: 4px 16px 14px;
font-size: 13px;
color: #6b7280
}
.card-011 ul {
display: flex;
margin: 0;
padding: 12px 0;
list-style: none;
border-top: 1px solid #f3f4f6
}
.card-011 li {
flex: 1;
font-size: 12px;
color: #6b7280
}
.card-011 strong {
display: block;
font-size: 15px;
color: #111827
}
HTML
<article class="card-011">
<div class="card-011__banner"></div>
<div class="card-011__avatar"></div>
<h3>Jonas Ekberg</h3>
<p>Builds dashboards nobody hates.</p>
<ul><li><strong>128</strong>Posts</li><li><strong>4.2k</strong>Followers</li><li><strong>310</strong>Following</li></ul>
</article>Prompt
Erstelle eine 280px Profil-Card mit einem 80px Gradient-Banner (90deg #0ea5e9 zu #8b5cf6) und einem 68px runden Avatar, der das Banner zur Hälfte überlappt (negativer oberer Margin), mit 4px weißem Rahmen und einem warmen 135deg Gradient #fde68a zu #f97316 innen. Zentrierter 17px Name und 13px Bio in #6b7280. Unten eine dreispaltige Stats-Zeile, abgetrennt durch einen 1px #f3f4f6 oberen Rahmen: 15px fette Zahlen in #111827 über 12px Labels in #6b7280. Card ist weiß, 16px Radius, Schatten 0 4px 16px rgba(0,0,0,.08).