Design for AIFaixa de horário
Faixa de horário: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
Frontend after hours
Lightning talks, then pizza. Bring a demo or a question.
CSS
.card-057 {
width: 300px;
padding: 0 0 18px;
background: #111;
border-radius: 16px;
font-family: system-ui,sans-serif;
color: #fafafa;
overflow: hidden
}
.card-057 header {
display: flex;
justify-content: space-between;
padding: 12px 20px;
background: linear-gradient(90deg,#f59e0b,#ef4444);
color: #111;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em
}
.card-057 h3 {
margin: 16px 20px 6px;
font-size: 20px
}
.card-057 p {
margin: 0 20px 16px;
font-size: 14px;
line-height: 1.5;
color: #a3a3a3
}
.card-057 footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px
}
.card-057__loc {
font-size: 12px;
color: #d4d4d4;
padding: 4px 10px;
border: 1px solid #333;
border-radius: 999px
}
.card-057 button {
padding: 8px 18px;
border: 0;
border-radius: 8px;
background: #fafafa;
color: #111;
font-weight: 700;
font-size: 13px;
cursor: pointer;
transition: background .15s
}
.card-057 button:hover {
background: #f59e0b
}
.card-057 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<article class="card-057">
<header><time>Thu 12 Nov</time><span>19:00 to 21:30</span></header>
<h3>Frontend after hours</h3>
<p>Lightning talks, then pizza. Bring a demo or a question.</p>
<footer><span class="card-057__loc">Online</span><button>RSVP</button></footer>
</article>Prompt
Crie um card de evento escuro de 300px sobre #111 com raio de 16px. Uma faixa superior com gradiente de 90deg #f59e0b para #ef4444 contém a data "Thu 12 Nov" à esquerda e o horário "19:00 to 21:30" à direita em caixa alta 12px bold #111. Abaixo: título branco 20px, descrição 14px #a3a3a3, e uma linha de rodapé com uma pequena pílula contornada "Online" (borda de 1px #333) e um botão RSVP off-white que fica âmbar #f59e0b no hover.