Botella térmica 750 ml
Mantiene el frío 24 h y el calor 12 h.
34,90 €
HTML + CSSKarten
Produktkarte mit Farbauswahl
Eine Flasche schwebt über einem farbigen Kreis; ein anderes Finish färbt Flasche und Hintergrund um.
Einstellungen
16px
1x
Code
<article class="uv-kpc" style="--p:#2f8f6b"><div class="st"><i class="bg"></i><span class="bt"><i class="cp"></i><i class="bd"></i><i class="lb"></i></span><i class="sh"></i></div><div class="tx"><h3>Thermoflasche 750 ml</h3><p>Hält 24 h kalt und 12 h warm.</p><fieldset><legend>Finish</legend><label style="--c:#2f8f6b"><input type="radio" name="uv-kpc" checked><span aria-label="Salbei"></span></label><label style="--c:#e9785a"><input type="radio" name="uv-kpc"><span aria-label="Koralle"></span></label><label style="--c:#4a6cf7"><input type="radio" name="uv-kpc"><span aria-label="Ozean"></span></label><label style="--c:#1f2937"><input type="radio" name="uv-kpc"><span aria-label="Graphit"></span></label></fieldset><div class="ft"><b>34,90 €</b><button type="button">Hinzufügen</button></div></div></article>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Karten
Alle ansehen: KartenWofür du ihn nutzen kannst
Onlineshops verkaufen mehr, wenn man die gewählte Variante sieht und nicht nur ihren Namen. Diese Karte zeichnet eine Thermoflasche in CSS, die sanft über einem Kreis schwebt. Vier Farbmuster darunter färben Flasche und Kreis gleichzeitig mit weichem Übergang um. Preis und Hinzufügen-Button runden die Karte ab.
Die Muster sind native Radiobuttons, das gewählte Finish wird also mit dem Formular gesendet und funktioniert per Tastatur. Ersetze die gezeichnete Flasche durch ein Produktfoto mit transparentem Hintergrund.