NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un proyecto web autoconstruido con HTML estático y Tailwind CSS (CDN) + JavaScript vanilla en un único archivo. La marca ficticia es Formación Polar (formacionpolar.com). Usa la siguiente paleta de colores: #0d172a (azul marino profundo), #1e293b (gris oscuro), #3b82f6 (azul primario), #d1d5db (gris claro), #f9fafb (blanco suave). Tipografía: font-sans con Inter (carga vía <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">).
Estructura requerida:
1. Header (nav-top) fijo en la parte superior, fondo #0d172a, logo texto Formación Polar en blanco, enlaces: "Soporte", "FAQ", "Iniciar sesión" y botón de búsqueda con icono. El menú colapsable para móviles debe abrir un drawer lateral.
2. Sidebar (layout-nav) a la izquierda, fond
4.453 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.453 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 superior con logo, enlaces principales y buscador
- 1.2 Menú lateral colapsable con secciones y enlaces internos
- 1.3 Área de contenido principal con título, descripción y botones de acción
- 1.4 Texto enriquecido con encabezados, párrafos, listas y enlaces
- 1.5 Sección "Start here" con tarjetas de categorías
- 1.6 Sección "Popular articles" con lista de tarjetas de artículos
- 1.7 Footer con bloques de ayuda, información y enlaces administrativos
SUPPORT
- 1.1 Barra de navegación superior idéntica a la Home
- 1.2 Menú lateral activo
- 1.3 Contenido centrado en soporte y formulario de contacto
- 1.4 Footer idéntico
FAQ
- 1.1 Barra de navegación superior
- 1.2 Menú lateral activo
- 1.3 Lista de preguntas frecuentes en formato acordeón
- 1.4 Footer
SIGN-IN
- 1.1 Barra de navegación superior
- 1.2 Menú lateral (opcional) colapsado
- 1.3 Formulario de acceso (email, contraseña, botón)
- 1.4 Footer
ARTICLE (cualquier artículo)
- 1.1 Barra de navegación superior
- 1.2 Menú lateral con la estructura de documentación
- 1.3 Título del artículo, contenido enriquecido, código, imágenes
- 1.4 Footer
PROMPTS RELACIONADOS · EDUCATION
