COMERCIO ELECTRÓNICO · Claude Design · HTML

EcoRitmo Fest — Prompt de diseño web para Claude AI

★★★★★4,6 4.264 descargas

Plataforma de venta de entradas y merchandising para festivales y conciertos Conecta la música con tu experiencia.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una página web completa para la marca ficticia EcoRitmo Fest (ecoritmofest.com), sector eventos musicales, usando solo HTML estático, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. Reproduce el diseño visual del sitio analizado: 
- Paleta de colores: fondo negro #000000, acentos morado oscuro #2C0A4D, morado claro #6A0DAD, texto blanco #FFFFFF y gris suave #F2F2F2. 
- Tipografía: "Inter", sans‑serif para todo el texto; títulos con peso 800, cuerpo 400. 
- Header: barra de navegación fija con logo a la izquierda, menú hamburguesa para móvil, enlaces (Home, Lineup, Tickets, About, News, Contact), íconos de teléfono, email, ubicación, carrito con contador, y redes sociales (FB, TW, IG, YT, PT) alineados a la derecha. El carrito abre un dropdown mostrando lista de productos, subtotal y botón "Continuar al checkout". 
- Hero: sección a pantalla completa, fondo de imagen difusa, título grande "EcoRitmo Fest" centrado, subtítulo opcional y botón "Explorar" que ancla a la sección de lineup. 
- Bloque 1.3: grid de 3 columnas con tarjetas informativas (próximo evento, venta de entradas, última noticia), fondo semi‑transparente, íconos y llamado a la acción. 
- Lineup: título "Lineup", grid de 4‑6 columnas según pantalla, cada tarjeta con foto del artista, nombre y botón "Ver detalle". 
- Tickets: título "Tickets", grid de tarjetas con plan de precios, descripción breve y botón "Comprar" que abre un modal simple (simulado). 
- News: título "News", lista de artículos con miniatura, título, extracto y enlace "Leer más". 
- Footer: fondo negro, columnas de enlaces (Información, Soporte, Legal), íconos sociales, dirección, email y teléfono. 
- Todas las secciones deben ser responsivas (mobile‑first). Utiliza clases Tailwind para espaciado, tipografía y colores. Implementa la lógica del carrito: al hacer click en "Agregar al carrito" en cualquier tarjeta de ticket, se incrementa el contador y se añade un item al dropdown (simulado). Incluye script para abrir/cerrar dropdowns y modal del checkout. Mantén el HTML semántico (header, nav, main, section, footer). No incluir contenidos reales; generar textos y nombres de artistas ficticios (ej. "Luna Solar", "Bass & Echo").

---

## 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.553 caracteres · 28 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Navbar con logo, menú hamburguesa, enlaces de navegación, íconos de contacto y redes sociales, carrito desplegable
1.2 Hero con título destacado y fondo a pantalla completa
1.3 Grid de información destacada (próximos eventos, llamadas a la acción)
1.4 Sección de lineup con tarjetas de artistas
1.5 Sección de tickets con tarjetas de precios
1.6 Noticias con lista de artículos
1.7 Footer con enlaces institucionales, redes sociales y datos de contacto

LINEUP

2.1 Cabecera con título "Lineup"
2.2 Grid de tarjetas de artistas, imagen, nombre y botón "Ver detalle"
2.3 Footer reutilizado

TICKETS

3.1 Cabecera con título "Tickets"
3.2 Grid de tarjetas de precios, descripción y botón "Comprar"
3.3 Footer reutilizado

NEWS

4.1 Cabecera con título "News"
4.2 Lista de artículos con imagen, título, breve descripción y enlace "Leer más"
4.3 Footer reutilizado

ABOUT

5.1 Sección con texto institucional y foto de fondo
5.2 Valores y misión en columnas
5.3 Footer reutilizado

CONTACT

6.1 Formulario de contacto (nombre, email, mensaje, botón enviar)
6.2 Mapa incrustado y datos de contacto
6.3 Footer reutilizado

PROMPTS RELACIONADOS · COMERCIO ELECTRÓNICO

Otros prompts de la misma categoría

Ficha de marca

Nombre: EcoRitmo Fest
Sector: Plataforma de venta de entradas y merchandising para festivales y conciertos
Claim: Conecta la música con tu experiencia

Bloques de la home

1.1 Navbar con logo, menú hamburguesa, enlaces de navegación, íconos de contacto y redes sociales, carrito desplegable
1.2 Hero con título destacado y fondo a pantalla completa
1.3 Grid de información destacada (próximos eventos, llamadas a la acción)
1.4 Sección de lineup con tarjetas de artistas
1.5 Sección de tickets con tarjetas de precios
1.6 Noticias con lista de artículos
1.7 Footer con enlaces institucionales, 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