NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia **Estudio Lira**, un estudio de desarrollo web creativo que ofrece experiencias 3D inmersivas. El proyecto debe estar implementado en un único archivo HTML usando Tailwind CSS vía CDN y JavaScript vanilla (sin frameworks). Incluir todas las páginas y bloques descritos en la tabla.
---
**Alcance**
- Generar la estructura HTML, los estilos Tailwind y la lógica JavaScript necesaria para animaciones simples (scroll reveal, hover effects) y para simular la navegación 3D del corredor usando transformaciones CSS.
- Mantener la accesibilidad: usar roles ARIA, etiquetas semánticas y foco visible.
- Optimizar carga: preload de la textura de fondo (`paper-texture.webp`) y uso de `loading="lazy"` en imágenes.
---
**Paleta de colores** (hex):
- Fondo
5.215 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
5.215 caracteres · licencia libre
Solo descarga completa disponible
CAPTURA COMPLETA · HOME
Para que Claude replique el diseño con máxima fidelidad, descarga la imagen y adjúntala en tu chat.
Descargar captura
ESTRUCTURA DEL SITIO
Tabla de secciones
HOME
- 1.1 Header con logo y navegación principal
- 2.1 Hero Corridor (título grande, subtítulo, fondo 3D)
- 2.2 Bloque Bienvenida (texto introductorio, botón CTA)
- 3.1 Sección Sobre mí (subtítulo, párrafo, lista de habilidades)
- 4.1 Galería de Proyectos (tarjetas con título, breve descripción, efecto hover)
- 5.1 Contacto (subtítulo, párrafo, botón abrir formulario modal)
- 6.1 Footer (enlaces, redes sociales, aviso legal)
ABOUT
- 1.1 Header reutilizado
- 2.1 Título "Sobre Estudio Lira"
- 2.2 Texto narrativo del creador y filosofía
- 3.1 Lista de tecnologías y herramientas
- 4.1 Imagen o ilustración decorativa
- 5.1 Footer común
PROJECTS
- 1.1 Header
- 2.1 Título de la página
- 2.2 Grid de proyectos (cada proyecto: imagen, título, resumen, etiqueta)
- 3.1 Footer
CONTACT
- 1.1 Header
- 2.1 Título de la página
- 2.2 Formulario de contacto (campo nombre, email, mensaje, botón enviar)
- 3.1 Enlaces a redes sociales
- 4.1 Footer
PROMPTS RELACIONADOS · PORTAFOLIO
