NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia "UrbiaConex" (plataforma digital de información y servicios municipales) usando solo HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. El diseño debe replicar el patrón visual del ejemplo proporcionado:
- Cabecera fija con logo a la izquierda, menú de navegación (Home, Sobre nosotros, Servicios, Noticias, Eventos) y botón primario "Contactar" a la derecha. Menú colapsable en móvil con ícono hamburguesa.
- Paleta de colores: gris oscuro (#606060), azul profundo (#1A3B5D), blanco (#FFFFFF) y acento naranja suave (#F29424).
- Tipografía: "Inter" para títulos y cuerpo, tamaños responsive (h1 3rem, h2 2rem, p 1rem).
- Hero de la página de inicio: fondo con slider automático de 8 imágenes (usar placeholders) y superposición de
3.658 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.658 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ú y botón de contacto
- 1.2 Hero con mensaje de bienvenida, título y slider de imágenes
- 1.3 Bloque destacado con fondo visual y texto animado
- 1.4 Sección de servicios rápidos en grid de tarjetas
- 1.5 Footer con enlaces y datos de contacto
ABOUT US
- 1.1 Cabecera compartida
- 1.2 Banner interno con título
- 1.3 Texto descriptivo de la entidad
- 1.4 Equipo y valores en columnas
- 1.5 Footer compartido
SERVICES
- 1.1 Cabecera compartida
- 1.2 Banner interno con título
- 1.3 Listado de servicios en tarjetas con iconos y breves descripciones
- 1.4 Llamado a la acción para contactar
- 1.5 Footer compartido
NEWS
- 1.1 Cabecera compartida
- 1.2 Banner interno con título
- 1.3 Grid de artículos con imagen, título y extracto
- 1.4 Paginación
- 1.5 Footer compartido
EVENTS
- 1.1 Cabecera compartida
- 1.2 Banner interno con título
- 1.3 Calendar o listado de eventos con fechas e imágenes
- 1.4 Botón para más información
- 1.5 Footer compartido
CONTACT US
- 1.1 Cabecera compartida
- 1.2 Formulario de contacto con campos nombre, email, mensaje
- 1.3 Información de contacto y mapa integrado
- 1.4 Footer compartido
PROMPTS RELACIONADOS · EDUCACIÓN
