Verano en Lisboa
Los Marinos · 1974
HTML + CSSCards
Vinyl sliding out of its sleeve
A seventies record sleeve: on hover the vinyl rolls halfway out, and pressing play spins the label with a small equalizer.
Settings
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>Summer in Lisbon</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="Play"><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 for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Cards
See all CardsWhere to use it
A record card for music sites that want more than a square cover. The sleeve art is a sunrise of concentric CSS stripes, the disc uses repeating radial gradients for the grooves and a fixed sheen, and hovering slides it out while it rolls. Good for album pages, playlists, label catalogs and listening-party invitations.
The main color sets the outer stripe, the label and the play button; the second color is the inner sun. Swap the initials on the sleeve and the title, and line several cards up as a record shelf.