# Poster mit Sticker-Tag (C 033)

Kategorie: Cards  
Tags: brutalist, neo-brutalist, image-top, sticker, hard-shadow  
Seite: https://designforai.dev/de/snippet/card-033

## Prompt

Erstelle eine neo-brutalistische 260px Bild-Card: weiß, 3px durchgezogener #111 Rahmen, 6px 6px 0 #111 harter Schatten, der beim Hover auf 10px 10px wächst, während die Card 2px nach oben links rückt. Oben: 160px Bildbereich mit 3px unterem Rahmen und einem -45deg wiederholten Streifenmuster in Pink #ff90e8 und Weiß (12px Bänder), mit einem schwarzen Sticker-Tag "HOT", um 6deg gedreht, der über die rechte Kante hängt. Darunter: 19px Versalien-Titel in 900er Schnitt und eine 13px semibold Detailzeile.

## HTML

```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>
```

## CSS

```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
}
```