Design for AIAvatar centralizado
Avatar centralizado: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
MK
Mara Klein
Product designer, Berlin
CSS
.card-010 {
width: 240px;
padding: 28px 20px 24px;
text-align: center;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 18px;
font-family: system-ui,sans-serif;
color: #111827
}
.card-010__avatar {
width: 72px;
height: 72px;
margin: 0 auto 14px;
display: grid;
place-items: center;
border-radius: 50%;
background: linear-gradient(135deg,#fbcfe8,#a855f7);
color: #fff;
font-weight: 700;
font-size: 22px;
box-shadow: 0 0 0 4px #fff,0 0 0 6px #e9d5ff
}
.card-010 h3 {
margin: 0;
font-size: 17px
}
.card-010 p {
margin: 4px 0 16px;
font-size: 13px;
color: #6b7280
}
.card-010 button {
padding: 8px 22px;
border: 1px solid #111827;
border-radius: 999px;
background: #111827;
color: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background .15s,color .15s
}
.card-010 button:hover {
background: #fff;
color: #111827
}
.card-010 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<article class="card-010">
<div class="card-010__avatar">MK</div>
<h3>Mara Klein</h3>
<p>Product designer, Berlin</p>
<button>Follow</button>
</article>Prompt
Construa um card de perfil centralizado de 240px: branco, borda de 1px #e5e7eb, raio de 18px, padding superior de 28px. Um avatar circular de 72px com as iniciais "MK" em 22px bold branco sobre um gradiente de 135deg #fbcfe8 para #a855f7, cercado por um espaço branco de 4px e um anel de 2px #e9d5ff via box-shadow. Abaixo: nome 17px #111827, cargo 13px #6b7280 e um botão pílula preto "Follow" (#111827) que inverte para branco com texto preto no hover.