NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia "Campus Valle" (agencia digital) usando un único archivo HTML que incluya Tailwind CSS vía CDN y JavaScript vanilla (sin frameworks). Replicar la estructura visual del sitio original: header fijo con logo a la izquierda, texto destacado "#1 Creative Design Agency" y botones de contacto y menú hamburguesa que abre un overlay con enlaces a Home, About, Work, Blog, Contact y datos de contacto/sociales. Añade un menú sticky vertical en la derecha con enlaces ancla a cada sección de la página principal.
Paleta de colores (hex):
- Primary: #0D0D0D (negro profundo)
- Secondary: #FFFFFF (blanco)
- Accent: #F4A261 (naranja pastel)
- Highlight: #2A9D8F (turquesa suave)
- Muted: #E9E9E9 (gris claro)
Tipografía: usar "Inter" para textos y "Space Grot
4.265 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.265 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, texto destacable y botones de contacto/menú
- 1.2 Hero con títulos dobles, etiqueta de año, descripción, botón "Book a Call" y métricas de clientes
- 1.3 Sección de Servicios (beneficios) – tarjetas icono + texto
- 1.4 Works – grid de proyectos con imágenes y hover
- 1.5 Testimonios – rating, número de clientes felices
- 1.6 CTA – llamada a la acción principal
- 1.7 Footer – logo, enlaces de navegación, redes sociales, datos de contacto
ABOUT
- 1.1 Header reutilizable
- 1.2 Hero interior con título y subtítulo
- 1.3 Historia y misión en bloques de texto
- 1.4 Equipo – tarjetas de miembros
- 1.5 Valores – iconos y descripciones
- 1.6 CTA de contacto
- 1.7 Footer
WORKS
- 1.1 Header
- 1.2 Hero de portfolio
- 1.3 Filtro de categorías
- 1.4 Grid de proyectos con overlay
- 1.5 Detalle de proyecto (imágenes, descripción, retos)
- 1.6 CTA
- 1.7 Footer
BLOG
- 1.1 Header
- 1.2 Lista de artículos en tarjetas
- 1.3 Sidebar con categorías y últimos posts
- 1.4 Paginación
- 1.5 Footer
CONTACT
- 1.1 Header
- 1.2 Formulario de contacto con campos nombre, email, mensaje
- 1.3 Información de contacto y mapa integrado
- 1.4 CTA de suscripción al newsletter
- 1.5 Footer
PROMPTS RELACIONADOS · EDUCACIÓN
