¿A dónde viajamos?
HTML + CSSCartes
Pile de cartes à faire glisser
Fais glisser la carte du dessus sur le côté et elle s'envole ; les boutons j'aime et passer font pareil.
Réglages
16px
1x
Code
<div class="uv-ksd"><p class="ti">On part où ?</p><div class="dk"><article style="--g:#ff9a8b,#ff6a88"><span class="ph"></span><b>Kyoto</b><span>Japon</span><i class="nope">Je passe</i><i class="like">J’aime</i></article><article style="--g:#ffd36e,#f79d5c"><span class="ph"></span><b>Lisbonne</b><span>Portugal</span><i class="nope">Je passe</i><i class="like">J’aime</i></article><article style="--g:#89f7fe,#66a6ff"><span class="ph"></span><b>Islande</b><span>Ring Road</span><i class="nope">Je passe</i><i class="like">J’aime</i></article><article style="--g:#f6d365,#fda085"><span class="ph"></span><b>Marrakech</b><span>Maroc</span><i class="nope">Je passe</i><i class="like">J’aime</i></article></div><div class="bt"><button type="button" class="no" aria-label="Écarter"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button><button type="button" class="ys" aria-label="J’aime"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"/></svg></button></div></div>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 piles de cartes à faire glisser transforment le choix en jeu, d'où leur succès dans les applis de rencontres, de voyage et de recettes. Fais glisser la carte du dessus : elle suit le doigt avec une légère rotation pendant qu'un tampon j'aime ou passer apparaît ; au-delà d'un seuil, elle s'envole et repasse sous la pile, sinon elle revient en place.
Deux boutons ronds en dessous font la même chose à la souris et au clavier. Les cartes sont de simples articles, remplace-les par tes photos ou profils.