NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa para la marca ficticia "Saber Vega" (educación online) usando HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. Emplea la siguiente paleta de colores: #1E3A8A (azul marino), #2563EB (azul primario), #F3F4F6 (gris claro), #111827 (gris oscuro), #10B981 (verde acento). Usa tipografía "Inter" para títulos y "Roboto" para cuerpo.
Estructura:
- <header class="fixed top-0 w-full bg-white shadow"> con logo a la izquierda, menú de enlaces (Home, Sobre Nosotros, Blog, Cursos, Páginas > dropdown con FAQ, Contacto, Términos, Privacidad) y botón de carrito que muestra cantidad.
- <section class="hero min-h-screen bg-blue-900 text-white flex items-center justify-center" id="hero"> con título grande, subtítulo y botón "Explorar cursos".
- <section class="f
3.462 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.462 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, enlaces principales y carrito
- 1.2 Hero con título grande y llamado a la acción
- 1.3 Sección de características con iconos y texto
- 1.4 Galería de cursos destacados en tarjetas
- 1.5 Testimonios en carrusel
- 1.6 CTA de suscripción
- 1.7 Footer con enlaces institucionales y redes sociales
ABOUT US
- 2.1 Banner interno con título
- 2.2 Texto institucional con imagen
- 2.3 Equipo destacado en tarjetas
- 2.4 Valores en bloques
- 2.5 Footer
BLOG
- 3.1 Lista de entradas en formato grid
- 3.2 Sidebar con categorías y búsqueda
- 3.3 Footer
COURSES
- 4.1 Header interno con filtro de categorías
- 4.2 Tarjetas de cursos con imagen, título, precio y botón
- 4.3 Paginación
- 4.4 Footer
FAQ
- 5.1 Preguntas frecuentes en acordeón
- 5.2 CTA de contacto
- 5.3 Footer
CONTACT US
- 6.1 Formulario de contacto con campos básicos
- 6.2 Mapa embebido
- 6.3 Información de contacto y redes
- 6.4 Footer
PROMPTS RELACIONADOS · EDUCACIÓN
