NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa en un único archivo HTML usando Tailwind CSS CDN y JavaScript vanilla. La marca se llama Hábitat Alba (habitatalba.com). Usa la siguiente paleta de colores: #1A1A1A (fondo oscuro), #FFFFFF (texto principal), #F5F5F5 (gris claro de secciones), #D4A373 (dorado cálido para acentos) y #3A3A3A (gris medio para fondos secundarios). Tipografía: headings con 'Playfair Display', body con 'Inter', ambas importadas desde Google Fonts.
Estructura:
- Header sticky con logo (SVG placeholder), menú de navegación horizontal (Home, About, Projects, Services, Contact) y botón "Get in touch" a la sección de contacto. Incluye versión móvil con botón hamburguesa que despliega un panel lateral con logo, título, dirección, teléfono, email y enlaces sociales (FB, LinkedIn, Twitter, B
3.863 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.863 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 barra de navegación sticky, logo, enlaces y menú móvil
- 1.2 Hero de imagen completa con overlay, pre‑título, título resaltado y botón
- 1.3 Bloque "Contar tu historia" (about) con título, texto, botón, imagen y contador de años
- 1.4 Sección de proyectos con pre‑título, título, botón y lista de tarjetas de proyecto
- 1.5 Footer con información de contacto, dirección, teléfono, email y redes sociales
ABOUT US
- 2.1 Header (reutilizado)
- 2.2 Banner interior con título y descripción
- 2.3 Texto largo sobre la empresa y equipo
- 2.4 Galería de fotos del estudio
- 2.5 Footer (reutilizado)
PROJECTS
- 3.1 Header
- 3.2 Lista filtrable de proyectos con miniaturas y títulos
- 3.3 Detalle de proyecto individual (imágenes, descripción, métricas)
- 3.4 Footer
SERVICES
- 4.1 Header
- 4.2 Cuadrícula de servicios con iconos y breves descripciones
- 4.3 CTA para solicitar propuesta
- 4.4 Footer
CONTACT US
- 5.1 Header
- 5.2 Formulario de contacto con campos nombre, email, asunto y mensaje
- 5.3 Mapa embebido y datos de contacto rápido
- 5.4 Footer
PROMPTS RELACIONADOS · REAL ESTATE
