NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático para la marca ficticia "Campus Sierra" (campussierra.com), sector ONG, usando sólo HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. Replicar el diseño analizado:
- Paleta de colores: #0F4C81 (azul profundo), #0A81AB (azul medio), #27A9E1 (azul claro), #F4F7FA (gris muy claro), #FFFFFF (blanco), #1E2A38 (texto oscuro).
- Tipografía: Inter (regular 400, medium 500, bold 700) para títulos y body.
- Header: barra plena con logo a la izquierda, menú de nivel superior (Home, Sobre nosotros, Programas, Historias, Blog, Donar) y mega‑dropdown bajo "Más" que muestra tres columnas (Páginas principales, Empresa, Utilidades) con enlaces de ejemplo. Botón de llamada a la acción "Obtener plantilla" a la derecha, visible sólo en escritorio; en móvil un bo
4.081 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.081 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ú principal y mega‑dropdown
- 1.2 Hero con frase, título, texto descriptivo, botón principal y contadores de impacto
- 1.3 Programas destacados en tarjetas alineadas en cuadrícula
- 1.4 Historias de impacto en rejilla o carrusel
- 1.5 Llamada a la acción a donar / involucrarse
- 1.6 Footer con datos de contacto, enlaces rápidos y redes sociales
ABOUT
- 2.1 Header reutilizado
- 2.2 Área de presentación con imagen y texto institucional
- 2.3 Misión, visión y valores en columnas
- 2.4 Equipo con avatares y breves bios
- 2.5 Footer
PROGRAMS
- 3.1 Header reutilizado
- 3.2 Lista de programas en tarjetas con imagen, título y resumen
- 3.3 Filtro por categoría
- 3.4 Botón para conocer detalle
- 3.5 Footer
STORIES
- 4.1 Header reutilizado
- 4.2 Grid de historias con imágenes y extractos
- 4.3 Paginación o carga incremental
- 4.4 Footer
BLOG
- 5.1 Header reutilizado
- 5.2 Lista de artículos con imagen, título, fecha y extracto
- 5.3 Sidebar con categorías y últimos posts
- 5.4 Footer
DONATE
- 6.1 Header reutilizado
- 6.2 Formulario de donación sencillo (monto, método, datos básicos)
- 6.3 Testimonios de donantes
- 6.4 Footer
CONTACT
- 7.1 Header reutilizado
- 7.2 Formulario de contacto (nombre, email, mensaje)
- 7.3 Mapa integrado
- 7.4 Información de contacto y horario
- 7.5 Footer
PROMPTS RELACIONADOS · EDUCACIÓN
