NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia "Escuela Marea" (fundación sin ánimo de lucro) usando HTML estático, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. Reproduce la estructura y estilo del sitio analizado:
- Paleta de colores: #1A4F71 (azul marino), #2E7D32 (verde), #FFFFFF (blanco), #F5F5F5 (gris claro) y acentos #FFB800 (amarillo).
- Tipografía: Inter var (Google Fonts) para títulos y body.
- Header fijo con logo (texto "Escuela Marea"), menú horizontal con enlaces numerados (01 About, 02 Events, 03 Volunteers, 04 Causes, 05 Donate, 06 Gallery, 07 News) y botón primario "Únete" con ícono de flecha.
- Hero: fondo con imagen de impacto (placeholder), título grande "Apoyamos Cambios Reales", subtítulo y botón "Donar ahora". Incluir mini‑video lightbox y grá
3.831 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.831 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ú numerado y botón principal
- 1.2 Hero con título, subtítulo, vídeo ligero, imagen central y botón de donación
- 1.3 Sección de historia con encabezado, texto descriptivo, imágenes paralelas y cita
- 1.4 Bloque de métricas con contadores animados y descripciones
- 1.5 Footer con navegación secundaria, datos de contacto y enlaces a redes
ABOUT
- 1.1 Header replicado
- 1.2 Imagen de portada y texto institucional
- 1.3 Historia ampliada con galería
- 1.4 Equipo y valores
- 1.5 Footer
EVENTS
- 1.1 Header replicado
- 1.2 Lista de eventos con tarjetas y fechas
- 1.3 Calendario interactivo
- 1.4 Llamada a la acción para participar
- 1.5 Footer
VOLUNTEERS
- 1.1 Header replicado
- 1.2 Formulario de inscripción voluntario
- 1.3 Testimonios de voluntarios
- 1.4 Beneficios de colaborar
- 1.5 Footer
CAUSES
- 1.1 Header replicado
- 1.2 Grid de causas con imágenes y breves descripciones
- 1.3 Botón para donar a cada causa
- 1.4 Estadísticas de impacto por causa
- 1.5 Footer
DONATE
- 1.1 Header replicado
- 1.2 Formulario de donación seguro
- 1.3 Opciones de monto y método de pago
- 1.4 Testimonios de beneficiarios
- 1.5 Footer
GALLERY
- 1.1 Header replicado
- 1.2 Galería de fotos con lightbox
- 1.3 Categorías filtrables
- 1.4 Botón para compartir en redes
- 1.5 Footer
BLOGS
- 1.1 Header replicado
- 1.2 Lista de artículos con extractos y fechas
- 1.3 Sistema de paginación
- 1.4 Barra lateral con categorías y archivo
- 1.5 Footer
CONTACT
- 1.1 Header replicado
- 1.2 Formulario de contacto y mapa integrado
- 1.3 Información de oficina y teléfono
- 1.4 Enlaces a redes sociales
- 1.5 Footer
PROMPTS RELACIONADOS · EDUCACIÓN
