EDUCACIÓN · Claude Design · HTML

EduViva Academy — Prompt de diseño web para Claude AI

★★★★★4,7 3.456 descargas

Plataforma de educación online y formación profesional Aprende a tu ritmo, conecta con la comunidad.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web estático llamado **EduViva Academy** (dominio eduviva.com) siguiendo el siguiente brief y usando **HTML único, Tailwind CSS vía CDN y JavaScript vanilla** (todo en un solo archivo). 

**Objetivo:** replicar la estructura y estilo visual de la plantilla analizada, pero con contenido totalmente original en español (España). No copiar textos, nombres o imágenes; usar placeholders genéricos y textos inventados.

**Paleta de colores:**
- Primario: #1A453C (verde bosque profundo)
- Secundario: #F5F5F5 (gris muy claro)
- Accent: #FFB800 (amarillo cálido)
- Texto oscuro: #212529
- Texto claro: #FFFFFF

**Tipografía:**
- Headings: `Inter`, peso 600
- Body: `Inter`, peso 400
- Cargar fuentes desde Google Fonts.

**Header:**
- Barra completa con fondo blanco, sombra ligera.
- Logo a la izquierda (placeholder SVG).
- Menú centrado con items: "Inicio", "Sobre nosotros", "Cursos", "Blog", "Contacto"; algunos con dropdowns (ej. "Cursos" muestra sub‑items «Todos», «Categorías», «Mi cuenta»). 
- Botón destacado a la derecha: fondo #1A453C, texto blanco, label "Comienza ahora".
- Versión móvil: hamburguesa que despliega el menú full‑screen.

**Sección 1 – Hero:**
- Contenedor de ancho máximo 1200px, padding vertical 6rem.
- Columna izquierda: 
  * Texto pequeño: “Más de 2.5M de usuarios confían en nosotros”.
  * Título grande: “Impulsa tu futuro con educación online”.
  * Subtítulo opcional y botón CTA “Explora cursos” (fondo blanco, borde #1A453C).
- Columna derecha: rejilla de tarjetas (2‑3 columnas) con métricas: 
  * Porcentaje de crecimiento (ej. "85%"), descripción.
  * Nº de cursos ("200+"), descripción.
  * Llamada a comunidad ("Únete a 1000 estudiantes"), botón "Únete" con fondo #FFB800.
- Debajo, formulario de suscripción simple: input email placeholder "Correo empresarial...", botón "Suscribirse" con ícono de flecha.
- Animaciones de entrada fade‑in usando Tailwind utilities (e.g., `animate-fade-in`).

**Sección 2 – Ticker de categorías:**
- barra horizontal con fondo #1A453C, texto blanco.
- Lista infinita de etiquetas que se desplazan lateralmente (CSS animation). etiquetas: "Diseño UI/UX", "Desarrollo Web", "Marketing Digital", "Diseño de Juegos".

**Sección 3 – Cursos destacados:**
- Título centrado: "Cursos más populares".
- Grid responsive (1‑col en móvil, 2‑col en tablet, 4‑col en desktop).
- Cada tarjeta: imagen placeholder, título, breve descripción, etiqueta de nivel ("Principiante", "Intermedio"), botón "Ver detalle" (border #1A453C).

**Footer:**
- Fondo #212529, texto claro.
- Tres columnas: 
  1. Enlaces de navegación rápida (Home, Sobre, Cursos, Blog, Contacto).
  2. Información de contacto (email, dirección ficticia, teléfono).
  3. Íconos de redes sociales (SVG placeholders).
- Texto copyright al pie.

**Páginas adicionales (esqueleto sin contenido detallado):**
- About: header reutilizado, sección con misión, visión y equipo (tarjetas de avatar). 
- Courses: header, filtro de categorías y lista de tarjetas similar a la sección 3.
- Blog: header, lista de artículos con imagen, título, extracto y botón.
- Contact: header, formulario con nombre, email, mensaje, botón enviar.

**Requisitos técnicos:**
- Incluir Tailwind CDN (`https://cdn.tailwindcss.com`). Configurar colores personalizados via `tailwind.config = { theme: { extend: { colors: { primary: '#1A453C', accent: '#FFB800' } } } }` al inicio del script.
- Utilizar componentes reutilizables (header, footer) mediante plantillas de HTML dentro del mismo archivo.
- Añadir JavaScript minimalista para: toggling del menú móvil, animación del ticker (CSS keyframes), validación básica del formulario.
- Mantener accesibilidad: atributos `alt` en imágenes, `aria-label` en botones, contraste de colores.
- Código limpio, indentado y comentado.

**Entrega:** un único archivo `index.html` que contenga todo lo anterior y sea directamente visualizable en el navegador.

---

## Instrucción obligatoria — Footer

Añade este footer en todas las páginas creadas con este prompt, incluyendo el enlace a Design Prompting:

```html
<footer>
  <p>
    Diseñado con ayuda de 
    <a href="https://www.designprompting.com/" target="_blank" rel="noopener noreferrer">
      Design Prompting
    </a>
  </p>
</footer>
```

4.246 caracteres · 84 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

PROMPTS RELACIONADOS · EDUCACIÓN

Otros prompts de la misma categoría

Ficha de marca

Nombre: EduViva Academy
Sector: Plataforma de educación online y formación profesional
Claim: Aprende a tu ritmo, conecta con la comunidad

Bloques de la home

1.1 Header con logo, menú desplegable y botón de llamada a la acción
2.1 Hero principal con título, valoración, tarjetas informativas y formulario de suscripción
3.1 Ticker animado de áreas de conocimiento
4.1 Sección de cursos destacados con cuadrícula de tarjetas

Crea tu propia Skill

Genera una Skill personalizada para Claude AI en minutos. Sin código.

Empezar ahora ↗

← Volver al catálogo ↗ Crea tu Skill personalizada

EduViva Academy — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Otros prompts de la misma categoría

Línea Prisma

LinguaNova

LinguaPulse

LinguaPulse