NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa para la marca ficticia Saber Lira, un estudio de diseño y desarrollo digital. Usa un único archivo HTML con Tailwind CSS vía CDN y JavaScript vanilla incrustado. Mantén la estructura y el estilo visual del sitio original (hero con saludo, nombre, ubicación, descripción breve, foto a la derecha, contadores animados; navegación sticky con logo a la izquierda, enlaces: About, Services, Projects, Blog y botón Contact; sección Projects con cuadrícula de trabajos y filtros de categoría; footer con enlaces y datos de contacto).
Paleta de colores: #0A0A0A (fondo principal), #FFFFFF (texto), #F5A623 (acentos y botones), #E5E5E5 (bordes y fondos secundarios). Tipografía: 'Inter' para títulos y textos, peso 400-700, tamanos responsivos.
Requisitos técnicos:
- HTML5 semá
3.290 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.290 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ú y botón Contacto
- 1.2 Hero: saludo, nombre, ubicación, breve descripción, foto y contadores de métricas
- 1.3 Sección Projects: título, descripción y galería de trabajos con filtros de categoría
- 1.4 Footer con información de contacto y enlaces de navegación
ABOUT
- 2.1 Header replicado
- 2.2 Bloque de presentación más amplia con foto y texto descriptivo
- 2.3 Lista de habilidades / experiencia
- 2.4 Footer
SERVICES
- 3.1 Header replicado
- 3.2 Tarjetas de servicios con icono, título y breve descripción
- 3.3 CTA de contacto
- 3.4 Footer
PROJECTS
- 4.1 Header replicado
- 4.2 Galería filtrable de proyectos con miniaturas, título y categorías
- 4.3 Paginación o carga progressive
- 4.4 Footer
BLOG
- 5.1 Header replicado
- 5.2 Lista de artículos con imagen, título, extracto y fecha
- 5.3 Sidebar con categorías y newsletter
- 5.4 Footer
CONTACT
- 6.1 Header replicado
- 6.2 Formulario de contacto (nombre, email, mensaje)
- 6.3 Mapa embebido y datos de localización
- 6.4 Footer
PROMPTS RELACIONADOS · EDUCACIÓN
