Notas del perfume

Notas de salida 15 min

Notas de corazón 4 h

Notas de fondo 8 h

Notas elegidas:

HTML + CSSFiltres

Pyramide olfactive

Les notes d'un parfum en pyramide tête, cœur et fond : chaque étage de verre s'allume et s'évapore quand on choisit.

Réglages

16px
1x

Code

<fieldset class="uvq05-sp"><legend>Notes du parfum</legend><div class="rw r1"><span class="sl" aria-hidden="true"></span><div class="nb"><p class="tr"><b>Notes de tête</b> <span>15 min</span></p><div class="cs"><label><input type="checkbox" checked><span>Bergamote</span></label><label><input type="checkbox"><span>Citron</span></label><label><input type="checkbox"><span>Baies roses</span></label></div></div></div><div class="rw r2"><span class="sl" aria-hidden="true"></span><div class="nb"><p class="tr"><b>Notes de cœur</b> <span>4 h</span></p><div class="cs"><label><input type="checkbox" checked><span>Rose</span></label><label><input type="checkbox"><span>Iris</span></label><label><input type="checkbox"><span>Lavande</span></label></div></div></div><div class="rw r3"><span class="sl" aria-hidden="true"></span><div class="nb"><p class="tr"><b>Notes de fond</b> <span>8 h</span></p><div class="cs"><label><input type="checkbox"><span>Vanille</span></label><label><input type="checkbox"><span>Ambre</span></label><label><input type="checkbox" checked><span>Santal</span></label></div></div></div><p class="ct"><span>Notes choisies :</span> <span class="n"></span></p></fieldset>

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.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Filtres

Voir tout : Filtres

Où l’utiliser

Les parfumeurs décrivent une fragrance comme une pyramide de notes de tête, de cœur et de fond qui s'effacent à des rythmes différents, et ce filtre reprend cette structure. Chaque étage est une tranche de verre découpée à côté de ses puces ; cocher une note allume son étage et libère des particules qui montent vite en haut et lentement à la base. Le tout en CSS.

La première couleur teinte la tête et le cœur, la seconde le fond, de l'ambre à la prune. Remplace les notes et les durées par ton propre catalogue et utilise-le pour une parfumerie, une marque de bougies ou des mélanges de thé.