ENTRETENIMIENTO · Tailwind CDN · Vanilla JS · Claude Design

LumenArtes – Galería de arte contemporáneo con diseño minimalista

★★★★★4,9 2.587 descargas

Tema web estático para LumenArtes que combina Tailwind CSS y JavaScript puro. Incluye hero paralaje, slider de galería, bloques de contenido responsivos y animaciones suaves.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web estático para la marca ficticia LumenArtes (galería de arte contemporáneo) usando solo HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. El diseño debe reproducir los siguientes patrones visuales y estructurales:

- Paleta de colores: fondo #F9F9F9, texto principal #212121, acentos #4A4A4A, azul profundo #0A3D62 para enlaces y botones.
- Tipografía: "Inter" para títulos (peso 700) y "Merriweather" para cuerpos de texto (peso 400).
- Header: barra de navegación fija, logo SVG a la izquierda, enlaces horizontales (about, gallery, exhibition, visit) con separador "/" y efecto subrayado on hover, enlace destacado "buy tickets" a la derecha, iconos de redes (instagram, facebook, youtube, twitter) visibles sólo en móvil.
- Hero: sección a pantalla completa con título grande en dos líneas ("lumen" y "artes"), tres imágenes superpuestas con efecto paralaje (una grande a la izquierda, una mediana centrada, una pequeña a la derecha). Texto centrado encima de las imágenes.
- Sección About: título grande "about", subtítulo en h3, párrafo descriptivo, imagen a la izquierda con paralaje, disposición responsiva (columna en móvil). Repetir variaciones con diferentes combinaciones de imagen‑texto y títulos estilizados (ej. título artístico en h5). Incluir bloques con alineación izquierda para destacar "PanoraPeak viewpoint".
- Bloque emergente: imagen con ligera traslación vertical al cargar y párrafo que habla de una esfera interactiva.
- Slider de galería: carrusel automático con 6 imágenes, numeración "1 /6" etc., flechas de navegación dentro de círculo, efecto fade entre diapositivas, responsive y con control de swipe.
- Footer: fondo gris muy claro, texto centrado con email de contacto, enlaces a política y redes sociales.
- Interactividad: menú hamburguesa para móvil, scroll suave a anclas, animaciones de entrada (fade‑up) en cada bloque, efecto paralaje en imágenes del hero y sobre scroll.
- Requisitos técnicos: usar Tailwind CDN (`<script src="https://cdn.tailwindcss.com"></script>`), incluir fuentes de Google, mantener todo el código en un solo archivo HTML, evitar cualquier referencia a la web original, generar todo el copy en español de España.

Entrega el código listo para copiar‑pegar.

---

## 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.595 caracteres · 31 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, enlaces y redes sociales
1.2 Hero con título grande y tres imágenes con efecto paralaje
1.3 Sección About con título, subtítulo, imagen y párrafo
1.4 Bloque artístico con título estilizado y segunda imagen
1.5 Bloque mixto imagen‑texto alineado a la izquierda
1.6 Bloque emergente con imagen y texto destacado
1.7 Slider de galería con seis imágenes y numeración
1.8 Footer con datos de contacto y redes

GALLERY

2.1 Grid de miniaturas de obras (opcional) o vista del slider completo

CONTACT

3.1 Formulario de contacto básico con campos nombre, email, mensaje
3.2 Información de visita y mapa (opcional)

PROMPTS RELACIONADOS · ENTRETENIMIENTO

Otros prompts de la misma categoría

Ficha de marca

Nombre: LumenArtes
Sector: Galería de arte contemporáneo
Claim: Espacios que inspiran creatividad

Bloques de la home

1.1 Barra de navegación fija con logo, enlaces y redes sociales
1.2 Hero con título grande y tres imágenes con efecto paralaje
1.3 Sección "About" con título grande, subtítulo, imagen destacada y texto descriptivo
1.4 Bloque informativo adicional con título artístico y segunda imagen
1.5 Bloque de contenido mixto con imagen y título alineado a la izquierda
1.6 Bloque emergente con imagen y párrafo destacado
1.7 Slider de galería con numeración de diapositivas y flechas de navegación
1.8 Footer minimalista con información de contacto y enlaces sociales

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