NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia "Escuela Aurora" (dominio escuelaaurora.com) usando solo HTML estático, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. Emplea la siguiente paleta de colores: #1A3A5F (azul profundo), #2E5C8A (azul medio), #4A90E2 (azul claro), #F7F9FC (gris muy claro), #FFFFFF (blanco), #E63946 (rojo acento). Tipografía: headings con "Montserrat" (Google Fonts, peso 700), cuerpo con "Open Sans" (peso 400).
Estructura y bloques:
1. Header (reutilizado en todas las páginas): barra superior con logo SVG simple, menú de navegación con mega‑dropdown que muestra enlaces a Home, Sobre nosotros, Programas, Blog, Donar, Contacto y enlaces legales. Botón destacado "Donar ahora" en color rojo, icono de carrito que abre modal con lista de productos y
4.780 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.780 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, navegación mega‑dropdown, botón "Donar ahora" y carrito
- 1.2 Hero con fondo ilustrado, título, subtítulo y botón de llamado a la acción
- 1.3 Sección de causas destacadas en rejilla de tarjetas
- 1.4 Programa destacado con imagen a la izquierda y texto a la derecha
- 1.5 Testimonios en carrusel de citas
- 1.6 Últimas entradas del blog en formato cards
- 1.7 Formulario de suscripción al boletín
- 1.8 Footer con enlaces institucionales, redes sociales y datos de contacto
ABOUT
- 2.1 Header (reutiliza bloque 1.1)
- 2.2 Imagen principal y mensaje institucional
- 2.3 Historia de la organización en dos columnas
- 2.4 Equipo con fotos y breves bios
- 2.5 Valores y misión en iconos
- 2.6 Footer (reutiliza bloque 1.8)
PROGRAMS
- 3.1 Header
- 3.2 Lista de programas en tarjetas con imagen, título y breve descripción
- 3.3 Filtro por categoría
- 3.4 Botón para ver detalle del programa
- 3.5 Footer
PROGRAM DETAIL
- 4.1 Header
- 4.2 Imagen grande del programa
- 4.3 Descripción extensa, metas y llamado a donar
- 4.4 Galería de fotos
- 4.5 Comentarios y testimonios
- 4.6 Footer
DONATION
- 5.1 Header
- 5.2 Formulario de donación con monto, método de pago y datos personales
- 5.3 Opciones de donación recurrente
- 5.4 Mensaje de agradecimiento
- 5.5 Footer
BLOG
- 6.1 Header
- 6.2 Lista de posts en tarjetas con imagen, título y extracto
- 6.3 Sidebar con categorías y archivo
- 6.4 Paginación
- 6.5 Footer
CONTACT
- 7.1 Header
- 7.2 Formulario de contacto (nombre, email, mensaje)
- 7.3 Mapa incrustado
- 7.4 Información de contacto y horario
- 7.5 Footer
PROMPTS RELACIONADOS · EDUCATION
