NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa para la marca ficticia "Formación Alba" (plataforma de cursos online) usando solo un archivo HTML que incluya Tailwind CSS vía CDN y JavaScript vanilla. El sitio debe reproducir el siguiente diseño estructuralmente (sin copiar textos ni imágenes originales):
- **Paleta de colores**: #1F2937 (gris oscuro), #111827 (negro), #3B82F6 (azul primario), #F9FAFB (blanco), #6B7280 (gris medio).
- **Tipografía**: Inter (Google Fonts) para todo el texto, con tamaños de 64px para títulos hero, 24px para subtítulos, 16px para cuerpo.
- **Header**: barra fija, fondo negro, logo a la izquierda (texto "Formación Alba" en azul), menú horizontal con enlaces (Home, Sobre nosotros, Cursos, Contacto) y dropdown para "Más" que muestra enlaces ficticios. A la derecha, botón de "Logi
3.986 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.986 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 Cabecera fija con logo, menú principal, dropdowns y acceso al carrito
- 1.2 Hero principal con fondo oscuro, título destacado y botones de acción
- 1.3 Bloque de beneficios con iconos y texto descriptivo en tres columnas
- 1.4 Galería de cursos destacados en forma de grid con tarjetas
- 1.5 Sección de testimonio con foto circular y cita
- 1.6 Llamada a la acción secundaria con formulario de captura de email
- 1.7 Footer con enlaces de empresa, redes sociales y suscripción al boletín
ABOUT
- 2.1 Cabecera compartida
- 2.2 Título de página y párrafo introductorio
- 2.3 Equipo o historia en layout de dos columnas con imagen y texto
- 2.4 Valores o misión en bloques de iconos
- 2.5 Footer compartido
COURSES
- 3.1 Cabecera compartida
- 3.2 Filtro y barra de búsqueda de cursos
- 3.3 Grid de tarjetas de curso con imagen, título, precio y botón
- 3.4 Paginación inferior
- 3.5 Footer compartido
CONTACT
- 4.1 Cabecera compartida
- 4.2 Formulario de contacto con campos nombre, email, mensaje y botón enviar
- 4.3 Información de contacto y mapa embed
- 4.4 Footer compartido
PROMPTS RELACIONADOS · EDUCACIÓN