NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático de una ONG ficticia llamada "Aula Orion" (dominio aulaorion.com) usando HTML simple, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. La página principal debe replicar el diseño de la plantilla analizada:
- Paleta de colores: verde oscuro #0F4C5C, verde más claro #1E7F86, azul pastel #A7C7E7, gris claro #F5F5F5, blanco #FFFFFF.
- Tipografía: Inter (Google Fonts) para títulos y texto, peso 400‑700.
- Header fijo con logo a la izquierda, menú centrado (Home, Sobre Nosotros, Programas, Causas, Voluntariado, Blog, Contacto) y botón destacado "Donar ahora" a la derecha con estilo terciario (borde verde, texto verde). Menú responsive con hamburguesa.
- Hero de altura completa con fondo degradado verde‑azul, título grande (h1) centrado, subtítulo, y bot
3.845 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.845 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, navegación principal y botón de donación
- 1.2 Hero con título, subtítulo y llamado a acción
- 1.3 Sección de causas destacadas en cuadrícula
- 1.4 Contadores de impacto
- 1.5 Testimonios en carrusel
- 1.6 Blog reciente con tarjetas
- 1.7 Llamado a ser voluntario
- 1.8 Footer con enlaces y redes
ABOUT US
- 2.1 Header idéntico
- 2.2 Imagen hero institucional y texto descriptivo
- 2.3 Valores en tarjetas
- 2.4 Equipo con fotos y breves biografías
- 2.5 Footer
SERVICES
- 3.1 Header
- 3.2 Lista de programas y servicios con iconos
- 3.3 Sección de impacto por programa
- 3.4 CTA a donar
- 3.5 Footer
CAUSES
- 4.1 Header
- 4.2 Grid de causas con imágenes y botón "Aprender más"
- 4.3 Métricas de cada causa
- 4.4 CTA a donar o voluntariado
- 4.5 Footer
VOLUNTEER
- 5.1 Header
- 5.2 Formulario de inscripción rápida
- 5.3 Beneficios de ser voluntario
- 5.4 Testimonios de voluntarios
- 5.5 Footer
DONATE
- 6.1 Header
- 6.2 Formulario de donación con montos predefinidos
- 6.3 Testimonios de donantes
- 6.4 Información de seguridad y transparencia
- 6.5 Footer
BLOG
- 7.1 Header
- 7.2 Lista de artículos en tarjetas con imágenes, título y excerpt
- 7.3 Sidebar con categorías y últimos posts
- 7.4 Footer
CONTACT
- 8.1 Header
- 8.2 Formulario de contacto y mapa incrustado
- 8.3 Información de dirección y teléfono
- 8.4 Footer
PROMPTS RELACIONADOS · EDUCATION
