NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia "Manos Verdes" (manosverdes.org), una fundación sin ánimo de lucro que impulsa proyectos de desarrollo sostenible y ayuda humanitaria. Utiliza una única página HTML que incorpora Tailwind CSS vía CDN y JavaScript vanilla (sin frameworks). La paleta de colores debe basarse en tonos verdes y neutros: #0A5A3C (verde oscuro), #2E7D32 (verde medio), #81C784 (verde claro), #F5F5F5 (gris claro), #212121 (gris casi negro). Tipografía: encabezados con "Montserrat" (peso 700) y cuerpo con "Open Sans" (peso 400).
Estructura y contenido:
1. Header (navbar) fijo, con logo textual "Manos Verdes", enlaces: Home, Sobre nosotros, Programas, Donar, Blog, Contacto. Botón destacado "Donar ahora" a la derecha. Menú responsive con ícono hamburguesa.
2. Hero sec
3.981 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.981 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 Banner hero con título, subtítulo y botón principal
- 1.2 Bloque de causas destacadas en cuadrícula
- 1.3 Contadores de impacto (personas atendidas, proyectos, voluntarios)
- 1.4 Galería de proyectos con efecto hover
- 1.5 Llamada a la acción para donar
- 1.6 Últimas entradas del blog
- 1.7 Footer con navegación secundaria, contactos y redes sociales
ABOUT US
- 2.1 Cabecera con imagen de fondo y título
- 2.2 Texto descriptivo de la misión y visión
- 2.3 Equipo destacado en tarjetas
- 2.4 Valores en iconos y breves descripciones
- 2.5 Footer común
PROGRAMS
- 3.1 Listado de programas con imagen, título y resumen
- 3.2 Filtros por categoría
- 3.3 Botón para ver detalle del programa
- 3.4 Footer común
DONATE
- 4.1 Formulario de donación simple (importe, método, datos personales)
- 4.2 Historias de impacto relacionadas
- 4.3 Botones de donación rápida
- 4.4 Footer común
BLOG
- 5.1 Grid de artículos con imagen, título, fecha y extracto
- 5.2 Paginación
- 5.3 Sidebar con categorías y últimos artículos
- 5.4 Footer común
CONTACT
- 6.1 Formulario de contacto (nombre, email, mensaje)
- 6.2 Mapa incrustado
- 6.3 Información de contacto y redes sociales
- 6.4 Footer común
PROMPTS RELACIONADOS · EDUCACIÓN
