NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web ficticio para la marca Campus Rubí, agencia digital de branding, usando un único archivo HTML que incluya Tailwind CSS vía CDN y JavaScript vanilla. Replicar el diseño analizado:
- Paleta de colores: #FFFFFF (blanco), #F5F5F5 (gris claro), #111111 (negro), #0066FF (azul accent), #E0E0E0 (borders).
- Tipografía: Inter (sans-serif) para cuerpo y títulos, peso 400/600/700 según nivel.
- Header: barra fija con logo a la izquierda, menú colapsable en móvil (icono hamburguesa) que muestra enlaces Home, Sobre Nosotros, Servicios, Proyectos, Blog, Contacto. Fondo semi‑transparente con blur.
- Hero: sección full‑width con texto "Since — 2010™", título grande "Campus Rubí", subtítulo "Ideas que trascienden el tiempo" y un carrusel de imágenes (9 imágenes) con transición suave (
3.468 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.468 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 y menú colapsable
- 2.1 Hero con fecha fundación, título, descripción y galería de imágenes en carrusel
- 3.1 Servicios: grid 3 columnas, tarjetas con ícono, título y breve texto
- 4.1 Proyectos: grid 3 columnas, miniaturas con overlay y botón ver más
- 5.1 Blog: lista de 3 entradas, imagen, título, extracto, botón leer
- 6.1 Footer: columnas de enlaces, datos de contacto y redes sociales
ABOUT
- 1.1 Header (reutilizado)
- 2.1 Texto descriptivo del estudio, historia y valores
- 3.1 Equipo: tarjetas con foto, nombre y rol
- 4.1 CTA para contactar
SERVICES
- 1.1 Header
- 2.1 Lista de servicios en tarjetas con icono y descripción
- 3.1 Proceso: pasos numerados con iconos
PROJECTS
- 1.1 Header
- 2.1 Grid de proyectos, filtro por categoría, hover con título
- 3.1 Pagination simple
BLOG
- 1.1 Header
- 2.1 Lista de artículos en tarjetas, imagen, título, extracto, fecha
- 3.1 Sidebar con categorías y últimos artículos
CONTACT
- 1.1 Header
- 2.1 Formulario de contacto (nombre, email, mensaje, botón enviar)
- 3.1 Mapa embed y datos de ubicación
- 4.1 Footer (reutilizado)
PROMPTS RELACIONADOS · EDUCATION
