NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia **Alborada Solidaria** (organización sin ánimo de lucro de educación y salud infantil). Utiliza **HTML + Tailwind CDN + JavaScript vanilla** en un único archivo. La página principal debe reproducir los siguientes bloques y estilos:
---
**Paleta de colores** (usar variables CSS):
- Primary: #1A7F3B (verde bosque)
- Secondary: #F5F5F5 (gris muy claro)
- Accent: #FFB400 (amarillo cálido)
- TextPrimary: #212529 (gris casi negro)
- TextSecondary: #6C757D (gris medio)
**Tipografía**: Inter (sans‑serif) para cuerpo, Playfair Display para encabezados. Cargar desde Google Fonts.
---
**Header / Nav** (fijo, transparente sobre el hero):
- Logo a la izquierda (texto "Alborada Solidaria" en Inter, color Primary).
- Menú horizontal: "Quiénes somos", "P
5.589 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
5.589 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 vídeo de fondo, título, subtítulo, botón y métricas
- 1.2 Misión: encabezado, párrafo explicativo, tres iconos con descripciones
- 1.3 Quiénes somos: galería de imágenes y texto descriptivo
- 1.4 Llamado a la acción: botón de donación y formulario breve de suscripción
- 1.5 Footer: enlaces institucionales, datos de contacto, redes sociales
QUIENES SOMOS
- 2.1 Título y texto introductorio
- 2.2 Imagen principal con superposición de texto
- 2.3 Galería de fotos de actividades
- 2.4 Botón de volver a la página principal
PROGRAMAS
- 3.1 Lista de programas con tarjetas, iconos y breve descripción
- 3.2 Botón para ver detalles de cada programa
INVOLÚCRATE
- 4.1 Opciones de voluntariado y donación
- 4.2 Formulario de contacto rápido
BLOG
- 5.1 Grid de artículos con imágenes, títulos y extractos
- 5.2 Paginación inferior
CONTACTO
- 6.1 Formulario completo de contacto
- 6.2 Información de dirección, teléfono y correo
- 6.3 Mapa integrado (placeholder)
PROMPTS RELACIONADOS · EDUCATION
