NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia "Saber Marea" (sabermarea.com), una ONG que conecta recursos y acciones para generar impacto real. El proyecto debe ser un único archivo HTML que incluya Tailwind CSS vía CDN y JavaScript vanilla. Replicar la estructura y estética del diseño analizado:
- **Paleta de colores**: #0A3D62 (azul profundo), #1B9CFC (azul brillante), #F5F6FA (gris muy claro), #FFFFFF (blanco), #576574 (gris medio) para texto.
- **Tipografía**: "Inter" para títulos y párrafos, pesos 400‑600, importada desde Google Fonts.
- **Header**: barra de navegación fija, logo a la izquierda, menú principal con enlaces (Inicio, Sobre Nosotros, Programas, Historias, Contacto) y dropdowns para secciones internas, botón CTA "Contactar" a la derecha. Adaptativo: colapso a hamburg
3.914 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.914 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 fija con logo, menú principal con dropdowns y botón “Contactar”.
- 1.2 Hero: título principal, descripción breve y botones CTA, junto a presentación gráfica de diferentes versiones de la página de inicio.
- 1.3 Sección de confianza: encabezado, párrafo introductorio y grid de logotipos de colaboradores.
- 1.4 Footer: columnas con enlaces institucionales, información de contacto y iconos de redes sociales.
ABOUT US
- 1.1 Cabecera idéntica a la Home.
- 1.2 Banner interior con título y descripción.
- 1.3 Texto descriptivo de la misión y visión, acompañado de imágenes.
- 1.4 Equipo destacado en tarjetas.
- 1.5 Footer igual que Home.
PROGRAMS
- 1.1 Cabecera.
- 1.2 Banner interior.
- 1.3 Lista de programas en tarjetas con imagen, título y breve descripción.
- 1.4 CTA para donar o participar.
- 1.5 Footer.
SUCCESS STORIES
- 1.1 Cabecera.
- 1.2 Banner interior.
- 1.3 Galería de historias de éxito con tarjetas y enlaces a detalle.
- 1.4 Footer.
CONTACT US
- 1.1 Cabecera.
- 1.2 Banner interior.
- 1.3 Formulario de contacto (nombre, email, asunto, mensaje) y mapa embebido.
- 1.4 Footer.
PROMPTS RELACIONADOS · EDUCACIÓN
