NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa para la marca ficticia ALMASOLIDARIA (organización sin ánimo de lucro) usando únicamente HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. Emplea la siguiente paleta de colores: #1A3E5D (azul marino), #2E7D32 (verde profundo), #F5F5F5 (gris claro), #FFFFFF (blanco), #E53935 (rojo acento). Tipografía: font-sans con Inter para encabezados y Open Sans para cuerpo.
Estructura del sitio:
- Header fijo con logo (texto ALMA SOLIDARIA), menú de navegación horizontal (Home, Quiénes somos, Programas, Campañas, Blog, Contacto, Donar) y botón "Donar ahora" en tono rojo. Menú responsive colapsable con icono hamburguesa.
- Home:
1.1 Hero a pantalla completa con fondo de imagen solidaria (URL placeholder), título grande en blanco, subtítulo gris claro y bot
4.241 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.241 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 Hero con título, subtítulo, fondo de imagen y botón de video
- 1.2 Bloque "Quiénes somos" con encabezado, párrafo y lista de valores numerados
- 1.3 Carrusel de campañas en curso (slider) con tarjeta de campaña
- 1.4 Contadores de impacto (donaciones, beneficiados, proyectos)
- 1.5 Testimonios en carrusel
- 1.6 Formulario de suscripción al boletín
- 1.7 Footer con enlaces, redes y datos de contacto
ABOUT
- 2.1 Hero interno con título y foto de cabecera
- 2.2 Historia de la organización con texto y timeline
- 2.3 Equipo directivo en tarjetas
- 2.4 Llamada a la acción a voluntariado
PROGRAMS
- 3.1 Grid de programas con imagen, título y breve descripción
- 3.2 Filtro por categoría
- 3.3 Botón "Conocer más" en cada tarjeta
CAMPAIGNS
- 4.1 Lista de campañas con filtro y ordenación
- 4.2 Detalle de campaña con galería, objetivo y progreso
- 4.3 Botón de donación
BLOG
- 5.1 Lista de artículos con miniatura, título y extracto
- 5.2 Paginación
- 5.3 Vista detalle del post
CONTACT
- 6.1 Formulario de contacto con campos básicos
- 6.2 Mapa incrustado
- 6.3 Información de oficina y horario
DONATION
- 7.1 Formulario de donación con montos predefinidos y campo personalizado
- 7.2 Resumen de la donación y botón de confirmación
PROMPTS RELACIONADOS · EDUCATION
