NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático de una fundación benéfica ficticia llamada "Aula Marea" usando HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. Emplea la siguiente paleta de colores: #1A3A5A (azul profundo), #2E8A7D (verde azulado), #F4F4F9 (gris muy claro), #FFFFFF (blanco) y #E63946 (rojo coral para acentos). Tipografía principal: 'Inter', sans‑serif; encabezados en peso 700, cuerpo en 400.
Estructura y requisitos:
- **Header** fijo con logotipo (texto "Aula Marea"), barra de navegación con enlaces numerados (01 Sobre nosotros, 02 Eventos, 03 Voluntarios, 04 Proyectos, 05 Donar, 06 Galería, 07 Blog, 08 Contacto) y botón primario “Únete”. Menú colapsable en móvil.
- **Hero** a pantalla completa: título grande "Transforma Vidas", subtítulo "Cada acción cuenta", vídeo embebi
3.808 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.808 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 Barra de navegación con logotipo, enlaces numerados y botón primario
- 1.2 Hero con título, subtítulo, vídeo de presentación, botón de donación y gráficos decorativos
- 1.3 Bloque de historia con título, descripción, imagen y texto de apoyo
- 1.4 Cifras de impacto animadas (donaciones, vidas tocadas, transparencia)
- 1.5 Galería de proyectos en cuadrícula con imágenes y breves descripciones
- 1.6 Área de testimonios con carrusel de citas
- 1.7 Llamada a la acción para convertirse en voluntario
- 1.8 Footer con información de contacto, enlaces rápidos y redes sociales
ABOUT
- 2.1 Encabezado con título y foto de portada
- 2.2 Texto descriptivo de la misión y visión
- 2.3 Línea de tiempo de hitos
- 2.4 Equipo con fotos y breves biografías
- 2.5 Botón para unirse al consejo
EVENTS
- 3.1 Listado de eventos próximos con imágenes, fecha y botón de registro
- 3.2 Calendario interactivo
VOLUNTEERS
- 4.1 Formulario de inscripción para voluntarios
- 4.2 Beneficios de participar
- 4.3 Historias de voluntarios
PROJECTS
- 5.1 Galería de proyectos destacados con filtros por categoría
- 5.2 Descripción ampliada de cada proyecto
DONATE
- 6.1 Formulario de donación con opciones de monto y método de pago
- 6.2 Métricas de recaudación en tiempo real
GALLERY
- 7.1 Grid de fotos de alta resolución
- 7.2 Lightbox para ampliación
BLOG
- 8.1 Lista de artículos con extractos e imágenes
- 8.2 Categorías y archivo
CONTACT
- 9.1 Formulario de contacto con mapa incrustado
- 9.2 Información de oficina y horario
PROMPTS RELACIONADOS · EDUCACIÓN
