MÚSICA Y BANDAS · Tailwind · HTML · Vanilla JS

LiraNova – Tienda online de música y merchandising

★★★★★4,7 3.498 descargas

Theme completo para LiraNova, tienda online de música y merchandising, creado con HTML, Tailwind CSS CDN y JavaScript puro. Incluye hero a pantalla completa, grid de productos, carrusel de álbumes y footer con branding de Design Prompting. Ideal para sitios de venta de discos, merch y contenido musical.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web completo para la marca ficticia LiraNova (tienda online de música y merchandising) usando solo HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. Reproduce fielmente la estructura y estilo del sitio analizado: 
- **Paleta de colores**: fondo oscuro #0a0a0a, texto principal #f5f5f5, acentos #ff6b6b, botones #1e90ff, bordes #333333. 
- **Tipografía**: "Inter", sans‑serif para cuerpo; "Poppins" para encabezados. 
- **Header**: barra fija con logo SVG (placeholder), menú horizontal con dropdowns (Demos, About, Albums, Store, All Pages) y botón de carrito que muestra cantidad. En versión móvil colapsa en icono hamburguesa y botón "Listen now" con líneas decorativas. 
- **Home sections**: 
  1. **Hero**: sección a pantalla completa con fondo de imagen difusa, título grande (h1) en Poppins, subtítulo, y botón principal estilo "Listen now" con ícono de flecha. 
  2. **Productos destacados**: grid 4‑col en desktop, 2‑col en tablet, 1‑col en móvil; tarjetas con imagen, nombre, precio y botón "Añadir". 
  3. **Colección de álbumes**: carousel básico con botones prev/next, tarjetas con hover que muestra botón "Ver álbum". 
  4. **Newsletter**: fondo ligeramente más claro #1a1a1a, texto invitando a suscribirse, campo de email y botón con color acento. 
  5. **Footer**: zona gris oscuro #111, columnas: Navegación (links principales), Recursos (FAQ, Contact, Blog), Redes sociales (iconos placeholder), y datos de contacto (email, dirección). 
- **Páginas adicionales**: About Us, Store, Product Detail, News, Contact Us, cada una con header y footer idénticos y contenido estructurado según la tabla. Utiliza componentes reutilizables (navbar, card, footer) y añade interactividad mínima: dropdowns con `mouseenter`/`mouseleave`, toggle de menú móvil, apertura/cierre del carrito modal (solo contador visual), y carousel con `setInterval`. 
- **Requisitos técnicos**: incluye `<script src="https://cdn.tailwindcss.com"></script>` al inicio, carga fuentes de Google, asegura que todo el CSS sea utilitario Tailwind, evita cualquier dependencia externa. Usa atributos `data-` para facilitar futuros enlaces a CMS, pero sin lógica de backend. El resultado debe estar listo para ser copiado como un único archivo `index.html` y funcionar offline.

---

## Instrucción obligatoria — Footer

Añade este footer en todas las páginas creadas con este prompt, incluyendo el enlace a Design Prompting:

```html
<footer>
  <p>
    Diseñado con ayuda de 
    <a href="https://www.designprompting.com/" target="_blank" rel="noopener noreferrer">
      Design Prompting
    </a>
  </p>
</footer>
```

2.624 caracteres · 29 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra de navegación fija con logo, menú desplegable y carrito.
2.1 Hero principal con imagen de fondo, título, subtítulo y botón de escucha.
3.1 Bloque de productos destacados en grid responsive.
4.1 Sección de colección de álbumes con tarjetas y hover.
5.1 Newsletter con campo de captura y botón.
6.1 Footer con enlaces de navegación, redes sociales y datos de contacto.

ABOUT US

1.1 Header heredado.
2.1 Imagen y texto descriptivo de la marca.
3.1 Equipo y valores en tarjetas.
4.1 Footer heredado.

STORE

1.1 Header heredado.
2.1 Grid de productos con imágenes, nombre, precio y botón "Añadir".
3.1 Filtros laterales (categoría, precio).
4.1 Footer heredado.

PRODUCT DETAIL

1.1 Header heredado.
2.1 Imagen principal del producto y galería secundaria.
3.1 Descripción, precio y selector de variantes.
4.1 Botón de compra y sección de productos relacionados.
5.1 Footer heredado.

NEWS

1.1 Header heredado.
2.1 Listado de entradas con imagen, título y extracto.
3.1 Paginación.
4.1 Footer heredado.

CONTACT US

1.1 Header heredado.
2.1 Formulario de contacto (nombre, email, mensaje).
3.1 Mapa incrustado y datos de empresa.
4.1 Footer heredado.

PROMPTS RELACIONADOS · MÚSICA Y BANDAS

Otros prompts de la misma categoría

Ficha de marca

Nombre: LiraNova
Sector: Tienda online de música y merchandising
Claim: Explora sonidos y arte en un solo lugar

Bloques de la home

1.1 Barra de navegación fija con logo, menú desplegable y carrito.
2.1 Hero principal con imagen de fondo, título, subtítulo y botón de escucha.
3.1 Bloque de productos destacados en grid responsive.
4.1 Sección de colección de álbumes con tarjetas y hover.
5.1 Newsletter con campo de captura y botón.
6.1 Footer con enlaces de navegación, redes sociales y datos de contacto.

Crea tu propia Skill

Genera una Skill personalizada para Claude AI en minutos. Sin código.

Empezar ahora ↗

← Volver al catálogo ↗ Crea tu Skill personalizada