NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático usando HTML, Tailwind CSS (CDN) y JavaScript vanilla en un solo archivo que reproduzca el diseño de una plataforma comunitaria urbana llamada "VivaCalle". La paleta de colores debe incluir:
- Primario: #604F8C (violeta profundo)
- Secundario: #3A7CA5 (azul grisáceo)
- Acento: #F4A261 (naranja suave)
- Fondo: #F9FAFB (gris muy claro)
Tipografía: usar 'Inter' para encabezados y párrafos, con peso 400‑700.
Estructura requerida:
1. Header (fixed) con logo SVG genérico, menú horizontal (Home, About us, Services, News, Events, Contact us) y botón primario "Contact us".
2. Hero Section: fondo gris claro, texto centrado "Bienvenido a VivaCalle", título grande en negrita, y carrusel de 8 imágenes (placeholder) con transición suave (CSS). Animaciones de entrada con fade‑i
3.595 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.595 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 Encabezado fijo con logo, menú y botón de contacto
- 1.2 Hero con mensaje de bienvenida, título y carrusel de imágenes
- 1.3 Bloque “Descubre la ciudad” con CTA, imagen y texto repetido animado
- 1.4 Sección de servicios rápidos con tarjetas en grid de 2‑3 columnas
- 1.5 Footer con enlaces institucionales, redes y suscripción
ABOUT US
- 2.1 Encabezado interno (heredado)
- 2.2 Título y descripción de la organización
- 2.3 Imagen ilustrativa y texto de misión/visión
- 2.4 Equipo en tarjetas
- 2.5 Footer
SERVICES
- 3.1 Encabezado interno
- 3.2 Listado de servicios con tarjetas descriptivas
- 3.3 Íconos y llamados a la acción
- 3.4 Footer
NEWS
- 4.1 Encabezado interno
- 4.2 Grid de artículos con imagen, título, resumen y fecha
- 4.3 Paginación
- 4.4 Footer
EVENTS
- 5.1 Encabezado interno
- 5.2 Calendario o listado de eventos con tarjetas
- 5.3 Botón de registro
- 5.4 Footer
CONTACT US
- 6.1 Encabezado interno
- 6.2 Formulario de contacto sencillo (nombre, email, mensaje)
- 6.3 Mapa estático
- 6.4 Footer
PROMPTS RELACIONADOS · EDUCACIÓN
