NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia "Escuela Perla" (escuelaperla.com) siguiendo el estilo visual del template analizado. Usa únicamente HTML estático, Tailwind CSS vía CDN y JavaScript vanilla en un solo archivo. Paleta de colores: #0A0A0A (negro profundo), #1E3A8A (azul oscuro), #3B82F6 (azul brillante), #F3F4F6 (gris claro), #FFFFFF (blanco). Tipografía: Inter (sans‑serif) para encabezados y texto, peso 400‑700.
Estructura:
- Header fijo con logo SVG a la izquierda, menú dividido en dos columnas (Main Page | Others) y botones CTA "Todas las plantillas" y "Personalización" a la derecha. Incluye icono de web external link.
- Preloader que muestra texto "Creativo" y dos palabras giratorias "Digital" y "Agency" antes de cargar la página.
- Hero sección con fondo de vídeo aut
3.647 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.647 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, menú dividido y CTA principal
- 1.2 Preloader con texto animado "Creativo Digital"
- 1.3 Hero vídeo de fondo con título grande y subtítulos giratorios
- 1.4 Sección de servicios en tarjetas con iconos
- 1.5 Sección de proyectos destacados en grid con hover
- 1.6 Blog con últimos artículos en lista horizontal
- 1.7 Llamada a la acción final con botón destacado
- 1.8 Footer con enlaces rápidos, datos de contacto y redes sociales
ABOUT
- 2.1 Cabecera con título "Sobre nosotros" y foto de equipo
- 2.2 Texto descriptivo con misión y valores
- 2.3 Timeline de historia en columnas
- 2.4 Equipo en tarjetas con foto y bio corta
- 2.5 CTA para contactar
- 2.6 Footer (reuse)
SERVICES
- 3.1 Cabecera con título y breve intro
- 3.2 Lista de servicios en tarjetas con icono y descripción
- 3.3 Proceso paso a paso en pasos numerados
- 3.4 Testimonios en carrusel
- 3.5 CTA para solicitar presupuesto
- 3.6 Footer (reuse)
PROJECTS
- 4.1 Cabecera con título "Nuestros proyectos"
- 4.2 Grid de proyectos con imagen, categoría y botón "Ver detalle"
- 4.3 Filtro por categoría
- 4.4 Caso de estudio destacado con foto grande y texto largo
- 4.5 CTA para colaborar
- 4.6 Footer (reuse)
BLOG
- 5.1 Cabecera con título "Blog"
- 5.2 Lista de artículos en tarjetas con imagen, fecha y extracto
- 5.3 Sidebar con categorías y últimos posts
- 5.4 Paginación
- 5.5 Footer (reuse)
CONTACT US
- 6.1 Cabecera con título "Contacto"
- 6.2 Formulario de contacto (nombre, email, asunto, mensaje)
- 6.3 Mapa embed
- 6.4 Información de contacto y horario
- 6.5 Footer (reuse)
PROMPTS RELACIONADOS · EDUCATION
