NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia Armonía Boreal, un portal de podcasts sobre sostenibilidad, usando únicamente HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. El diseño debe replicar la estructura y estética del template analizado: fondo oscuro (#0A0A0A) con acentos verde lima (#A6FF3D) y gris claro (#CCCCCC). Tipografía principal: 'Inter', sans‑serif, peso 400/600 para títulos. Header: barra de navegación fija, logo a la izquierda (placeholder), menús dropdown (Inicio, Episodios, Sobre, Reseñas, Contacto) y botón de suscripción estilo borde verde. Preloader: animación de letras "ECO" que aparecen una a una antes de cargar la página. Pop‑up de suscripción a la app (iconos de Apple/Google) y pop‑up de contacto con formulario (nombre, email, mensaje). Hero:
3.287 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.287 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 Preloader con animación de letras
- 1.2 Pop‑up de suscripción a la app
- 1.3 Pop‑up de contacto con formulario
- 1.4 Barra de navegación con logo, menús desplegables (Inicio, Episodios, Sobre, Reseñas, Contacto) y botón "Suscríbete"
- 1.5 Hero: título grande en varias líneas, subtítulo en cursiva, formulario de captura de email y botón "Únete a la lista"
EPISODES
- 2.1 Grid de tarjetas de episodios con imagen, título, descripción breve y botón "Escuchar"
- 2.2 Paginación o carga incremental
ABOUT
- 3.1 Sección con foto y texto descriptivo de la misión
- 3.2 Estadísticas clave (episodios, oyentes, países)
- 3.3 Testimonios en carrusel
REVIEWS
- 4.1 Lista de reseñas de oyentes con estrellas y comentarios
- 4.2 Formulario rápido para añadir reseña
CONTACT
- 5.1 Formulario de contacto (nombre, email, mensaje) con validación y mensajes de éxito/error
- 5.2 Información de contacto y enlaces a redes sociales
FOOTER
- 6.1 Enlaces de navegación secundaria
- 6.2 Iconos de redes sociales
- 6.3 Aviso legal y política de privacidad
PROMPTS RELACIONADOS · BEAUTY / SPA
