HTML + CSSCartes

Cartouche de console rétro

Une cartouche grise à étiquette pixelisée : un appui l'insère dans la console et l'écran vert démarre avec le logo.

Réglages

16px
1x

Code

<div class="uvq07-crt"><div class="st" aria-hidden="true"><div class="ct"><i class="gr"></i><span class="lb"><span class="art"><svg viewBox="0 0 16 10" shape-rendering="crispEdges" aria-hidden="true"><rect width="16" height="10" fill="#8fd3ff"/><rect x="12" y="1" width="2" height="2" fill="#ffe066"/><rect x="2" y="4" width="4" height="2" fill="#3b4b7a"/><rect x="3" y="3" width="2" height="1" fill="#3b4b7a"/><rect x="9" y="3" width="5" height="3" fill="#2f3d66"/><rect x="10" y="2" width="3" height="1" fill="#2f3d66"/><rect x="11" y="1" width="1" height="1" fill="#fff"/><rect y="6" width="16" height="4" fill="#4caf50"/><rect y="8" width="16" height="2" fill="#3a8a3e"/><rect x="6" y="5" width="1" height="1" fill="#ffcc99"/><rect x="6" y="6" width="1" height="2" fill="#e53935"/></svg></span><b>Aventure à Pixelia</b></span></div><div class="cn"><i class="sl"></i><span class="scr"><b>PIXELIA</b><span class="ps">Appuie sur START</span></span><i class="pw"></i><i class="dp"></i><i class="ab"></i></div></div><button type="button" aria-pressed="false" data-a="Insérer la cartouche" data-b="Éjecter la cartouche">Insérer la cartouche</button></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.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Cartes

Voir tout : Cartes

Où l’utiliser

Une carte nostalgique pour les jeux et les lancements créatifs. La cartouche a ses stries de préhension, son coin coupé et une étiquette en pixel art dessinée en SVG net ; à l'insertion elle glisse derrière le boîtier, l'écran vert s'allume, le logo descend par paliers et l'invite de démarrage clignote. Pour fiches de jeux, hackathons, boutiques rétro et clins d'œil de portfolio.

La couleur principale est l'étiquette et les boutons de la console, la seconde l'écran. Change le titre, redessine la scène de 16 sur 10 pixels et appuie de nouveau pour l'éjecter.