NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web para la marca ficticia "Campus Titan" (agencia digital) siguiendo el estilo visual del template analizado. Usa únicamente HTML estático, Tailwind CSS via CDN y JavaScript vanilla en un único archivo. Paleta de colores: #0A0A0A (negro profundo), #FFFFFF (blanco), #E0E0E0 (gris suave), #1A73E8 (azul acento), #F5A623 (naranja destaque). Tipografía: Inter (sans) para cuerpo y DM Serif Display para títulos.
HEADER: barra fija con fondo semitransparente negro, logo texto "Campus Titan" a la izquierda, enlaces de navegación (Home, About, Works, Contact) alineados a la derecha, efecto hover subrayado. Botón "Contact" con borde azul y fondo transparente, cambia a azul sólido en hover.
HOME sections (numerados en prompt):
1. Hero: contenedor full‑width con imagen de fondo difumin
4.573 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.573 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 Barra de navegación fija con logo y enlaces principales
- 1.2 Hero visual con imagen de fondo, título translúcido y frase descriptiva
- 1.3 Bloque de presentación "Perfil" con subtítulo y párrafo explicativo
- 1.4 Sección "Expertise" con título, breve descripción y imagen grande al lado
- 1.5 Titular grande dividido en dos columnas "Creative Studio"
- 1.6 Servicios: tres tarjetas horizontales (Branding, Design, Marketing)
- 1.7 Trabajos destacados: cuadrícula de 4 proyectos, cada uno con portada, título y datos emergentes al pasar el cursor
- 1.8 Footer con datos de contacto, enlaces a política y redes sociales
ABOUT
- 2.1 Barra de navegación (heredada)
- 2.2 Hero secundario con título y descripción de la agencia
- 2.3 Historia de la empresa con texto y foto
- 2.4 Valores y misión en bloques de texto
- 2.5 Equipo con tarjetas de perfil
- 2.6 Footer
WORKS
- 3.1 Barra de navegación
- 3.2 Lista de proyectos en cuadrícula, filtros por categoría
- 3.3 Cada proyecto con portada, título, breve descripción y botón de detalle
- 3.4 Footer
CONTACT
- 4.1 Barra de navegación
- 4.2 Formulario de contacto (nombre, email, mensaje)
- 4.3 Información de localización y redes
- 4.4 Footer
PROMPTS RELACIONADOS · EDUCACIÓN
