NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia Instituto Abedul (institutoabedul.com) usando solo HTML, Tailwind CDN y JavaScript vanilla en un único archivo. Emplea la paleta de colores: #111111 (negro profundo), #FFFFFF (blanco), #E63946 (rojo vibrante), #F1FAEE (verde pálido), #A8DADC (cian suave). Tipografía: encabezados con 'Playfair Display' y cuerpo con 'Inter' (Google Fonts).
1. HEADER
- Barra superior fija con fondo negro: fecha actual (JS), número de edición estático, precio ficticio "$3.50".
- Logo a la izquierda (SVG placeholder).
- Menú de navegación centrado: enlaces Home, About, Subscription, Authors, Contact; y un dropdown "Todas las páginas" que muestra una lista de páginas (Home, About, Subscription, Authors, News Category, Shop, Contact, Privacy, Terms, Li
4.298 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.298 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 Barra superior con fecha, número de edición y precio ficticio
- 1.2 Header con logo, menú principal (dropdown), enlaces rápidos y carrito
- 1.3 Hero de portada con imagen y titulares
- 1.4 Grid de artículos destacados (3 columnas)
- 1.5 Bloque de categorías (iconos + enlaces)
- 1.6 Newsletter con formulario
- 1.7 Footer con columnas informativas
ABOUT
- 2.1 Cabecera con título "Sobre nosotros"
- 2.2 Texto descriptivo y foto del equipo
- 2.3 Valores y misión en tarjetas
- 2.4 CTA a suscripción
SUBSCRIPTION
- 3.1 Cabecera con título "Suscripción"
- 3.2 Planes de suscripción en cards
- 3.3 Comparativa de beneficios
- 3.4 Formulario de pago simulado
AUTHORS
- 4.1 Lista de autores en grid
- 4.2 Mini‑bio de cada autor con foto
- 4.3 Enlaces a sus últimos artículos
CONTACT
- 5.1 Formulario de contacto (nombre, email, mensaje)
- 5.2 Información de contacto y mapa
- 5.3 Redes sociales
SHOP
- 6.1 Grid de productos (merchandising)
- 6.2 Detalle de producto en modal
- 6.3 Carrito flotante
LEGAL
- 7.1 Política de privacidad
- 7.2 Términos y condiciones
- 7.3 Licencia de uso
Imagen generada con OpenAI · gpt-image-2 · 04/06/2026
PROMPTS RELACIONADOS · EDUCACIÓN
