NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa para la marca ficticia **Taller Delta** (fundación sin ánimo de lucro) usando **HTML estático + Tailwind CSS CDN + JavaScript vanilla** en un solo archivo.
- **Paleta de colores**: primario #0066CC (azul), secundario #00A859 (verde), neutro #F4F7FA (gris claro), texto #212529 (gris oscuro), acentos #FFD700 (amarillo).
- **Tipografía**: `Inter` para títulos y `Source Sans Pro` para cuerpo, ambas importadas de Google Fonts.
- **Header**: barra fija, logo a la izquierda, menú horizontal (Inicio, Programas, Historias, Blog, Contacto) con dropdown mega‑menú para "Recursos" que muestra enlaces a páginas auxiliares. Botón primario "Participa" a la derecha.
- **Footer**: fondo gris claro, columnas con enlaces institucionales, suscripción al boletín (campo e
3.928 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.928 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 llamada a la acción
- 1.2 Hero con tagline, título, descripción y botón "Participa"
- 1.3 Bloque de estadísticas con contadores animados
- 1.4 Sección de programas destacados en tarjetas
- 1.5 Historias de impacto con carrusel de testimonios
- 1.6 Últimas entradas del blog en formato grid
- 1.7 Llamado a la donación con botón destacado
- 1.8 Footer con enlaces institucionales, redes sociales y formulario de suscripción
PROGRAMAS
- 2.1 Header idéntico al de Home
- 2.2 Lista de programas con imagen, título, breve descripción y botón "Saber más"
- 2.3 Sección de métricas específicas del programa
- 2.4 Footer idéntico al de Home
HISTORIAS
- 3.1 Header
- 3.2 Grid de historias con imagen, título, extracto y enlace a detalle
- 3.3 Testimonios en carrusel
- 3.4 Footer
BLOG
- 4.1 Header
- 4.2 Lista de artículos en cards con imagen, categoría, fecha y excerpt
- 4.3 Paginación simple
- 4.4 Footer
CONTACTO
- 5.1 Header
- 5.2 Formulario de contacto con campos nombre, email, asunto y mensaje
- 5.3 Mapa incrustado
- 5.4 Información de contacto y redes sociales
- 5.5 Footer
PROMPTS RELACIONADOS · MISCELÁNEO
