NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia Instituto Perla (institutoperla.com) usando solo HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. El proyecto debe reproducir fielmente la estructura y los patrones visuales del sitio original analizado, sin copiar textos ni imágenes literales.
---
**ALCANCE**
- Navbar fijo, transparente, con logo a la izquierda y botón hamburguesa a la derecha. Al hacer clic, despliega un overlay con enlaces: Home, About, Services, Projects, Contact.
- Hero section ocupando el viewport completo: título principal (h1) con tipografía **Poppins Bold**, subtítulo (h2) con **Poppins Regular**, párrafo breve, galería de 5 imágenes de muestra (usa placeholders de unsplash.com) y un marquee horizontal que repite la frase "Agencia creativa".
- Abo
4.880 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.880 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 Navbar fijo, transparente, con logo y menú hamburguesa
- 1.2 Hero con título destacado, subtítulo, párrafo introductorio, galería de imágenes y marquee
- 1.3 About con texto de presentación y contadores de experiencia, clientes y proyectos
- 1.4 Servicios con video de fondo, encabezado, descripción y cuatro tarjetas numeradas
- 1.5 Proyectos con efecto rotativo y scroll paralax
- 1.6 Footer con enlaces básicos y datos de contacto
ABOUT
- 2.1 Título y párrafo que amplía la visión de la agencia
- 2.2 Contador de años de experiencia
- 2.3 Contador de clientes felices
- 2.4 Contador de proyectos completados
SERVICES
- 3.1 Encabezado "Qué ofrecemos a las marcas"
- 3.2 Párrafo descriptivo del enfoque de servicios
- 3.3 Vídeo de fondo con overlay difuso
- 3.4 Tarjeta (01) 3D – descripción breve
- 3.5 Tarjeta (02) Web – descripción breve
- 3.6 Tarjeta (03) Diseño Gráfico – descripción breve
- 3.7 Tarjeta (04) Copywriting – descripción breve
PROJECTS
- 4.1 Galería rotativa con imágenes de alta calidad y desplazamiento lateral
- 4.2 Texto superpuesto que destaca la creatividad de los proyectos
FOOTER
- 5.1 Enlaces de navegación rápida (Home, About, Services, Projects, Contact)
- 5.2 Información de contacto y redes sociales ficticias
- 5.3 Derechos de autor y año
PROMPTS RELACIONADOS · EDUCATION
