Verano en Lisboa
Los Marinos · 1974
HTML + CSSCards
Vinilo que sale de la funda
Una funda de disco setentera: al pasar el ratón el vinilo asoma rodando y al darle a reproducir gira la galleta con un ecualizador.
Ajustes
16px
1x
Código
<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>Verano en Lisboa</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="Reproducir"><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 para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Cards
Ver todos: CardsDónde usarlo
Una tarjeta de disco para webs de música que quieren algo más que una portada cuadrada. La funda es un amanecer de franjas concéntricas en CSS, el disco usa degradados radiales repetidos para los surcos y un brillo fijo, y al pasar el ratón sale rodando. Va bien en fichas de álbum, listas, catálogos de sellos e invitaciones a escuchas.
El color principal marca la franja exterior, la galleta y el botón; el secundario es el sol interior. Cambia las iniciales de la funda y el título, y alinea varias tarjetas como una estantería de discos.