NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un website estático en un solo archivo HTML que reproduzca el diseño analizado, usando Tailwind CSS vía CDN y JavaScript vanilla (sin frameworks). Marca ficticia: Planos Lira (estudio de arquitectura). Dominio ficticio: planoslira.com. Paleta de colores: #0F172A (azul noche) como fondo principal, #1E293B (gris oscuro) para encabezados, #3B82F6 (azul accent) para botones y enlaces, #F1F5F9 (gris claro) para áreas de contenido, #FFFFFF para texto. Tipografía: Inter (Google Fonts) para todo el texto, con tamaños base 16px, h1 48px, h2 36px, h3 24px, peso 600.
Estructura:
- Header fijo, fondo semi‑transparente, logo Planos Lira, menú ancla (Featured, About, Portfolio, Service, Contact) y botón de contacto con icono de flecha.
- Hero ocupando viewport completo, fondo blanco, texto rotati
3.984 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.984 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, menú ancla y botón de contacto
- 1.2 Hero con carrusel de titulares y frase complementaria
- 1.3 Sección Featured con video de fondo y subtítulo
- 1.4 About con texto descriptivo y foto del equipo
- 1.5 Portfolio en cuadrícula de proyectos con hover
- 1.6 Service con iconos y breve explicación
- 1.7 CTA final con formulario de contacto simple
- 1.8 Footer con navegación secundaria, redes y datos de contacto
ABOUT
- 1.1 Header (reutilizado)
- 1.2 Bloque de presentación con imagen y texto amplio
- 1.3 Valores destacados en columnas
- 1.4 Footer
PORTFOLIO
- 1.1 Header
- 1.2 Galería filtrable de proyectos (grid de tarjetas)
- 1.3 Detalle de proyecto (modal o página interna) – imágenes, descripción, datos técnicos
- 1.4 Footer
SERVICES
- 1.1 Header
- 1.2 Lista de servicios con iconos y textos breves
- 1.3 CTA de solicitud de presupuesto
- 1.4 Footer
CONTACT
- 1.1 Header
- 1.2 Formulario de contacto (nombre, email, mensaje)
- 1.3 Mapa incrustado (imagen estática)
- 1.4 Footer
PROMPTS RELACIONADOS · ARCHITECTURE
