Design for AIPóster con pegatina
Póster con pegatina: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
Hot
Poster workshop
Sat 14:00 · Studio B
CSS
.card-033 {
width: 260px;
background: #fff;
border: 3px solid #111;
box-shadow: 6px 6px 0 #111;
font-family: system-ui,sans-serif;
color: #111;
transition: box-shadow .15s,transform .15s
}
.card-033:hover {
transform: translate(-2px,-2px);
box-shadow: 10px 10px 0 #111
}
.card-033__img {
position: relative;
height: 160px;
border-bottom: 3px solid #111;
background: repeating-linear-gradient(-45deg,#ff90e8 0 12px,#fff 12px 24px)
}
.card-033__img span {
position: absolute;
right: -10px;
top: 12px;
padding: 5px 12px;
background: #111;
color: #fff;
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
transform: rotate(6deg)
}
.card-033 h3 {
margin: 14px 16px 4px;
font-size: 19px;
font-weight: 900;
text-transform: uppercase
}
.card-033 p {
margin: 0 16px 16px;
font-size: 13px;
font-weight: 600
}
HTML
<article class="card-033">
<div class="card-033__img"><span>Hot</span></div>
<h3>Poster workshop</h3>
<p>Sat 14:00 · Studio B</p>
</article>Prompt
Haz una tarjeta de imagen neobrutalista de 260px: blanca, borde sólido 3px #111, sombra dura 6px 6px 0 #111 que crece a 10px 10px mientras la tarjeta se desplaza 2px arriba y a la izquierda en hover. Arriba: zona de imagen de 160px con borde inferior de 3px y un patrón de rayas repetidas a -45deg en rosa #ff90e8 y blanco (bandas de 12px), con una pegatina negra "HOT" rotada 6deg colgando del borde derecho. Debajo: título 19px peso 900 en mayúsculas y una línea de detalle 13px semibold.