NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático de una ONG ficticia llamada Alianza Aurora (alianzaaurora.org). Usa HTML5, Tailwind CSS vía CDN y JavaScript vanilla en un solo archivo. Paleta de colores: #0A2740 (azul marino), #2E7D32 (verde), #F9F9F9 (blanco), #FFB300 (ámbar), #FFFFFF (texto). Tipografía: "Inter" para encabezados y cuerpo. Estructura:
- <header> fijo con logo (SVG placeholder) a la izquierda y menú de enlaces (About, How It Works, Impact, Partnership, FAQ, Contact) a la derecha; botón “Contact Us” destacado; ícono hamburguesa para móvil que despliega menú overlay con enlaces y redes sociales (Facebook, Twitter, LinkedIn).
- <section id="hero"> ocupa pantalla completa, fondo degradado azul‑verde, título grande centrado con highlight en color ámbar, párrafo introductorio y dos botones (primary:
4.178 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.178 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 Cabecera con logo y menú responsivo
- 1.2 Hero principal con claim, texto introductorio y botones de acción
- 1.3 Vídeo de fondo a pantalla completa
- 1.4 Sobre nosotros (chips, título, grid de tarjetas con imágenes)
- 1.5 Cómo funciona (pasos visuales)
- 1.6 Impacto (contadores animados)
- 1.7 Socios (logotipos en carrusel)
- 1.8 FAQ (acordeón)
- 1.9 Footer (enlaces, redes, suscripción)
ABOUT
- 2.1 Título y chips de introducción
- 2.2 Texto de misión y visión
- 2.3 Imagen destacada
HOW-IT-WORKS
- 3.1 Título y chips
- 3.2 Tres columnas con íconos y descripciones de procesos
IMPACT
- 4.1 Título y chips
- 4.2 Cuatro contadores grandes con cifras de proyectos, beneficiarios, voluntarios y alianzas
PARTNERSHIP
- 5.1 Título y texto breve
- 5.2 Logos de organizaciones colaboradoras en formato de cuadrícula
FAQ
- 6.1 Título y chips
- 6.2 Lista de preguntas frecuentes con acordeón interactivo
CONTACT
- 7.1 Formulario de contacto simple (nombre, email, mensaje)
- 7.2 Información de contacto y mapa incrustado
FOOTER
- 8.1 Navegación secundaria, redes sociales, suscripción al newsletter y datos legales
PROMPTS RELACIONADOS · MISCELÁNEO
