NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
You are Claude Design. Create a complete single‑file website replica for the fictitious agency **Media Ónix** following these specifications:
**Scope**: Full responsive corporate agency site (Home, Services, Projects, Team, Blog, Contact) using only HTML, Tailwind CSS (CDN), and vanilla JavaScript. No external assets beyond Tailwind and Google Fonts.
**Palette**:
- Primary: #0D3B66 (deep blue-grey)
- Secondary: #FAF0CA (soft sand)
- Accent: #F4D35E (warm amber)
- Dark: #262626 (almost black)
- Light: #FFFFFF (white)
**Typography**:
- Headings: "Poppins", sans‑serif, weights 600‑700.
- Body: "Inter", sans‑serif, weight 400.
**Header** (fixed top): logo placeholder (text "Media Ónix"), navigation links (Home, Services, Projects, Team, Blog, Contact), hamburger menu for mobile, subtle bac
4.233 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.233 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 Preloader animado con círculos giratorios
- 1.2 Header con logo, menú y botón de contacto
- 1.3 Hero con título, subtítulo y CTA
- 1.4 Bloque de servicios (grid 3 columnas)
- 1.5 Portfolio destacado (tarjetas con overlay)
- 1.6 Testimonios (carrusel sencillo)
- 1.7 CTA de contacto (formulario breve)
- 1.8 Footer con enlaces, redes y datos de la empresa
SERVICES
- 2.1 Header (reutilizado)
- 2.2 Hero interno con encabezado y descripción
- 2.3 Lista detallada de servicios con iconografía
- 2.4 Caso de estudio destacado
- 2.5 CTA secundaria
- 2.6 Footer (reutilizado)
PROJECTS
- 3.1 Header
- 3.2 Hero de galería con filtro por categorías
- 3.3 Tarjetas de proyecto en grid fluido
- 3.4 Modal de detalle de proyecto (lightbox)
- 3.5 Footer
TEAM
- 4.1 Header
- 4.2 Hero con mensaje de cultura de empresa
- 4.3 Grid de miembros del equipo con foto y bio breve
- 4.4 CTA de carreras
- 4.5 Footer
BLOG
- 5.1 Header
- 5.2 Hero de blog con filtro de categorías
- 5.3 Lista de artículos en tarjetas
- 5.4 Paginación simple
- 5.5 Footer
CONTACT
- 6.1 Header
- 6.2 Hero con mapa incrustado
- 6.3 Formulario de contacto completo
- 6.4 Información de oficina y redes
- 6.5 Footer
PROMPTS RELACIONADOS · AGENCIA DIGITAL
