NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático completo para la marca "Campus Murmullo" (campusmurmullo.com) usando HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. Reproduce la estructura y estilo del sitio analizado:
- Header: barra superior con logo a la izquierda y botón "MENU" a la derecha que abre un overlay lateral con enlaces a Home, Servicios, Portfolio, Blog y Contacto. El overlay muestra miniaturas de fondo para cada enlace y los iconos sociales (Instagram, Twitter, LinkedIn, Dribbble, Facebook) con efectos hover.
- Hero: sección a pantalla completa con título grande (h1) que incluye palabras en cursiva, subtítulo (p) y un botón circular que abre un lightbox de video (simulado con iframe). Fondo oscuro con overlay semitransparente.
- Servicios: grid de 4 columnas en desktop (
4.229 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.229 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 Hero con título destacado, subtítulo y botón de reproducción de video
- 1.2 Menú lateral ocultable con enlaces a páginas principales y fondo de imágenes
- 1.3 Bloque de servicios en cuadrícula con iconos y descripciones breves
- 1.4 Imagen ilustrativa acompañando la descripción de servicios
- 1.5 Sección de presentación de la agencia con título y botón de contacto
- 1.6 Galería de proyectos destacados en formato tarjeta con animación hover
- 1.7 Footer con información de contacto, dirección y enlaces a redes sociales
ABOUT
- 2.1 Título y párrafo introductivo sobre la agencia
- 2.2 Línea de tiempo o valores corporativos en dos columnas
- 2.3 Testimonios rotativos de clientes
- 2.4 CTA para descargar brochure
- 2.5 Footer repetido
SERVICES
- 3.1 Lista de servicios con iconos y descripción larga
- 3.2 Sección de proceso de trabajo en pasos numerados
- 3.3 FAQ acordeón
- 3.4 CTA de solicitud de presupuesto
- 3.5 Footer
PROJECTS
- 4.1 Grid de proyectos con filtro por categoría
- 4.2 Cada proyecto abre una página interna con galería y descripción
- 4.3 CTA para contactar sobre el proyecto
- 4.4 Footer
BLOG
- 5.1 Lista de artículos en tarjetas con imagen, título y extracto
- 5.2 Sidebar con categorías y últimos posts
- 5.3 Paginación inferior
- 5.4 Footer
CONTACT
- 6.1 Formulario de contacto con campos nombre, email, mensaje
- 6.2 Mapa incrustado con ubicación
- 6.3 Información de contacto y redes sociales
- 6.4 Footer
PROMPTS RELACIONADOS · EDUCATION
