Drommo
Futuro de habilidades: educación en programación
Página web

Futuro de habilidades: educación en programación

Prompt

Cree una página web de una sola página (HTML de un solo archivo con CSS integrado, sin marcos externos excepto Google Fonts) que clone el estilo de Skillfuture.xyz, una plataforma de programación educativa. **Pila y estructura:** * HTML5 semántico + CSS3 puro en <estilo>, con capacidad de respuesta móvil primero. * Fuente: Inter (Google Fonts, pesos 400–800). * Paleta: fondo #ffffff, texto #0f172a, silenciado #475569, líneas #e2e8f0, suave #f1f5f9, marca verde #16a34a (pase el cursor #15803d), acento azul #0ea5e9. * Ancho máximo del contenedor central: 1200 px, relleno lateral 24 px. **Encabezado (pegajoso):** Logotipo "Skill Future" con un cuadrado degradado verde→azul de 28 px. Nav: tutoriales, ejercicios, rutas de aprendizaje, estructuras de datos, algoritmos, glosario. Barra de búsqueda con fondo gris claro, icono de lupa, marcador de posición "Buscar tutoriales...". Botón de hamburguesa oculto en el escritorio, visible en el móvil. **Héroe:** Verde claro → fondo degradado blanco. Abrazadera de título 36–64 px, peso de fuente 800: "Domina la lógica del código": las dos últimas palabras con un degradado verde → azul. Subtítulo completo. Botones "Comenzar a aprender" (verde) y "Probar ejercicios" (fantasma). Fila popular con pastillas: HTML, CSS, JavaScript, Python, SQL. **Características (cuadrícula 2×2):** "Aprenda todo lo que necesita" + 4 tarjetas (Algoritmos, Estructuras de datos, Ejercicios, Editor de código interactivo) con íconos y enlaces. **Recursos:** fondo gris suave, cuadrícula de 4 columnas (tutoriales principales, referencias, ejemplos, certificación). **CTA oscuro:** degradado #0f172a → #1e293b, "Obtén la certificación. Consigue que te contraten". + botón verde. **Pie de página n.° 0f172a:** 4 columnas, copyright © 2026, enlaces legales, íconos sociales con cursor verde. **Responsivo:** punto de interrupción 860 px: hamburguesa, cuadrículas de 1 columna (pie de página de 2 columnas). **UX:** comportamiento de desplazamiento suave, se desplaza entre 0,2 y 0,3 s, traduceY(-4px) en las tarjetas. Ofrece un único index.html autónomo, sin JS.

Tipo
Página web
Tecnología
HTML, CSS
  • landing page
  • Skill Future
  • education
  • programming
  • skillfuture
  • tutorials
Crear en Drommo

«Crear en Drommo» abre un chat en el modo correcto con el prompt ya escrito. No se envía hasta que tú lo mandes.

Ideas parecidas

CodeNova: hacker de medianochePágina web