Design for AIFita de desconto
Fita de desconto: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
-30%
Studio headphones
$199$285
CSS
.card-023 {
width: 240px;
padding: 12px;
background: #1c1c1e;
border-radius: 18px;
font-family: system-ui,sans-serif;
color: #f5f5f7
}
.card-023__img {
position: relative;
height: 190px;
border-radius: 12px;
overflow: hidden;
background: radial-gradient(circle at 50% 60%,#3a3a3c,#0b0b0c)
}
.card-023__img span {
position: absolute;
top: 14px;
right: -28px;
width: 110px;
padding: 4px 0;
text-align: center;
transform: rotate(45deg);
background: #ff453a;
font-size: 11px;
font-weight: 800
}
.card-023 h3 {
margin: 14px 6px 4px;
font-size: 15px;
font-weight: 600
}
.card-023 p {
margin: 0 6px 12px;
font-size: 15px
}
.card-023 b {
font-size: 18px
}
.card-023 s {
margin-left: 8px;
color: #8e8e93;
font-size: 13px
}
.card-023 button {
width: 100%;
padding: 10px;
border: 0;
border-radius: 10px;
background: #f5f5f7;
color: #1c1c1e;
font-weight: 700;
font-size: 13px;
cursor: pointer;
transition: background .15s,transform .15s
}
.card-023 button:hover {
background: #fff;
transform: translateY(-1px)
}
.card-023 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<article class="card-023">
<div class="card-023__img"><span>-30%</span></div>
<h3>Studio headphones</h3>
<p><b>$199</b><s>$285</s></p>
<button>Buy now</button>
</article>Prompt
Construa um card de produto escuro de 240px sobre #1c1c1e com raio de 18px e padding interno de 12px. Bloco de imagem de 190px, raio de 12px, gradiente radial #3a3a3c para #0b0b0c, com uma fita diagonal vermelha #ff453a "-30%" rotacionada 45deg cruzando o canto superior direito. Abaixo: nome do produto 15px em #f5f5f7, preço 18px bold e um preço antigo riscado em #8e8e93, depois um botão off-white (#f5f5f7) "Buy now" de largura total com raio de 10px que sobe 1px no hover.