NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático de una ONG llamada "Esperanza Clara" usando HTML, Tailwind CSS (CDN) y JavaScript vanilla en un solo archivo. La web debe reproducir el diseño analizado:
- Paleta de colores: #FFFFFF (blanco fondo), #F5F5F5 (gris muy claro), #1A1A1A (negro texto), #D97706 (ámbar para botones y acentos), #374151 (gris medio para textos secundarios).
- Tipografía: "Inter" para títulos y cuerpo, peso 400‑600, tamaños responsivos (h1≈4rem, h2≈2.5rem, p≈1rem).
- Header: barra centrada, logo a la izquierda, menú horizontal con enlaces Home, Quiénes somos, Proyectos, Voluntariado, Donar, Contacto. Botón "Donar ahora" con fondo ámbar y hover oscuro. Menú colapsable en móvil con icono hamburguesa.
- Hero: sección a pantalla completa con fondo abstracto claro, título grande "Juntos, podem
3.760 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.760 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ú principal y botón de donación
- 1.2 Hero con título destacado, subtítulo, imágenes superpuestas y llamado a la acción
- 1.3 Bloque informativo de impacto con texto y efectos de aparición
- 1.4 Footer con enlaces rápidos, datos de contacto y redes sociales
ABOUT US
- 2.1 Header (reutilizado)
- 2.2 Sección de historia con imagen y texto descriptivo
- 2.3 Equipo con fotos circulares y breves biografías
- 2.4 Footer
PROJECTS
- 3.1 Header
- 3.2 Grid de proyectos con tarjetas, imagen, título y breve descripción
- 3.3 Footer
VOLUNTEER
- 4.1 Header
- 4.2 Formulario de registro rápido con campos nombre, email y área de interés
- 4.3 Testimonios en carrusel
- 4.4 Footer
DONATION
- 5.1 Header
- 5.2 Formulario de donación con monto, método de pago y mensaje opcional
- 5.3 Lista de causas destacadas
- 5.4 Footer
CONTACT
- 6.1 Header
- 6.2 Formulario de contacto con nombre, email, asunto y mensaje
- 6.3 Mapa estático y datos de ubicación
- 6.4 Footer
PROMPTS RELACIONADOS · SIN FINES DE LUCRO
