EVENTOS · Claude Design · HTML

FiestaMágica — Prompt de diseño web para Claude AI

★★★★★4,6 3.553 descargas

Alquiler y organización de eventos temáticos Todo lo que necesitas para una celebración inolvidable.

↓ 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 "FiestaMágica" (dominio fiestamagica.com) siguiendo el estilo visual y la estructura de la plantilla analizada. Usa únicamente HTML, Tailwind CSS (CDN) y JavaScript vanilla en un único archivo. 

**Paleta de colores**: 
- Primario: #FF6F61 (coral vibrante) 
- Secundario: #2C3E50 (azul marino profundo) 
- Fondo claro: #F9FAFB (gris muy claro) 
- Texto principal: #1F2937 (gris oscuro) 
- Accento: #FFC107 (amarillo dorado) 

**Tipografía**: 
- Heading: 'Poppins', sans‑serif (weights 600‑700) 
- Body: 'Inter', sans‑serif (weights 400‑500) 

**Header**: barra fija superior, logo a la izquierda (SVG placeholder), menú de navegación con items: Home, About, Services, Events, Gallery, Shop, Contact. Cada item con dropdown mega‑menu similar al original (columna de enlaces y enlaces dinámicos). Botón de carrito a la derecha con contador de artículos. En móvil, colapsa en hamburguesa que despliega el mismo menú.

**Hero**: sección a pantalla completa con fondo degradado coral‑azul, título grande (h1) "Celebra sin límites", subtítulo breve, botón principal azul marino con texto blanco "Descubre nuestras fiestas". Imagen decorativa a la derecha.

**Bloque 1 – Ventajas**: tres columnas, cada una con ícono circular (svg placeholder), título corto y párrafo descriptivo.

**Bloque 2 – Galería de eventos**: grid de 3 columnas, tarjetas con imagen de evento, overlay con título y botón "Ver detalle". Hover con sutil zoom.

**Bloque 3 – Servicios**: tarjetas horizontales, ícono, título, texto, botón secundario "Más info".

**Bloque 4 – Testimonios**: carrusel simple (JS) con citas, foto circular y nombre.

**Bloque 5 – CTA reserva**: banda ancha con fondo coral, texto centrado y botón "Reserva ahora".

**Footer**: fondo azul marino, columnas: Navegación (enlaces principales), Servicios, Contacto (email, teléfono, dirección), Redes sociales (iconos). Texto pequeño con copyright.

**Páginas adicionales** (solo estructura, sin contenido extenso): About, Services, Events, Gallery, Shop, Cart (modal), Contact. Cada una con encabezado interno y bloques descritos en la tabla.

**Requisitos técnicos**:
- Incluye el CDN de Tailwind v3.3 al <head>.
- Usa clases utilitarias de Tailwind para espaciado, tipografía y colores.
- Implementa el menú dropdown y el carrusel con JavaScript puro (sin libs). 
- El carrito debe abrirse como modal overlay que muestra items, cantidades, subtotal y botón "Proceder al pago".
- Todas las imágenes usan placeholders (https://via.placeholder.com) y tienen atributos alt descriptivos.
- Asegura accesibilidad: roles ARIA, focus outlines, contraste suficiente.
- El HTML debe ser semántico (header, nav, main, section, article, footer).
- No utilizar ningún texto del sitio original; generar contenido original en español de España.

Entrega el código completo listo para copiar‑pegar en un archivo index.html.

---

## 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>
```

3.244 caracteres · 59 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera fija con logo, menú mega‑dropdown y botón de carrito
1.2 Hero con título, subtítulo y CTA principal
1.3 Bloque de 3 columnas de ventajas (icono, título, texto)
1.4 Galería de eventos destacados (grid + hover)
1.5 Servicios destacados (icono + título + descripción)
1.6 Testimonios (citas con foto y nombre)
1.7 CTA secundaria: "Reserva tu fiesta ahora"
1.8 Footer con enlaces, redes sociales y datos de contacto

ABOUT US

2.1 Hero interno con título y foto de fondo
2.2 Historia de la empresa (texto + imagen)
2.3 Equipo (tarjetas con foto, nombre y rol)
2.4 Valores (iconos y breves descripciones)
2.5 CTA a contacto

SERVICES

3.1 Lista de servicios en tarjetas con icono, título y breve descripción
3.2 Modal de detalle de servicio (imagen, texto, botón de reserva)

EVENTS

4.1 Calendario de eventos próximos (tarjeta con fecha, lugar y CTA)
4.2 Detalle de evento (galería, descripción, formulario de reserva)

GALLERY

5.1 Grid de imágenes filtrable por categoría
5.2 Lightbox al hacer clic

SHOP

6.1 Lista de productos (tarjeta con imagen, nombre, precio y botón "Añadir al carrito")
6.2 Página de producto individual (galería, descripción, selector de variantes, botón de compra)

CART (modal)

7.1 Vista del carrito con items, cantidades, subtotales y botón de checkout

CONTACT US

8.1 Formulario de contacto (nombre, email, mensaje, botón enviar)
8.2 Mapa incrustado y datos de contacto

PROMPTS RELACIONADOS · EVENTOS

Otros prompts de la misma categoría

Ficha de marca

Nombre: FiestaMágica
Sector: Alquiler y organización de eventos temáticos
Claim: Todo lo que necesitas para una celebración inolvidable

Bloques de la home

1.1 Cabecera fija con logo, menú mega‑dropdown y botón de carrito
1.2 Hero con título destacado, descripción breve y botón principal
1.3 Bloque de características rápidas en tres columnas
1.4 Galería de eventos destacados en carrusel
1.5 Sección de servicios con iconos y texto
1.6 Testimonios en tarjetas horizontales
1.7 Llamada a la acción para reservar una fiesta
1.8 Footer con enlaces de navegación, redes 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