NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia "Escuela Brisa" (escuelabrisa.com), una organización sin ánimo de lucro que gestiona campañas de ayuda y voluntariado. Utiliza solo HTML estático con Tailwind CSS vía CDN y JavaScript vanilla en un único archivo.
**Paleta de colores**:
- Primario: #1E3A8A (azul profundo)
- Secundario: #10B981 (verde esmeralda)
- Fondo claro: #F9FAFB
- Texto oscuro: #111827
- Accento: #F59E0B (ámbar)
**Tipografía**:
- Fuente principal: Inter (cargar desde Google Fonts)
- Peso: 400 para párrafos, 600 para encabezados, 700 para títulos destacados.
**Estructura**:
1. **Header**: barra blanca con borde inferior gris, logo a la izquierda (placeholder), menú de navegación horizontal (Home, Quiénes somos, Programas, Blog, Campañas, Voluntarios, Donar,
4.594 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.594 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 con logo, menú responsivo y botón "Donar ahora"
- 1.2 Hero: título grande, texto secundario, fondo de imagen difuminada, overlay oscuro y botón "Ver cómo ayuda"
- 1.3 Bloque "Quiénes somos": etiqueta, título, párrafo introductorio, botón "Más sobre nosotros"
- 1.4 Lista de valores en columnas numeradas 01‑05 con iconos y texto breve
- 1.5 Sección de campañas: etiqueta, título, carrusel de tarjetas con imagen, título y descripción
- 1.6 Footer: columnas de enlaces institucionales, información de contacto, iconos de redes sociales
ABOUT
- 2.1 Cabecera reutilizada
- 2.2 Imagen principal y texto institucional con historia
- 2.3 Equipo, misión y visión en bloques de texto e imágenes
- 2.4 Botón de llamado a la acción "Colabora"
PROGRAMS
- 3.1 Cabecera
- 3.2 Grid de programas con tarjetas, imágenes y descripciones breves
- 3.3 Botón para explorar cada programa
BLOG
- 4.1 Cabecera
- 4.2 Lista de artículos con imagen, título, extracto y botón "Leer más"
- 4.3 Paginación
CAMPAIGNS
- 5.1 Cabecera
- 5.2 Detalle de campaña: imagen hero, objetivo, progreso (barra), botón de donación
- 5.3 Historias de impacto
VOLUNTEERS
- 6.1 Cabecera
- 6.2 Formulario de registro rápido y listado de oportunidades
DONATION
- 7.1 Cabecera
- 7.2 Formulario de donación con monto predefinido, método de pago y mensaje de agradecimiento
CONTACT
- 8.1 Cabecera
- 8.2 Formulario de contacto, mapa incrustado y datos de la oficina
PROMPTS RELACIONADOS · EDUCACIÓN
