NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático de una ONG ficticia llamada Luz y Futuro usando HTML, Tailwind CSS (CDN) y JavaScript vanilla en un solo archivo. Utiliza la siguiente paleta de colores: primario #2C7A7B (verde azulado), secundario #F9AFAE (rosa claro), fondo #F5F5F5, texto principal #1A1A1A, texto alterno #FFFFFF. Tipografía: headings con 'Montserrat' (peso 700) y cuerpo con 'Open Sans' (peso 400), ambas importadas desde Google Fonts.
Estructura y requisitos:
- <header> fixed, con logo "Luz y Futuro" (texto, con estilo .text-2xl font-bold text-primary), menú de navegación horizontal (Quiénes somos, Nuestro Programa, Blog, Contacto) y botón destacado "Donar ahora" (.bg-secondary hover:bg-primary text-white px-4 py-2 rounded).
- <section id="hero"> video de fondo auto‑play, muted, loop, cubriend
3.905 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.905 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 fijo con logo, menú de navegación y botón de donación
- 1.2 Hero de página principal con vídeo full‑screen, título, subtítulo y botones CTA
- 1.3 Sección "Quiénes somos" con etiqueta de sección, encabezado, galería de cuatro imágenes y texto descriptivo
- 1.4 Sección "Nuestro Programa" con etiqueta, título, párrafo introductorio y tarjetas de programa en grid (imagen, título, descripción corta, enlace)
- 1.5 Footer con enlaces de navegación, información de contacto y redes sociales
QUIENES SOMOS
- 2.1 Banner interno con título y subtítulo
- 2.2 Texto largo de presentación
- 2.3 Galería de imágenes ampliada
- 2.4 Botón de volver a la home
PROGRAMAS
- 3.1 Lista de programas en formato grid de tarjetas
- 3.2 Cada tarjeta: imagen, título, breve descripción, botón "Ver programa"
- 3.3 Paginación o carga infinita (según necesidad)
DONAR
- 4.1 Formulario de donación con campos básicos (nombre, email, importe, método)
- 4.2 Botón de envío
- 4.3 Mensaje de agradecimiento tras envío
BLOG
- 5.1 Lista de artículos con imagen destacada, título, extracto y enlace
- 5.2 Sidebar con categorías y archivo
- 5.3 Paginación
CONTACTO
- 6.1 Formulario de contacto (nombre, email, mensaje)
- 6.2 Mapa embebido y datos de ubicación
- 6.3 Información de teléfono y correo
PROMPTS RELACIONADOS · EDUCACIÓN
