NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático de una plataforma de cursos online bajo la marca **Instituto Alba**. Usa **HTML5**, **Tailwind CSS CDN** y **JavaScript vanilla** en un solo archivo. Mantén la siguiente paleta de colores: primario #0D3B66, secundario #FAF0CA, accent #F4D35E, texto principal #1A1A1A, fondos claros #FFFFFF. Tipografía: encabezados con *Inter* (sans‑serif, weight 600) y cuerpo con *Roboto* (regular 400).
**Estructura global**
- `<header>` fijo, altura 80px, fondo blanco, sombra ligera. Logo a la izquierda (texto "Instituto Alba" en Inter bold, color primario). Menú centrado con enlaces: Home, About, Courses, Mentors, FAQ, Contact, Blog. Botón de carrito a la derecha con ícono SVG y badge contador.
- `<main>` dividido en secciones numeradas según el apartado *secciones* del JSON.
4.739 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.739 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 fija con logo, menú y carrito
- 1.2 Hero principal con título, descripción y botón CTA
- 1.3 Bloque de ventajas (3 columnas con icono, título y texto breve)
- 1.4 Lista de cursos destacados (grid de tarjetas)
- 1.5 Sección de testimonios (carrusel de citas)
- 1.6 Suscripción a newsletter (formulario)
- 1.7 Footer con enlaces, redes y contacto
ABOUT
- 2.1 Hero interno con título y descripción
- 2.2 Historia de la marca (texto + imagen)
- 2.3 Equipo de mentores (grid de tarjetas)
- 2.4 Valores y misión (iconos + texto)
- 2.5 CTA a explorar cursos
COURSES
- 3.1 Filtro y búsqueda de cursos
- 3.2 Lista de cursos en grid (imagen, título, precio, botón)
- 3.3 Paginación
COURSE DETAIL
- 4.1 Imagen destacada y título del curso
- 4.2 descripción larga, contenido del módulo y botón de compra
- 4.3 Información del mentor y reseñas
- 4.4 Sección de preguntas frecuentes
MENTORS
- 5.1 Grid de mentores con foto, nombre, especialidad y enlace a perfil
BLOG
- 6.1 Lista de artículos (imagen, título, excerpt, fecha)
- 6.2 Sidebar con categorías y etiquetas
FAQ
- 7.1 Preguntas frecuentes en acordeón
CONTACT
- 8.1 Formulario de contacto completo
- 8.2 Mapa incrustado y datos de oficina
CART
- 9.1 Sidebar derecha con listado de productos, cantidades y precios
- 9.2 Resumen de subtotal y botón de checkout
CHECKOUT
- 10.1 Formulario de datos de facturación y pago
- 10.2 Resumen del pedido y botón confirmar compra
PROMPTS RELACIONADOS · EDUCACIÓN
