NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo llamado Instituto Atlas, plataforma de streaming de contenido audiovisual, siguiendo estos requisitos:
- Tecnologías: HTML único, Tailwind CSS vía CDN, JavaScript vanilla (un solo archivo). No usar frameworks externos.
- Paleta de colores: fondo #0A0A0A (casi negro), primario #E50914 (rojo cinematográfico), secundario #212121 (gris oscuro), acento #F5F5F5 (texto claro), acento secundario #FFB800 (amarillo para estrellas).
- Tipografía: "Inter", sans-serif para cuerpo; "Montserrat", sans-serif para titulares.
- Header: barra fija, logo estilizado (texto "Instituto Atlas" con parte en rojo), menú horizontal (Home, Sobre Nosotros, Películas, Contacto), botón de búsqueda (icono), icono de cuenta (avatar), menú móvil colapsable con overlay.
- Footer: fondo #212121, cu
4.254 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.254 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 Header con logo, menú principal, botones de búsqueda, cuenta y menú móvil
- 1.2 Slider hero con fondo, overlay, subtítulo, título, información de película y botón de reproducción
- 1.3 Sección Tendencias con rejilla de tarjetas de películas
- 1.4 Sección Categorías destacadas en carrusel
- 1.5 Footer con enlaces institucionales, redes sociales y copyright
ABOUT US
- 2.1 Header (reutilizado)
- 2.2 Banner interno con título "Sobre nosotros" y descripción breve
- 2.3 Bloque de misión, visión y valores en tarjetas
- 2.4 Equipo con fotos y breves biografías en grid
- 2.5 Footer (reutilizado)
MOVIES
- 3.1 Header
- 3.2 Lista de películas con filtros por género y orden
- 3.3 Tarjetas de película con imagen, rating, año y duración
- 3.4 Paginación inferior
- 3.5 Footer
MOVIE DETAIL
- 4.1 Header
- 4.2 Hero grande con poster, título, rating, año, duración y categorías
- 4.3 Sinopsis y botón de reproducción
- 4.4 Galería de screenshots y tráiler embebido
- 4.5 Sección de recomendaciones en carrusel
- 4.6 Footer
CONTACT
- 5.1 Header
- 5.2 Formulario de contacto con campos nombre, email, asunto y mensaje
- 5.3 Mapa estático de ubicación
- 5.4 Footer
PROMPTS RELACIONADOS · EDUCATION
