Botella térmica 750 ml
Mantiene el frío 24 h y el calor 12 h.
34,90 €
HTML + CSSCartes
Fiche produit avec choix de couleur
Une gourde flotte sur un cercle coloré ; choisir une autre finition change la gourde et le fond.
Réglages
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>Gourde isotherme 750 ml</h3><p>Garde le froid 24 h et le chaud 12 h.</p><fieldset><legend>Finition</legend><label style="--c:#2f8f6b"><input type="radio" name="uv-kpc" checked><span aria-label="Sauge"></span></label><label style="--c:#e9785a"><input type="radio" name="uv-kpc"><span aria-label="Corail"></span></label><label style="--c:#4a6cf7"><input type="radio" name="uv-kpc"><span aria-label="Océan"></span></label><label style="--c:#1f2937"><input type="radio" name="uv-kpc"><span aria-label="Graphite"></span></label></fieldset><div class="ft"><b>34,90 €</b><button type="button">Ajouter</button></div></div></article>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Cartes
Voir tout : CartesOù l’utiliser
Les boutiques en ligne vendent mieux quand on voit la variante choisie, pas seulement son nom. Cette carte dessine en CSS une gourde isotherme qui flotte doucement sur un cercle ; quatre pastilles de finition en dessous recolorent à la fois la gourde et le cercle avec une transition douce. Prix et bouton d'ajout complètent la carte.
Les pastilles sont des boutons radio natifs, la finition choisie part donc avec le formulaire. Remplace la gourde dessinée par une photo détourée du produit.