NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático de una ONG ficticia llamada "Formación Nimbo" (formacionnimbo.com) usando únicamente HTML, Tailwind CSS (CDN) y JavaScript vanilla en un único archivo. La web debe reproducir el diseño y estructura del sitio analizado, respetando los siguientes requisitos:
- **Paleta de colores**: #1A3E5C (azul oscuro primario), #2C7DA0 (azul medio), #F1F6F9 (gris muy claro fondo), #FFFFFF (blanco), #E63946 (rojo acento para botones). Usa estos colores en fondos, textos y botones.
- **Tipografía**: Fuente `Inter` (Google Fonts) para todo el texto, con tamaños: display‑02 = 4rem, heading‑lg = 2rem, body‑md = 1rem, botones = 0.875rem.
- **Header**: barra de navegación fija con logotipo (texto "Formación Nimbo" con parte en color primario), menú horizontal con enlaces: Home, Sobre
4.672 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.672 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 Navbar con logotipo, menú principal multi‑nivel y botón de contacto
- 1.2 Hero principal con título, párrafo y dos botones
- 1.3 Carrusel de imágenes tipo marquee
- 1.4 Bloque de causas (tres columnas con icono + título)
- 1.5 Sección de impacto (contadores animados)
- 1.6 Llamado a la acción secundario
- 1.7 Testimonios (grid de tarjetas)
- 1.8 Footer con enlaces, redes y datos de la ONG
ABOUT
- 1.1 Header compartido
- 1.2 Título y texto institucional
- 1.3 Historia con imagen y texto alternado
- 1.4 Equipo (grid de perfiles)
- 1.5 Valores (iconos con descripción)
- 1.6 CTA de donación
- 1.7 Footer compartido
SOLUTIONS
- 1.1 Header compartido
- 1.2 Lista de soluciones/proyectos (cards con imagen, título y breve descripción)
- 1.3 Cada solución enlaza a detalle
- 1.4 CTA para voluntariado
- 1.5 Footer compartido
PROJECTS
- 1.1 Header compartido
- 1.2 Galería de proyectos (grid con filtro por tema)
- 1.3 Botón de carga más
- 1.4 Footer compartido
BLOG
- 1.1 Header compartido
- 1.2 Lista de artículos (cards con imagen, título, extracto, fecha)
- 1.3 Sidebar con categorías y últimas noticias
- 1.4 Footer compartido
CONTACT
- 1.1 Header compartido
- 1.2 Formulario de contacto (nombre, email, mensaje, botón enviar)
- 1.3 Mapa incrustado
- 1.4 Información de contacto y redes
- 1.5 Footer compartido
PROMPTS RELACIONADOS · EDUCACIÓN
