NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia "Portfolio Orion" (portfolioorion.com), una agencia digital creativa. Usa una única página HTML que incluya Tailwind CSS vía CDN y JavaScript vanilla (sin frameworks). Emplea la siguiente paleta de colores: Rojo vibrante #DE322D, Gris oscuro #1A1A1A, Gris medio #4A4A4A, Blanco #FFFFFF y un acento azul #2A9D8F. Tipografía: Inter (google fonts) para títulos y Body (Roboto) para párrafos.
Estructura y contenido:
- **Header** fijo, con logo SVG (replicar forma abstracta) a la izquierda, menú principal (Home, Studio, Projects, Pages dropdown, Contact) centrado, número de proyecto destacado a la derecha (ej. 05). Debe ser responsive y colapsar a un ícono de hamburguesa en móvil.
- **Hero**: fondo blanco, título grande en Inter 48px, subtítulo e
3.960 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.960 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 SVG, menú principal, dropdown y número de proyecto destacado
- 1.2 Hero con título grande, subtítulo, botón CTA y fondo claro
- 1.3 Bloque de servicios en tres columnas con iconos y breves descripciones
- 1.4 Galería de proyectos con filtro por categoría y tarjetas con hover
- 1.5 Estadísticas (contadores) animados
- 1.6 Formulario de suscripción al newsletter
- 1.7 Footer con enlaces de navegación, redes sociales y datos de contacto
ABOUT
- 1.1 Header idéntico al Home
- 1.2 Sección de presentación de la agencia con foto de fondo y texto descriptivo
- 1.3 Valores y metodología en bloques horizontales
- 1.4 Equipo en tarjetas con foto, nombre y posición
- 1.5 Footer común
PROJECTS
- 1.1 Header idéntico
- 1.2 Grid de proyectos con filtro por categoría
- 1.3 Detalle de proyecto (imágenes, descripción, resultados)
- 1.4 CTA a contactar
- 1.5 Footer común
CONTACT
- 1.1 Header idéntico
- 1.2 Formulario de contacto completo (nombre, email, mensaje)
- 1.3 Mapa incrustado
- 1.4 Información de oficina y redes
- 1.5 Footer común
PROMPTS RELACIONADOS · PORTFOLIO
