Verano en Lisboa

Los Marinos · 1974

HTML + CSSKarten

Schallplatte, die aus der Hülle gleitet

Eine Plattenhülle im Siebziger-Stil: Beim Überfahren rollt die Platte halb heraus, beim Abspielen dreht sich das Label mit kleinem Equalizer.

Einstellungen

16px
1x

Code

<article class="uvq07-vnl"><div class="st" aria-hidden="true"><span class="rec"><i></i></span><span class="slv"><i class="sun"></i><b>LM</b><small>STEREO</small></span></div><div class="tx"><div><h3>Sommer in Lissabon</h3><p><span class="eq"><i></i><i></i><i></i></span>Los Marinos · 1974</p></div><button type="button" aria-pressed="false" aria-label="Abspielen"><svg class="py" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.5v13l10.5-6.5z" fill="currentColor"/></svg><svg class="pa" viewBox="0 0 24 24" aria-hidden="true"><rect x="6.5" y="5.5" width="3.8" height="13" rx="1" fill="currentColor"/><rect x="13.7" y="5.5" width="3.8" height="13" rx="1" fill="currentColor"/></svg></button></div></article>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Karten

Alle ansehen: Karten

Wofür du ihn nutzen kannst

Eine Plattenkarte für Musikseiten, die mehr wollen als ein quadratisches Cover. Das Hüllenmotiv ist ein Sonnenaufgang aus konzentrischen CSS-Streifen, die Scheibe zeigt Rillen aus wiederholten radialen Verläufen und einen festen Glanz, und beim Überfahren rollt sie heraus. Gut für Albumseiten, Playlists, Labelkataloge und Einladungen zu Listening-Abenden.

Die Hauptfarbe bestimmt den äußeren Streifen, das Label und den Play-Button, die zweite Farbe die innere Sonne. Tausche Initialen und Titel aus und reihe mehrere Karten wie ein Plattenregal auf.