NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la ONG ficticia "Instituto Marea" (institutomarea.com) usando sólo HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. El objetivo es replicar el diseño visual y la estructura de una web benéfica con los siguientes requisitos:
- **Paleta de colores**: #1A3A5F (azul oscuro), #2C5F9E (azul medio), #F2F5FA (gris muy claro), #E63946 (rojo acento), #FFFFFF (blanco).
- **Tipografía**: Fuente principal "Inter" (cargar desde Google Fonts) para títulos y cuerpo, peso 400‑600.
- **Header**: barra fija con logo (texto placeholder "Instituto Marea"), menú horizontal con enlaces Home, Quiénes somos, Programa, Causas, Blog, Donar; botón destacado "Donar" con ícono de corazón. Menú colapsable en móvil (hamburguesa) que muestra enlaces en bloque.
- **Footer**:
4.322 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.322 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ú y botón Donar
- 1.2 Hero con título, subtítulo, métricas y botones "Nuestras Causas" y "Nuestro Programa"
- 1.3 Bloque "Quiénes somos" con etiqueta, título, párrafo y contadores de familias ayudadas, voluntarios, libros distribuidos, etc.
- 1.4 Cuadrícula de causas (4 tarjetas) con icono, título y breve descripción
- 1.5 Sección Programa con título, párrafo y galería de imágenes
- 1.6 Carrusel de testimonios (foto, nombre, comentario)
- 1.7 Formulario breve de suscripción al newsletter
- 1.8 Footer con columnas: Sobre nosotros, Enlaces rápidos, Redes sociales, Información de contacto
ABOUT
- 1.1 Header reutilizado
- 1.2 Imagen hero interna y texto introductivo
- 1.3 Historia de la organización con timeline
- 1.4 Equipo directivo con tarjetas de perfil
- 1.5 Valores y misión en bloques de iconos
- 1.6 Footer reutilizado
PROGRAM
- 1.1 Header
- 1.2 Banner con título y descripción del programa
- 1.3 Lista de iniciativas con imagen, título y botón "Más info"
- 1.4 Estadísticas resumidas
- 1.5 Footer
CAUSES
- 1.1 Header
- 1.2 Grid de causas (3 columnas) con imagen, título, breve texto y botón "Participar"
- 1.3 Mapa interactivo de áreas de acción
- 1.4 Footer
BLOG
- 1.1 Header
- 1.2 Lista de artículos en formato tarjeta (imagen, título, extracto, fecha)
- 1.3 Sidebar con categorías y últimos posts
- 1.4 Paginación
- 1.5 Footer
DONATE
- 1.1 Header
- 1.2 Formulario de donación (monto, frecuencia, datos personales)
- 1.3 Testimonios de donantes
- 1.4 Footer
PROMPTS RELACIONADOS · EDUCACIÓN
