NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Create a full‑page static website for the fictitious brand **AprendeLibre** (educación). Use only HTML, TailwindCSS via CDN and vanilla JavaScript in a single file. Follow the visual pattern of a modern e‑learning template:
- **Palette**: primary #1E3A8A (indigo‑900), secondary #3B82F6 (indigo‑500), accent #F59E0B (amber‑500), background #F9FAFB (gray‑50), text #111827 (gray‑900).
- **Typography**: Font‑Family "Inter", fallback sans‑serif. Headings use `font-bold` with sizes: h1 `text-4xl md:text-5xl`, h2 `text-3xl md:text-4xl`, h3 `text-2xl`. Body text `text-base`.
- **Header**: Fixed top bar with logo (placeholder SVG), navigation menu containing dropdowns (Home, Cursos, Páginas, Blog, Contacto). Use Tailwind `group` and `absolute` for dropdown panels, hover to reveal. Right side cart
4.245 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.245 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 Barra de navegación con logo, menú desplegable multi‑nivel y botón de carrito
- 1.2 Hero con título principal, subtítulo y llamada a la acción
- 1.3 Sección de destacados: tarjetas de cursos con imagen, categoría y botón
- 1.4 Estadísticas contadores animados
- 1.5 Testimonios en carrusel
- 1.6 Pie de página con enlaces de navegación, suscripción y datos de contacto
COURSES
- 2.1 Listado de cursos en cuadrícula con filtros por tipo (gratuito / de pago)
- 2.2 Tarjeta de curso con imagen, título, breve descripción y botón "Ver detalle"
- 2.3 Paginación al final del listado
ABOUT
- 3.1 Bloque de presentación de la plataforma con imagen y texto descriptivo
- 3.2 Equipo con fotos circulares y breves biografías
- 3.3 Valores y misión en tabla de iconos
BLOG
- 4.1 Lista de artículos con miniatura, título, extracto y fecha
- 4.2 Sidebar con categorías y últimos artículos
CONTACT
- 5.1 Formulario de contacto con campos nombre, email, asunto y mensaje
- 5.2 Mapa incrustado y datos de contacto
FOOTER
- 6.1 Enlaces de navegación rápidos
- 6.2 Suscripción a newsletter
- 6.3 Información legal y redes sociales
PROMPTS RELACIONADOS · LMS / CURSOS ONLINE
