NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa para la marca ficticia "Formación Lira" (educación online) usando solo HTML, TailwindCSS CDN y JavaScript vanilla en un único archivo. La paleta de colores debe incluir: #1E3A8A (azul principal), #FBBF24 (amarillo acento), #F3F4F6 (gris claro fondo), #111827 (gris oscuro texto), #FFFFFF. Tipografía: Inter (Google Fonts) para títulos y texto y JetBrains Mono para bloques de código.
Estructura y estilo:
- HEADER: barra fija superior con fondo blanco, sombra ligera. Logo a la izquierda (texto "Formación Lira" en Inter bold 24px, color #1E3A8A). Menú de navegación con enlaces: Inicio, Cursos, Sobre Nosotros, Blog, Contacto. Enlace activo subrayado en amarillo. Buscador centrado con input rounded-full, placeholder "Buscar cursos o instructores" y botón de búsqueda
4.720 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.720 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 Header con logo, barra de navegación, buscador y carrito
- 1.2 Hero con título, descripción y llamado a la acción
- 1.3 Selector de audiencias (General, Estudiantes, Niños, Mayores)
- 1.4 Catálogo destacado de cursos con botones y etiquetas
- 1.5 Área de testimonios o beneficios
- 1.6 Formulario de suscripción al boletín
- 1.7 Footer con enlaces institucionales, redes sociales y datos de contacto
COURSES
- 1.1 Header
- 1.2 Lista de cursos en cuadrícula con filtros por categoría
- 1.3 Detalle de curso (imagen, descripción, instructor, precio, botón "Añadir al carrito")
- 1.4 Footer
ABOUT US
- 1.1 Header
- 1.2 Bloque de misión y visión con imagen ilustrativa
- 1.3 Equipo con tarjetas de perfil
- 1.4 Footer
BLOG
- 1.1 Header
- 1.2 Lista de artículos en formato tarjeta, con filtros por tema
- 1.3 Sidebar con categorías y posts destacados
- 1.4 Footer
CONTACT
- 1.1 Header
- 1.2 Formulario de contacto (nombre, email, mensaje)
- 1.3 Mapa incrustado
- 1.4 Footer
PROMPTS RELACIONADOS · EDUCACIÓN
