14nov
Concierto
Noche de jazz en el puerto
21:00, Muelle 2 (Valencia)
00días00horas00min00seg
HTML + CSSCartes
Événement avec compte à rebours
Une carte de concert avec sa date, des chiffres qui tournent chaque seconde et un bouton pour l'agenda.
Réglages
16px
1x
12
Code
<article class="uv-kec"><div class="hd"><span class="dt"><b>14</b><span>nov.</span></span><div><p class="kd">Concert</p><h3>Soirée jazz sur le port</h3><p class="pl">21 h, quai 2 (Valence)</p></div></div><div class="cd" aria-live="off"><span class="u"><b data-k="d">00</b><span>jours</span></span><span class="u"><b data-k="h">00</b><span>heures</span></span><span class="u"><b data-k="m">00</b><span>min</span></span><span class="u"><b data-k="s">00</b><span>s</span></span></div><button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="5" width="17" height="15" rx="2.5"/><path d="M3.5 10h17M8 3v4M16 3v4M12 13v4M10 15h4"/></svg>Ajouter à l’agenda</button></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 comptes à rebours créent l'urgence pour les lancements, concerts, webinaires et soldes. Cette carte nocturne affiche la date dans une petite tuile, le nom et le lieu de l'événement, et quatre compteurs pour jours, heures, minutes et secondes ; chaque chiffre arrive avec une courte rotation 3D. Un bouton vif l'ajoute à l'agenda.
Règle le nombre de jours restants avec le curseur supplémentaire ou remplace la date de fin dans le script. La rotation respecte le mouvement réduit.