NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para **Instituto Titan**, una agencia digital de branding y desarrollo web. El proyecto debe estar en un único archivo HTML que incluya Tailwind CSS mediante CDN y JavaScript vanilla para interacciones. Usa la siguiente paleta de colores: #0A0A0A (negro profundo), #1F2937 (gris oscuro), #3B82F6 (azul vibrante), #F3F4F6 (gris claro), #FFFFFF (blanco). Tipografía principal: *Inter* (Google Fonts) para títulos y cuerpo, con peso 400‑700.
**Estructura global**
- ``<header>`` fijo, con logo a la izquierda (texto "Instituto Titan" en Inter bold, color azul), menú centrado (Enlaces: Home, About, Services, Portfolio, Blog, Contact) y a la derecha ícono de carrito (svg) y botón hamburguesa para móvil. Utiliza flex y ``sticky top-0``.
- ``<main>`` con los bloques enumera
4.285 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.285 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ú, carrito y hamburguesa
- 2.1 Sección hero con fondo visual, título y CTA
- 3.1 Bloque de servicios en 3 columnas
- 4.1 Galería de proyectos tipo carousel
- 5.1 Slider de testimonios
- 6.1 CTA de contacto con formulario breve
- 7.1 Footer con navegación, redes y datos de contacto
ABOUT US
- 1.1 Cabecera idéntica a la home
- 2.1 Sobre nosotros: texto descriptivo y foto del equipo
- 3.1 Valores en tarjetas
- 4.1 CTA a ver portfolio
- 5.1 Footer idéntico
SERVICES
- 1.1 Cabecera
- 2.1 Lista de servicios en grid con iconos
- 3.1 Detalle de cada servicio al hacer hover
- 4.1 CTA para solicitar presupuesto
- 5.1 Footer
PORTFOLIO
- 1.1 Cabecera
- 2.1 Grid de proyectos con filtros por categoría
- 3.1 Lightbox para vista ampliada
- 4.1 CTA para contactar
- 5.1 Footer
BLOG
- 1.1 Cabecera
- 2.1 Lista de artículos en estilo tarjeta con imagen, título y fecha
- 3.1 Paginación
- 4.1 Footer
CONTACT
- 1.1 Cabecera
- 2.1 Formulario de contacto (nombre, email, mensaje)
- 3.1 Mapa embebido
- 4.1 Información de contacto rápido
- 5.1 Footer
PROMPTS RELACIONADOS · EDUCACIÓN
