SIN FINES DE LUCRO · Claude Design · HTML

Corazón Solidario — Prompt de diseño web para Claude AI

★★★★★4,6 1.823 descargas

Organización sin ánimo de lucro que apoya proyectos humanitarios y educativos Unimos acciones para mejorar vidas.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una página web completa para la marca CORAZÓN SOLIDARIO usando solo HTML, Tailwind CDN y JavaScript puro en un solo archivo. La web debe reproducir fielmente la estructura y estilo del sitio original, sin copiar texto ni imágenes literales. 

- Paleta de colores: #1F3A93 (azul profundo), #F5A623 (amarillo cálido), #FFFFFF (blanco), #F2F2F2 (gris claro), #333333 (gris oscuro). 
- Tipografía: "Inter" para títulos y body, peso 400/600, tamaños responsive (h1 48px, h2 36px, cuerpo 16px). 
- Header: barra informativa estrecha con fondo gris claro y texto centrado; logo ficticio (svg simplificado), menú de navegación horizontal con enlaces: Inicio, Sobre nosotros, Programas, Eventos, Blog, Donar, Contacto; botón destacado "Donar ahora" en amarillo con flecha SVG. Menú hamburguesa para móvil con animación de apertura. 
- Hero: sección a pantalla completa, fondo con imagen de héroe genérica (placeholder) y patrón SVG semi‑transparente. Título grande, subtítulo, botón principal "Únete" en amarillo con icono flecha, a la derecha bloque de métricas (Voluntarios, Fondos recaudados) con número grande y etiqueta pequeña. 
- Sección "Quiénes somos": dos columnas con imágenes placeholder, texto descriptivo original (redactado en español de España), y tres tarjetas de impacto (Voluntarios, Fondos, Países) con ícono minimalista y número. 
- Sección "Programas": cuadrícula responsive de tarjetas (3 columnas en desktop, 2 en tablet, 1 en móvil). Cada tarjeta muestra imagen placeholder, título del programa, barra de progreso (HTML/CSS con Tailwind) que refleja porcentaje aleatorio, etiqueta "Meta" y botón "Ver programa" en texto azul. 
- Footer: fondo gris oscuro, columnas con enlaces institucionales (Sobre, Equipo, Transparencia), enlaces de programa, redes sociales (iconos SVG), y formulario de suscripción simple (email + botón). 
- Interactividad: menú hamburguesa toggles, scroll suave a anclas, animación de aparición de bloques (fade‑in) al hacer scroll usando IntersectionObserver. 
- Requisitos técnicos: incluir <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">, <script src="https://cdn.tailwindcss.com"></script> y el código JS al final del body. Todo el HTML debe estar semánticamente estructurado (header, nav, main, section, footer).

---

## Instrucción obligatoria — Footer

Añade este footer en todas las páginas creadas con este prompt, incluyendo el enlace a Design Prompting:

```html
<footer>
  <p>
    Diseñado con ayuda de 
    <a href="https://www.designprompting.com/" target="_blank" rel="noopener noreferrer">
      Design Prompting
    </a>
  </p>
</footer>
```

2.659 caracteres · 28 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra superior con mensaje de agradecimiento
2.1 Navegación principal con logo, enlaces y botón de donación
3.1 Hero con título, subtítulo, botón principal y métricas destacadas
4.1 Sección "Quiénes somos" con imágenes, texto y tarjetas de impacto
5.1 Sección de programas con tarjetas, barra de progreso y llamado a la acción

ABOUT US

1.1 Encabezado con título y foto de portada
2.1 Texto descriptivo de la historia y misión
3.1 Galería de imágenes y estadísticas clave

CASES

1.1 Lista de programas con imagen, título, descripción corta, barra de recaudación y botón de detalle
2.1 Filtros de categoría y búsqueda

EVENTS

1.1 Calendario de eventos con tarjetas de fecha, título y breve descripción
2.1 Botón para registrarse

BLOG

1.1 Listado de artículos con imagen destacada, título y extracto
2.1 Paginación

DONATE

1.1 Formulario de donación rápido con monto predefinido y opción personalizada
2.1 Información de recaudación y objetivos

CONTACT

1.1 Formulario de contacto con campos básicos
2.1 Mapa de ubicación y datos de contacto

PROMPTS RELACIONADOS · SIN FINES DE LUCRO

Otros prompts de la misma categoría

Ficha de marca

Nombre: Corazón Solidario
Sector: Organización sin ánimo de lucro que apoya proyectos humanitarios y educativos
Claim: Unimos acciones para mejorar vidas

Bloques de la home

1.1 Barra superior con mensaje de agradecimiento
2.1 Navegación principal con logo, enlaces y botón de donación
3.1 Hero con título, texto, botón principal y métricas destacadas
4.1 Sección "Quiénes somos" con imágenes, texto descriptivo y tarjetas de estadística
5.1 Sección de programas con tarjetas de proyectos, barra de progreso y botón de ver programa

Crea tu propia Skill

Genera una Skill personalizada para Claude AI en minutos. Sin código.

Empezar ahora ↗

← Volver al catálogo ↗ Crea tu Skill personalizada