ENTRETENIMIENTO · Tailwind · Vanilla JS · HTML

Ludoteca Nova – Marketplace de videojuegos y accesorios

★★★★★4,6 4.093 descargas

Theme completo para Ludoteca Nova, un marketplace de videojuegos digitales con diseño oscuro, tarjetas interactivas y carrito simulado. Incluye hero fullscreen, galería responsiva y sección de testimonios.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web completo para la marca ficticia "Ludoteca Nova" (dominio ludotecanova.com) usando solo HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. El proyecto debe replicar el diseño visual y la estructura de un típico marketplace de videojuegos, siguiendo estos requisitos:

- **Paleta de colores**: fondo principal #0A0A0A (negro carbón), acentos #FF6B00 (naranja vibrante), texto principal #F5F5F5 (blanco humo), gris secundario #4A4A4A.
- **Tipografía**: `Inter` para títulos y cuerpo, peso 400‑700, importada desde Google Fonts.
- **Header**: barra fija con logo en SVG blanco, menú mega‑dropdown (Demos, About Us, Games, Pricing, Contact, All Pages) que revela columnas de enlaces al pasar el cursor, y botón de carrito a la derecha con icono de tienda y contador.
- **Hero**: sección a pantalla completa, fondo oscuro con imagen difuminada, título grande (h1) en blanco, subtítulo gris y botón CTA naranja con efecto hover.
- **Bloque de categorías**: 3‑4 tarjetas horizontales, cada una con imagen de fondo, título centrado y overlay semi‑transparente.
- **Galería de productos**: grid responsivo (1‑2‑4 columnas según ancho), cada tarjeta muestra imagen, nombre, precio y botón "Añadir al carrito" que cambia a "En carrito" al hacer click (simulación con JS localStorage).
- **Testimonios**: carrusel automático de 3 testimonios, texto en blanco sobre fondo #4A4A4A y foto circular del cliente.
- **Newsletter**: barra con input email y botón naranja, validación básica JS.
- **Footer**: fondo #0A0A0A, columnas con enlaces de navegación, datos de contacto y iconos sociales (SVG). Texto en gris claro.
- **Páginas adicionales**: productos, detalle de producto, about us, contacto – reutilizan header y footer. Cada página incluye los bloques descritos en la tabla anterior.
- **Interactividad**: menú móvil colapsable, carrito lateral que se abre al hacer click (simulado), scroll suave, efecto de hover en enlaces y botones.
- **Accesibilidad**: atributos aria apropiados, contraste suficiente.
- **Optimización**: cargar solo los assets necesarios, usar `loading="lazy"` en imágenes, minificar Tailwind con `@tailwind utilities` en la etiqueta `<style>`.

Entrega todo el código en un solo archivo HTML listo para abrir en el navegador, sin dependencias externas aparte del CDN de Tailwind (`https://cdn.jsdelivr.net/npm/tailwindcss@3/dist/tailwind.min.css`) y Google Fonts.

---

## 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>
```

2.755 caracteres · 34 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera fija con logo, menú mega‑dropdown y carrito.\n- 2.1 Hero con título, subtítulo y botón CTA.\n- 3.1 Bloque de categorías destacadas.\n- 4.1 Galería de productos en cuadrícula.\n- 5.1 Testimonios con carrusel.\n- 6.1 Suscripción al boletín.\n- 7.1 Pie de página con links y redes.

PRODUCTOS

1.1 Cabecera idéntica a la Home.\n- 2.1 Filtro de productos por categoría.\n- 3.1 Lista de productos en grid, mismo estilo que la galería.\n- 4.1 Paginación.\n- 5.1 Footer común.

PRODUCTO DETALLE

1.1 Cabecera compartida.\n- 2.1 Imagen grande del juego y galería secundaria.\n- 3.1 Información del producto: título, descripción, precio, selector de plataforma.\n- 4.1 Botón "Añadir al carrito" y sección de productos relacionados.\n- 5.1 Footer.

ABOUT US

1.1 Cabecera.\n- 2.1 Hero con historia de la marca.\n- 3.1 Equipo y valores en tarjetas.\n- 4.1 Footer.

CONTACT

1.1 Cabecera.\n- 2.1 Formulario de contacto con campos nombre, email, mensaje.\n- 3.1 Mapa estático y datos de contacto.\n- 4.1 Footer.

PROMPTS RELACIONADOS · ENTRETENIMIENTO

Otros prompts de la misma categoría

Ficha de marca

Nombre: Ludoteca Nova
Sector: Marketplace de videojuegos digitales y accesorios
Claim: Explora y adquiere juegos sin complicaciones

Bloques de la home

1.1 Cabecera fija con logo, menú desplegable y botón de carrito.\n2.1 Hero principal con fondo oscuro, título grande y botón CTA.\n3.1 Bloque de categorías destacadas en tarjetas de imagen.\n4.1 Galería de productos en grid de 3‑4 columnas, con hover que muestra precio y botón "Añadir al carrito".\n5.1 Sección de testimonios con carrusel sencillo.\n6.1 Newsletter con campo de captura de email.\n7.1 Pie de página con enlaces de navegación, contactos y redes sociales.

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