NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático usando solo un archivo HTML que incluya Tailwind CSS vía CDN y JavaScript vanilla. La marca ficticia es Podcast Atlas.
ALCANCE:
- Reproducir el layout analizado: encabezado con logo SVG, menú de navegación en tres columnas, botón hamburguesa que abre un overlay con enlaces y botones secundarios.
- Hero section con título grande, párrafo y dos botones (primario y secundario) con íconos de flecha animados.
- Demo media block que muestra mockups de MacBook, tablet y móvil (usar imágenes de placeholder) y dos contadores estilizados.
- Sección "Home versions" con una cuadrícula de tres tarjetas; cada tarjeta muestra una miniatura de página y nombre (Home V1, V2, V3). Al hacer hover, la tarjeta debe elevarse ligeramente y cambiar borde.
- Sección "About versions" idén
3.941 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.941 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, navegación principal multicolumna y botón hamburguesa
- 1.2 Hero: título grande, párrafo descriptivo, botones primario y secundario
- 1.3 Demo media: mockup de dispositivos (macbook, tablet, phone) y contadores
- 1.4 Sección Home versions: grid 3x tarjetas con imagen y nombre de versión
- 1.5 Sección About versions: grid 3x tarjetas similar
- 1.6 Footer: barra inferior con botones estilo enlace
ABOUT
- 1.1 Header reutilizado
- 1.2 Hero interno con título y descripción breve
- 1.3 Imagen lateral ilustrativa
- 1.4 Texto de misión y valores en dos columnas
- 1.5 Equipo destacado con tarjetas de foto y nombre
- 1.6 Footer reutilizado
EPISODES
- 1.1 Header
- 1.2 Lista de episodios en tarjetas con imagen, título, fecha y botón reproducir
- 1.3 Sidebar con filtro por categorías
- 1.4 Footer
HOSTS
- 1.1 Header
- 1.2 Grid de presentaciones de hosts con foto, biografía corta y enlaces sociales
- 1.3 Footer
BLOG
- 1.1 Header
- 1.2 Grid de artículos con imagen, título, extracto y botón leer más
- 1.3 Paginación simple
- 1.4 Footer
CONTACT
- 1.1 Header
- 1.2 Formulario de contacto con campos nombre, email, mensaje y botón enviar
- 1.3 Mapa embebido de ubicación ficticia
- 1.4 Footer
PROMPTS RELACIONADOS · PODCAST
