MÚSICA Y BANDAS · Claude Design · HTML

CifraPulse — Prompt de diseño web para Claude AI

★★★★★4,7 3.058 descargas

Plataforma editorial y comunidad para entusiastas de tecnología financiera y blockchain Conectamos ideas y proyectos del mundo cripto.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una página web completa para la marca ficticia **CifraPulse** (plataforma editorial de tecnología financiera y blockchain). Utiliza **HTML5**, **Tailwind CSS CDN** y **JavaScript vanilla** en un solo archivo. La paleta de colores debe basarse en los siguientes hexágonos extraídos del diseño original: 
- Azul intenso: #0066FF (usado en la barra de categorías y botones primarios)
- Azul marino: #004080 (fondo de la cabecera y hover de enlaces)
- Rosa brillante: #FF4081 (destacar palabras en el hero)
- Gris claro: #F5F5F5 (fondos de secciones)
- Blanco: #FFFFFF (texto y tarjetas)
Tipografía: **Inter** para encabezados y **Roboto** para cuerpo, ambas importadas desde Google Fonts.

**Estructura y secciones**
1. **Header** (sticky): logo a la izquierda, menú de 3 enlaces (Inicio, Podcast, Sobre nosotros) centrado, botón "Únete" (contorno) y botón "Donar" (fondo azul). Incluye hamburger para móvil.
2. **Barra de categorías** pegada bajo el header, con 5 botones de categoría (Noticias, Carteras, Minería, Seguridad, Blockchain). Cada botón tiene color de fondo único (variaciones de azul/rosa) y efecto hover que mantiene el color.
3. **Sección Hero**: fondo degradado azul‑gris, título grande "Todo blockchain" con la palabra "blockchain" en rosa, párrafo descriptivo, y una imagen abstracta a la derecha.
4. **Grid artículos destacados**: 3 columnas en desktop, 2 en tablet, 1 en móvil. Cada tarjeta muestra imagen de fondo, etiqueta de categoría (background azul/púrpura), título, subtítulo y overlay al pasar el cursor.
5. **Carrusel vertical de podcasts**: slider auto‑play, altura fija, flechas laterales personalizadas, cada slide con imagen, título en blanco y sticker de categoría.
6. **Bloque de encabezado de categoría**: título de la categoría seleccionada, párrafo breve bajo él.
7. **Lista de artículos de la categoría**: tarjetas en columna, imagen a la izquierda, sticker de categoría, título, autor con foto circular.

**Páginas adicionales** (usa la misma cabecera y footer):
- **About**: presentación con imagen grande y texto, sección de equipo en tarjetas.
- **Podcast**: listado de episodios con tarjetas que incluyen reproductor HTML5 audio.
- **Join Us**: formulario simple (nombre, email, mensaje) con validación mínima.
- **Donate**: bloque con botones de monto predefinido y formulario de pago simulado.

**Footer**: fondo azul marino, enlaces de navegación, iconos sociales (placeholder) y texto de copyright.

**Requisitos técnicos**
- Todas las interacciones (hamburger, slider, hover overlays) implementadas con JS puro sin dependencias externas.
- Responsividad completa (mobile‑first). Utiliza clases Tailwind como `grid`, `flex`, `gap`, `p-4`, `md:` etc.
- Accesibilidad: atributos `aria-label` en botones, contraste adecuado.
- Comentarios en el código indicando cada bloque según la numeración anterior.
- No incluir ninguna referencia al sitio original; todo el copy debe ser original en español de España.

Entrega el archivo completo listo para abrir 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>
```

3.361 caracteres · 50 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera con logo, menú y botones
1.2 Barra de categorías sticky
1.3 Hero principal
1.4 Grid artículos destacados
1.5 Carrusel podcasts vertical
1.6 Header categoría "News"
1.7 Lista de artículos de la categoría

ABOUT

2.1 Cabecera común
2.2 Sección presentación con imagen y texto
2.3 Equipo y valores en tarjetas

PODCAST

3.1 Cabecera común
3.2 Lista de episodios en tarjetas con reproductor inline

JOIN US

4.1 Cabecera común
4.2 Formulario de registro simple con campos nombre, email y mensaje

DONATE

5.1 Cabecera común
5.2 Sección de donación con botones de monto y formulario de pago simulado

PROMPTS RELACIONADOS · MÚSICA Y BANDAS

Otros prompts de la misma categoría

Ficha de marca

Nombre: CifraPulse
Sector: Plataforma editorial y comunidad para entusiastas de tecnología financiera y blockchain
Claim: Conectamos ideas y proyectos del mundo cripto

Bloques de la home

1.1 Cabecera fija con logo, menú principal, botones de unión y donación
1.2 Barra de categorías sticky con colores resaltados por tema
1.3 sección Hero con título grande, texto descriptivo y imagen de fondo
1.4 Grid de artículos destacados (3 columnas) con imágenes, etiquetas y subtítulos
1.5 Carrusel vertical de podcasts semanales
1.6 Bloque de encabezado de categoría "News" con descripción
1.7 Lista de artículos de la categoría seleccionada con tarjetas y autor

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

CifraPulse — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT

PODCAST

JOIN US

DONATE

Otros prompts de la misma categoría

LiraNova

VozAura

VozViva Media

Lúmina Club