NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web estática completa (un solo archivo HTML) usando Tailwind CSS vía CDN y JavaScript vanilla. Marca ficticia: CorazónAltruista (fundación sin ánimo de lucro). Paleta de colores: #1A374D (azul marino), #406874 (gris azulado), #70A9A1 (verde agua), #F0F5F9 (gris muy claro), #E07A5F (coral suave) para acentos. Tipografía: Inter para cuerpo y headings, peso 400‑700, importada de Google Fonts.
Estructura:
- <header class="fixed w-full bg-white shadow-md z-50"> con logo de texto "CorazónAltruista" y menú horizontal con enlaces numerados (01 Sobre nosotros, 02 Proyectos, 03 Voluntarios, 04 Donar, 05 Galería, 06 Blog, 07 Contacto) y botón primario "Únete".
- <section id="hero" class="relative h-screen flex items-center bg-gradient-to-r from-[#1A374D] to-[#406874] text-white overf
4.361 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.361 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 barra de navegación y botón de llamada a la acción
- 1.2 Hero con título, video interactivo, imagen de fondo, mensaje inspirador y botón de donación
- 1.3 Bloque "Nuestra Historia" con encabezado, texto descriptivo e imágenes paralelas
- 1.4 Métricas de impacto con contadores animados y breves descripciones
- 1.5 Galería visual con cuadrícula de imágenes
- 1.6 Últimas noticias / blog en formato de tarjetas
- 1.7 Pie de página con enlaces institucionales, redes sociales y datos de contacto
ABOUT
- 1.1 Cabecera (reutiliza la global)
- 2.1 Sección de misión y visión con tipografía grande
- 2.2 Línea de tiempo de hitos con iconos
- 2.3 Equipo con tarjetas de perfil
- 2.4 Llamada a la acción para ser voluntario
CONTACT
- 1.1 Cabecera global
- 2.1 Formulario de contacto con campos nombre, email, asunto y mensaje
- 2.2 Mapa embebido y datos de ubicación
- 2.3 Botones de redes sociales
DONATE
- 1.1 Cabecera global
- 2.1 Información de donación y opción de monto personalizado
- 2.2 Testimonios rotativos
- 2.3 Botón de pago externo
GALLERY
- 1.1 Cabecera global
- 2.1 Galería de imágenes con efecto hover y lightbox
- 2.2 Filtro por categoría
BLOG
- 1.1 Cabecera global
- 2.1 Listado de entradas con imagen, título y extracto
- 2.2 Paginación
- 2.3 Sidebar con categorías y newsletter
PROMPTS RELACIONADOS · FASHION
