Design for AIGestrichelter Gutscheincode
Gestrichelter Gutscheincode: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
25%off
Launch week deal
Valid on annual plans until Friday.
LAUNCH25
CSS
.card-076 {
display: flex;
width: 340px;
background: #fff;
border: 2px solid #16a34a;
border-radius: 14px;
overflow: hidden;
font-family: system-ui,sans-serif;
color: #14532d
}
.card-076__off {
flex: 0 0 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #16a34a;
color: #fff
}
.card-076__off b {
font-size: 30px;
font-weight: 800;
line-height: 1
}
.card-076__off span {
font-size: 12px;
text-transform: uppercase;
letter-spacing: .1em
}
.card-076__body {
padding: 16px 18px
}
.card-076 h3 {
margin: 0 0 2px;
font-size: 16px
}
.card-076 p {
margin: 0 0 10px;
font-size: 12px;
color: #4d7c0f
}
.card-076 code {
display: inline-block;
padding: 6px 12px;
border: 2px dashed #16a34a;
border-radius: 8px;
background: #f0fdf4;
font-size: 14px;
font-weight: 700;
letter-spacing: .12em;
cursor: copy;
transition: background .15s,color .15s
}
.card-076 code:hover {
background: #16a34a;
color: #fff
}
HTML
<article class="card-076">
<div class="card-076__off"><b>25%</b><span>off</span></div>
<div class="card-076__body">
<h3>Launch week deal</h3>
<p>Valid on annual plans until Friday.</p>
<code>LAUNCH25</code>
</div>
</article>Prompt
Erstelle eine 340px Gutschein-Card: weiß mit 2px grünem #16a34a Rahmen und 14px Radius. Links eine gefüllte grüne 100px Spalte mit einem 30px extra-bold "25%" über einem 12px Versalien "off" in Weiß. Rechter Body: 16px Titel, 12px #4d7c0f Notiz und ein Promo-Code "LAUNCH25" in einer gestrichelten 2px grünen Box auf #f0fdf4 mit weiter Laufweite, die beim Hover zu gefülltem Grün mit weißem Text invertiert (cursor: copy).