NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa para la marca ficticia "Educa Delta" (educadelta.com) que reproduzca el diseño analizado. Utiliza una única página HTML con Tailwind CSS desde CDN y JavaScript vanilla (sin frameworks).
**Requisitos visuales**
- Paleta de colores: #1A1A1A (fondo oscuro), #F5A623 (amarillo resaltado), #FFFFFF (blanco), #E5E5E5 (gris claro) y #000000 (texto principal).
- Tipografía: "Inter", sans‑serif para textos y "Playfair Display" para encabezados, ambas importadas desde Google Fonts.
- Layout responsive: mobile‑first, colapsado a una barra de navegación hamburguesa en <768px.
**Estructura**
1. **Header** (`<header class="bg-black text-white"`): logo SVG ficticio a la izquierda, menú horizontal con enlaces "/Demos", "/Sobre nosotros", "/Eventos", "/Programas", "/Todas las p
4.406 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.406 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 Cabecera con logo, menú y botón "Unirse a la comunidad"
- 1.2 Hero con título grande, subtítulo y fondo ilustrativo
- 1.3 Tarjetas de presentación de los 3 demos de inicio
- 1.4 Cuadrícula de métricas de rendimiento (PageSpeed, Performance, etc.)
- 1.5 Cuadrícula de características principales (Soporte, SEO, Tipografía, Páginas internas)
- 1.6 Footer con enlaces de navegación, contacto y redes sociales
ABOUT US
- 2.1 Cabecera reutilizada
- 2.2 Hero secundario con imagen y texto descriptivo
- 2.3 Historia de la asociación en bloques de texto e imágenes
- 2.4 Equipo en tarjetas con foto y biografía corta
- 2.5 Llamada a la acción para colaboración
EVENTS
- 3.1 Cabecera reutilizada
- 3.2 Lista de eventos en cuadrícula, cada ítem con imagen, fecha y breve descripción
- 3.3 Filtro de categorías y calendario interactivo
- 3.4 Botón para ver todos los eventos
PROGRAMS
- 4.1 Cabecera reutilizada
- 4.2 Galería de programas con tarjetas descriptivas
- 4.3 Área de inscripción rápida
MEMBERSHIP
- 5.1 Cabecera reutilizada
- 5.2 Formulario de registro con campos básicos y estilo claro
- 5.3 Beneficios de la membresía en lista con iconos
MEDIA
- 6.1 Cabecera reutilizada
- 6.2 Galería de fotos y videos en formato masonry
- 6.3 Enlaces a comunicados de prensa
BLOG
- 7.1 Cabecera reutilizada
- 7.2 Lista de artículos con miniaturas, título y extracto
- 7.3 Paginación y barra lateral con categorías
CONTACT US
- 8.1 Cabecera reutilizada
- 8.2 Formulario de contacto con campos nombre, email, mensaje
- 8.3 Mapa incrustado y datos de ubicación
PROMPTS RELACIONADOS · EDUCACIÓN
