NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático de una ONG ficticia llamada Altruvera usando HTML, Tailwind CDN y JavaScript vanilla en un solo archivo. La página principal debe reproducir fielmente los patrones de UI del sitio analizado:
- Paleta de colores: #1A3A5F (azul marino), #F4A261 (amarillo mostaza), #E9E9E9 (gris claro), #FFFFFF (blanco), #333333 (texto oscuro).
- Tipografía: Inter (sans‑serif) para títulos y body, peso 400‑700.
- Header: barra superior con texto de agradecimiento, logo a la izquierda, menú horizontal (Sobre Nosotros, Programas, Eventos, Noticias, Donar, Contacto) y botón destacado "Donar ahora" en amarillo, hamburguesa para móvil.
- Hero: columna izquierda con título grande, párrafo descriptivo y botón "Únete" (estilo amarillo con ícono flecha), columna derecha con imagen ilustr
3.665 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.665 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 superior con mensaje de agradecimiento
- 1.2 Navegación principal con logo, enlaces y botón de donación
- 1.3 Hero con título, descripción, botón de participación y datos de impacto
- 1.4 Sección "Quiénes somos" con imágenes laterales, texto explicativo y métricas clave
- 1.5 Programa de acción con tarjetas de causas, barra de progreso y botón de detalle
- 1.6 Footer con enlaces institucionales, contacto y redes sociales
ABOUT
- 2.1 Encabezado de página con título y breadcrumb
- 2.2 Imagen destacada y texto descriptivo de la organización
- 2.3 Estadísticas de impacto ampliadas
- 2.4 Botón de volver a inicio
CAUSES
- 3.1 Lista de tarjetas de causas con imagen, título, descripción corta, barra de recaudación y botón "Ver programa"
- 3.2 Filtros de categoría (opcional)
- 3.3 Paginación o carga adicional
DONATE
- 4.1 Formulario de donación simple con importe personalizable
- 4.2 Opciones de método de pago
- 4.3 Botón de confirmar donación
CONTACT
- 5.1 Formulario de contacto con nombre, email, asunto y mensaje
- 5.2 Información de contacto y mapa embebido
- 5.3 Enlaces a redes sociales
PROMPTS RELACIONADOS · BELLEZA / SPA
