NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa para la marca ficticia **Campus Ónix** (estudio creativo) usando **HTML estático**, **Tailwind CSS vía CDN** y **JavaScript vanilla** en un solo archivo. El proyecto debe incluir todas las páginas y secciones listadas en la tabla, reproduciendo fielmente la arquitectura visual del sitio analizado:
- **Paleta de colores**: #FFFFFF (fondo), #111111 (texto principal), #E0E0E0 (bordes y fondos secundarios), #FF6600 (acentos y botones), #000000 (líneas decorativas).
- **Tipografía**: *Inter* para cuerpo y *Playfair Display* para encabezados, importadas desde Google Fonts.
- **Header**: barra de navegación fija, logo a la izquierda, enlaces horizontales con subrayado animado SVG (stroke negro) y botón hamburguesa para móvil.
- **Hero**: sección a pantalla comple
3.614 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.614 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 Navbar con logo y enlaces (home, trabajos, sobre, servicios, noticias, contacto)
- 2.1 Hero grande con título y visual SVG animado
- 3.1 Sección Servicios en tres columnas con iconos y breves descripciones
- 4.1 Galería Portafolio tipo grid con tarjetas hover
- 5.1 Últimas noticias/blog en lista vertical
- 6.1 CTA ‘Hablemos’ con botón animado
- 7.1 Footer con datos de contacto, enlaces de navegación y redes sociales
WORK
- 1.1 Header interno con breadcrumb
- 2.1 Grid de proyectos con filtros
- 3.1 Detalle de proyecto con imágenes y texto descriptivo
ABOUT
- 1.1 Historia del estudio con texto y foto
- 2.1 Equipo en tarjetas con nombre y rol
SERVICES
- 1.1 Lista de servicios con iconos y descripciones extensas
- 2.1 Proceso de trabajo en pasos numerados
NEWS
- 1.1 Lista de artículos con miniaturas y resumen
- 2.1 Paginación simple
CONTACT
- 1.1 Formulario de contacto (nombre, email, mensaje)
- 2.1 Información de ubicación y mapa incrustado
PROMPTS RELACIONADOS · EDUCATION
