324 lines
32 KiB
HTML
324 lines
32 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<script src="./support.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<x-dc>
|
||
|
|
<helmet data-dc-atomics>
|
||
|
|
<meta name="design_doc_mode" content="canvas">
|
||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||
|
|
<style>
|
||
|
|
*{box-sizing:border-box}
|
||
|
|
body{margin:0;background:#eceef2;font-family:"Manrope",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
|
||
|
|
a{color:#e26a12;text-decoration:none}
|
||
|
|
a:hover{color:#c25a0c}
|
||
|
|
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(-1.5deg)}}
|
||
|
|
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
|
||
|
|
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
|
||
|
|
/* option-card chrome */
|
||
|
|
.dv-turn{padding:52px 56px 44px;border-bottom:1px solid rgba(0,0,0,.08);scroll-margin-top:16px}
|
||
|
|
.dv-thd{display:flex;align-items:baseline;gap:10px;margin:0 0 26px}
|
||
|
|
.dv-tid{font:600 10px ui-monospace,Menlo,monospace;padding:3px 7px;background:#13294b;color:#fff;border-radius:4px;text-decoration:none}
|
||
|
|
.dv-tname{font:600 13px/1.3 "Manrope",system-ui,sans-serif;color:#13294b}
|
||
|
|
.dv-opts{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
|
||
|
|
.dv-opt{flex:none;display:flex;flex-direction:column;gap:11px;scroll-margin-top:16px}
|
||
|
|
.dv-oid{font:600 10.5px ui-monospace,Menlo,monospace;padding:3px 7px;background:rgba(19,41,75,.10);color:#13294b;border-radius:5px;text-decoration:none}
|
||
|
|
.dv-olabel{display:flex;align-items:baseline;gap:8px;font:500 12px/1.35 "Manrope",system-ui,sans-serif;color:rgba(19,41,75,.6)}
|
||
|
|
.dv-card{background:#fff;border:1px solid rgba(19,41,75,.10);border-radius:14px;box-shadow:0 18px 50px -24px rgba(19,41,75,.4);overflow:hidden}
|
||
|
|
.dv-opt:target .dv-oid{background:#f47a20;color:#fff}
|
||
|
|
.dv-next{margin:26px 0 0;font:13px/1.6 "Manrope",system-ui,sans-serif;color:rgba(19,41,75,.6)}
|
||
|
|
</style>
|
||
|
|
</helmet>
|
||
|
|
|
||
|
|
<section class="dv-turn" id="t1">
|
||
|
|
<div class="dv-thd"><a class="dv-tid" href="#t1">1</a><span class="dv-tname">Tres direcciones de home · claras, luminosas, enfocadas a FP España</span></div>
|
||
|
|
<div class="dv-opts">
|
||
|
|
|
||
|
|
<!-- ============ OPTION 1a ============ -->
|
||
|
|
<div class="dv-opt" id="1a">
|
||
|
|
<div class="dv-olabel"><a class="dv-oid" href="#1a">1a</a>Luminoso y limpio · una idea por bloque (Brilliant-like)</div>
|
||
|
|
<div class="dv-card" style="width:1180px;font-family:'Manrope',sans-serif;color:#13294b">
|
||
|
|
<!-- header -->
|
||
|
|
<div style="display:flex;align-items:center;justify-content:space-between;padding:20px 40px;border-bottom:1px solid rgba(19,41,75,.08)">
|
||
|
|
<div style="display:flex;align-items:center;gap:12px">
|
||
|
|
<img src="uploads/ornito_logo.png" alt="Ornitonautas" style="width:42px;height:42px;object-fit:contain">
|
||
|
|
<div><div style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em">Ornitonautas</div><div style="font-size:11px;color:#8a97a8;letter-spacing:.02em">Aprende. Practica. Despega.</div></div>
|
||
|
|
</div>
|
||
|
|
<div style="display:flex;align-items:center;gap:30px;font-size:14.5px;font-weight:600">
|
||
|
|
<span style="color:#f47a20">FP España</span><span style="color:#4a5a72">Rutas</span><span style="color:#4a5a72">Recursos</span>
|
||
|
|
</div>
|
||
|
|
<div style="display:flex;align-items:center;gap:14px">
|
||
|
|
<span style="font-size:14px;font-weight:600;color:#4a5a72">Iniciar sesión</span>
|
||
|
|
<span style="background:#f47a20;color:#fff;font-weight:700;font-size:14px;padding:11px 20px;border-radius:10px">Explorar FP</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- hero -->
|
||
|
|
<div style="display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:72px 40px 64px;background:radial-gradient(120% 120% at 85% 10%,#f4f7fc 0%,#fff 60%)">
|
||
|
|
<div>
|
||
|
|
<div style="display:inline-flex;align-items:center;gap:8px;background:#eef3fb;color:#1c3a63;font-weight:700;font-size:12.5px;padding:7px 13px;border-radius:999px;margin-bottom:22px">🚀 Formación oficial de FP · España</div>
|
||
|
|
<h1 style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:56px;line-height:1.03;letter-spacing:-.02em;margin:0 0 20px">Aprende informática.<br>Despega tu <span style="color:#f47a20">futuro</span>.</h1>
|
||
|
|
<p style="font-size:18px;line-height:1.6;color:#4a5a72;max-width:440px;margin:0 0 32px">Libros y materiales para los ciclos de FP en España, con práctica real y un ritmo que se adapta a ti.</p>
|
||
|
|
<div style="display:flex;align-items:center;gap:16px">
|
||
|
|
<span style="display:inline-flex;align-items:center;gap:8px;background:#f47a20;color:#fff;font-weight:700;font-size:16px;padding:15px 26px;border-radius:12px">Ver FP de España →</span>
|
||
|
|
<span style="font-size:15px;font-weight:600;color:#4a5a72">Grado Medio y Superior</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="position:relative;display:flex;justify-content:center;align-items:center;min-height:340px">
|
||
|
|
<div style="position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,#eef3fb,transparent 70%)"></div>
|
||
|
|
<span style="position:absolute;top:30px;right:70px;color:#f47a20;font-size:22px;animation:twinkle 3s ease-in-out infinite">✦</span>
|
||
|
|
<span style="position:absolute;bottom:50px;left:60px;color:#1c3a63;font-size:15px;animation:twinkle 2.4s ease-in-out .6s infinite">✦</span>
|
||
|
|
<img src="uploads/ornito_logo.png" alt="" style="width:300px;height:300px;object-fit:contain;position:relative;animation:floaty 6s ease-in-out infinite">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- FP oficial -->
|
||
|
|
<div style="padding:64px 40px;border-top:1px solid rgba(19,41,75,.07)">
|
||
|
|
<div style="display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px">
|
||
|
|
<div>
|
||
|
|
<h2 style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:30px;letter-spacing:-.01em;margin:0 0 8px">FP oficial en España</h2>
|
||
|
|
<p style="margin:0;font-size:16px;color:#4a5a72">Elige tu ciclo y estudia con nuestros libros y prácticas.</p>
|
||
|
|
</div>
|
||
|
|
<span style="font-weight:700;font-size:14.5px;color:#e26a12">Ver todos los ciclos →</span>
|
||
|
|
</div>
|
||
|
|
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:22px">
|
||
|
|
<div style="border:1px solid rgba(19,41,75,.1);border-radius:16px;padding:26px;transition:transform .2s,box-shadow .2s" style-hover="transform:translateY(-4px);box-shadow:0 16px 34px -18px rgba(19,41,75,.35)">
|
||
|
|
<div style="width:52px;height:52px;border-radius:13px;background:#eef3fb;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;color:#1c3a63;margin-bottom:18px"></></div>
|
||
|
|
<div style="font-size:12px;font-weight:700;color:#f47a20;letter-spacing:.03em;margin-bottom:6px">GRADO SUPERIOR</div>
|
||
|
|
<h3 style="font-family:'Space Grotesk',sans-serif;font-size:19px;margin:0 0 8px">Desarrollo de Aplicaciones Web</h3>
|
||
|
|
<p style="margin:0 0 16px;font-size:14.5px;color:#4a5a72;line-height:1.55">Aplicaciones web completas, seguras y escalables.</p>
|
||
|
|
<div style="font-size:13px;font-weight:600;color:#8a97a8">DAW · 2000h</div>
|
||
|
|
</div>
|
||
|
|
<div style="border:1px solid rgba(19,41,75,.1);border-radius:16px;padding:26px;transition:transform .2s,box-shadow .2s" style-hover="transform:translateY(-4px);box-shadow:0 16px 34px -18px rgba(19,41,75,.35)">
|
||
|
|
<div style="width:52px;height:52px;border-radius:13px;background:#fdeee2;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;color:#e26a12;margin-bottom:18px">◉</div>
|
||
|
|
<div style="font-size:12px;font-weight:700;color:#f47a20;letter-spacing:.03em;margin-bottom:6px">GRADO SUPERIOR</div>
|
||
|
|
<h3 style="font-family:'Space Grotesk',sans-serif;font-size:19px;margin:0 0 8px">Administración de Sistemas en Red</h3>
|
||
|
|
<p style="margin:0 0 16px;font-size:14.5px;color:#4a5a72;line-height:1.55">Servidores, redes y sistemas en entornos reales.</p>
|
||
|
|
<div style="font-size:13px;font-weight:600;color:#8a97a8">ASIR · 2000h</div>
|
||
|
|
</div>
|
||
|
|
<div style="border:1px solid rgba(19,41,75,.1);border-radius:16px;padding:26px;transition:transform .2s,box-shadow .2s" style-hover="transform:translateY(-4px);box-shadow:0 16px 34px -18px rgba(19,41,75,.35)">
|
||
|
|
<div style="width:52px;height:52px;border-radius:13px;background:#e9f5ee;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;color:#22a05a;margin-bottom:18px">▤</div>
|
||
|
|
<div style="font-size:12px;font-weight:700;color:#f47a20;letter-spacing:.03em;margin-bottom:6px">GRADO SUPERIOR</div>
|
||
|
|
<h3 style="font-family:'Space Grotesk',sans-serif;font-size:19px;margin:0 0 8px">Desarrollo de Aplicaciones Multiplataforma</h3>
|
||
|
|
<p style="margin:0 0 16px;font-size:14.5px;color:#4a5a72;line-height:1.55">Apps de escritorio y móvil multiplataforma.</p>
|
||
|
|
<div style="font-size:13px;font-weight:600;color:#8a97a8">DAM · 2000h</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Rutas -->
|
||
|
|
<div style="padding:64px 40px;background:#f7f9fc;border-top:1px solid rgba(19,41,75,.07)">
|
||
|
|
<h2 style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:30px;letter-spacing:-.01em;margin:0 0 8px;text-align:center">Rutas de aprendizaje</h2>
|
||
|
|
<p style="margin:0 auto 36px;font-size:16px;color:#4a5a72;text-align:center;max-width:520px">Un camino paso a paso, del primer concepto al proyecto final.</p>
|
||
|
|
<div style="display:flex;align-items:center;justify-content:center;gap:0">
|
||
|
|
<div style="text-align:center;width:200px"><div style="width:56px;height:56px;border-radius:50%;background:#13294b;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;margin:0 auto 14px">1</div><div style="font-weight:700;font-size:15px">Fundamentos</div><div style="font-size:13px;color:#8a97a8">Lógica y programación</div></div>
|
||
|
|
<div style="flex:1;height:2px;background:linear-gradient(90deg,#13294b,#f47a20);max-width:90px"></div>
|
||
|
|
<div style="text-align:center;width:200px"><div style="width:56px;height:56px;border-radius:50%;background:#f47a20;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;margin:0 auto 14px">2</div><div style="font-weight:700;font-size:15px">Especialización</div><div style="font-size:13px;color:#8a97a8">Web, sistemas o datos</div></div>
|
||
|
|
<div style="flex:1;height:2px;background:linear-gradient(90deg,#f47a20,#e5241b);max-width:90px"></div>
|
||
|
|
<div style="text-align:center;width:200px"><div style="width:56px;height:56px;border-radius:50%;background:#e5241b;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;margin:0 auto 14px">3</div><div style="font-weight:700;font-size:15px">Proyecto real</div><div style="font-size:13px;color:#8a97a8">Portfolio para empleo</div></div>
|
||
|
|
</div>
|
||
|
|
<div style="text-align:center;margin-top:36px"><span style="display:inline-block;border:1.5px solid #13294b;color:#13294b;font-weight:700;font-size:15px;padding:13px 26px;border-radius:12px">Ver rutas completas →</span></div>
|
||
|
|
</div>
|
||
|
|
<!-- Mercado laboral -->
|
||
|
|
<div style="padding:64px 40px;border-top:1px solid rgba(19,41,75,.07)">
|
||
|
|
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px">
|
||
|
|
<div style="text-align:center;padding:0 12px"><div style="font-size:34px;margin-bottom:12px">🎯</div><h3 style="font-family:'Space Grotesk',sans-serif;font-size:18px;margin:0 0 8px">Habilidades que piden</h3><p style="margin:0;font-size:14.5px;color:#4a5a72;line-height:1.55">Aprende lo que las empresas buscan hoy.</p></div>
|
||
|
|
<div style="text-align:center;padding:0 12px"><div style="font-size:34px;margin-bottom:12px">💼</div><h3 style="font-family:'Space Grotesk',sans-serif;font-size:18px;margin:0 0 8px">Portfolio profesional</h3><p style="margin:0;font-size:14.5px;color:#4a5a72;line-height:1.55">Construye proyectos que se enseñan.</p></div>
|
||
|
|
<div style="text-align:center;padding:0 12px"><div style="font-size:34px;margin-bottom:12px">🤝</div><h3 style="font-family:'Space Grotesk',sans-serif;font-size:18px;margin:0 0 8px">Preparado para empleo</h3><p style="margin:0;font-size:14.5px;color:#4a5a72;line-height:1.55">Del aula al primer trabajo tech.</p></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- footer -->
|
||
|
|
<div style="padding:28px 40px;background:#13294b;color:#aeb9c9;display:flex;align-items:center;justify-content:space-between;font-size:13px">
|
||
|
|
<div style="display:flex;align-items:center;gap:10px"><img src="uploads/ornito_logo.png" style="width:26px;height:26px;object-fit:contain"><span style="color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700">Ornitonautas</span></div>
|
||
|
|
<span>© 2026 · Formación FP · España</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ============ OPTION 1b ============ -->
|
||
|
|
<div class="dv-opt" id="1b">
|
||
|
|
<div class="dv-olabel"><a class="dv-oid" href="#1b">1b</a>Aprende haciendo · mini-reto interactivo en el hero</div>
|
||
|
|
<div class="dv-card" style="width:1180px;font-family:'Manrope',sans-serif;color:#13294b">
|
||
|
|
<div style="display:flex;align-items:center;justify-content:space-between;padding:20px 40px;border-bottom:1px solid rgba(19,41,75,.08)">
|
||
|
|
<div style="display:flex;align-items:center;gap:12px">
|
||
|
|
<img src="uploads/ornito_logo.png" alt="Ornitonautas" style="width:42px;height:42px;object-fit:contain">
|
||
|
|
<div style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em">Ornitonautas</div>
|
||
|
|
</div>
|
||
|
|
<div style="display:flex;align-items:center;gap:30px;font-size:14.5px;font-weight:600">
|
||
|
|
<span style="color:#f47a20">FP España</span><span style="color:#4a5a72">Rutas</span><span style="color:#4a5a72">Recursos</span>
|
||
|
|
</div>
|
||
|
|
<span style="background:#f47a20;color:#fff;font-weight:700;font-size:14px;padding:11px 20px;border-radius:10px">Explorar FP</span>
|
||
|
|
</div>
|
||
|
|
<!-- hero with quiz -->
|
||
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:64px 40px;background:#f7f9fc">
|
||
|
|
<div>
|
||
|
|
<h1 style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:50px;line-height:1.05;letter-spacing:-.02em;margin:0 0 18px">No memorices.<br>Aprende <span style="color:#f47a20">haciendo</span>.</h1>
|
||
|
|
<p style="font-size:18px;line-height:1.6;color:#4a5a72;max-width:420px;margin:0 0 30px">Cada tema de FP empieza con un reto. Pruebas, te equivocas y entiendes. Así se queda.</p>
|
||
|
|
<span style="display:inline-flex;align-items:center;gap:8px;background:#f47a20;color:#fff;font-weight:700;font-size:16px;padding:15px 26px;border-radius:12px">Empezar por FP España →</span>
|
||
|
|
</div>
|
||
|
|
<div style="background:#fff;border:1px solid rgba(19,41,75,.1);border-radius:20px;padding:30px;box-shadow:0 24px 60px -30px rgba(19,41,75,.5)">
|
||
|
|
<div style="display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:#8a97a8;letter-spacing:.04em;margin-bottom:16px">RETO · FUNDAMENTOS ①</div>
|
||
|
|
<div style="font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:600;line-height:1.35;margin-bottom:20px">¿Qué es Python?</div>
|
||
|
|
<div style="display:flex;flex-direction:column;gap:12px">
|
||
|
|
<sc-for list="{{ quizOptions }}" as="opt" hint-placeholder-count="3">
|
||
|
|
<div onClick="{{ opt.onClick }}" style="display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-radius:12px;cursor:pointer;font-size:15px;font-weight:600;background:{{ opt.bg }};border:{{ opt.border }};color:{{ opt.color }};transition:all .18s">
|
||
|
|
<span>{{ opt.label }}</span><span style="font-weight:800">{{ opt.mark }}</span>
|
||
|
|
</div>
|
||
|
|
</sc-for>
|
||
|
|
</div>
|
||
|
|
<div style="min-height:22px;margin-top:16px;font-size:14px;font-weight:600;color:#22a05a">{{ feedback }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- FP list rows (books) -->
|
||
|
|
<div style="padding:64px 40px">
|
||
|
|
<div style="display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px">
|
||
|
|
<h2 style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:30px;letter-spacing:-.01em;margin:0">Libros de FP oficial</h2>
|
||
|
|
<span style="font-weight:700;font-size:14.5px;color:#e26a12">Ver catálogo →</span>
|
||
|
|
</div>
|
||
|
|
<div style="display:flex;flex-direction:column;gap:14px">
|
||
|
|
<div style="display:flex;align-items:center;gap:20px;border:1px solid rgba(19,41,75,.1);border-radius:14px;padding:20px 24px;transition:border-color .2s" style-hover="border-color:#f47a20">
|
||
|
|
<div style="width:46px;height:60px;border-radius:5px;background:linear-gradient(135deg,#13294b,#1c3a63);flex:none"></div>
|
||
|
|
<div style="flex:1"><div style="font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px">Desarrollo de Aplicaciones Web (DAW)</div><div style="font-size:13.5px;color:#8a97a8">Grado Superior · 2000h · Libro + prácticas</div></div>
|
||
|
|
<span style="font-size:20px;color:#c4ccd8">→</span>
|
||
|
|
</div>
|
||
|
|
<div style="display:flex;align-items:center;gap:20px;border:1px solid rgba(19,41,75,.1);border-radius:14px;padding:20px 24px;transition:border-color .2s" style-hover="border-color:#f47a20">
|
||
|
|
<div style="width:46px;height:60px;border-radius:5px;background:linear-gradient(135deg,#f47a20,#e26a12);flex:none"></div>
|
||
|
|
<div style="flex:1"><div style="font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px">Administración de Sistemas en Red (ASIR)</div><div style="font-size:13.5px;color:#8a97a8">Grado Superior · 2000h · Libro + prácticas</div></div>
|
||
|
|
<span style="font-size:20px;color:#c4ccd8">→</span>
|
||
|
|
</div>
|
||
|
|
<div style="display:flex;align-items:center;gap:20px;border:1px solid rgba(19,41,75,.1);border-radius:14px;padding:20px 24px;transition:border-color .2s" style-hover="border-color:#f47a20">
|
||
|
|
<div style="width:46px;height:60px;border-radius:5px;background:linear-gradient(135deg,#22a05a,#178048);flex:none"></div>
|
||
|
|
<div style="flex:1"><div style="font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px">Desarrollo de Apps Multiplataforma (DAM)</div><div style="font-size:13.5px;color:#8a97a8">Grado Superior · 2000h · Libro + prácticas</div></div>
|
||
|
|
<span style="font-size:20px;color:#c4ccd8">→</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- mercado laboral band -->
|
||
|
|
<div style="padding:56px 40px;background:#13294b;color:#fff">
|
||
|
|
<h2 style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;margin:0 0 28px;text-align:center">Del aula al mercado laboral</h2>
|
||
|
|
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px">
|
||
|
|
<div style="text-align:center"><div style="font-size:30px;margin-bottom:10px">🎯</div><div style="font-weight:700;font-size:16px;margin-bottom:6px">Habilidades reales</div><div style="font-size:14px;color:#aeb9c9;line-height:1.5">Lo que piden las empresas hoy.</div></div>
|
||
|
|
<div style="text-align:center"><div style="font-size:30px;margin-bottom:10px">💼</div><div style="font-weight:700;font-size:16px;margin-bottom:6px">Portfolio</div><div style="font-size:14px;color:#aeb9c9;line-height:1.5">Proyectos que puedes enseñar.</div></div>
|
||
|
|
<div style="text-align:center"><div style="font-size:30px;margin-bottom:10px">🤝</div><div style="font-weight:700;font-size:16px;margin-bottom:6px">Listo para empleo</div><div style="font-size:14px;color:#aeb9c9;line-height:1.5">Preparado para tu primer trabajo.</div></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="padding:28px 40px;background:#0f2038;color:#aeb9c9;display:flex;align-items:center;justify-content:space-between;font-size:13px">
|
||
|
|
<div style="display:flex;align-items:center;gap:10px"><img src="uploads/ornito_logo.png" style="width:26px;height:26px;object-fit:contain"><span style="color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700">Ornitonautas</span></div>
|
||
|
|
<span>© 2026 · Formación FP · España</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ============ OPTION 1c ============ -->
|
||
|
|
<div class="dv-opt" id="1c">
|
||
|
|
<div class="dv-olabel"><a class="dv-oid" href="#1c">1c</a>Editorial espacial · hero navy y tipografía grande (opción más atrevida)</div>
|
||
|
|
<div class="dv-card" style="width:1180px;font-family:'Manrope',sans-serif;color:#13294b">
|
||
|
|
<!-- navy hero -->
|
||
|
|
<div style="background:radial-gradient(130% 100% at 80% 0%,#1c3a63 0%,#13294b 55%,#0f2038 100%);color:#fff;position:relative;overflow:hidden">
|
||
|
|
<span style="position:absolute;top:70px;left:120px;color:#fff;font-size:14px;opacity:.7;animation:twinkle 3s ease-in-out infinite">✦</span>
|
||
|
|
<span style="position:absolute;top:180px;right:280px;color:#f47a20;font-size:20px;animation:twinkle 2.6s ease-in-out .5s infinite">✦</span>
|
||
|
|
<span style="position:absolute;bottom:90px;left:280px;color:#fff;font-size:11px;opacity:.6;animation:twinkle 2.2s ease-in-out .9s infinite">✦</span>
|
||
|
|
<div style="display:flex;align-items:center;justify-content:space-between;padding:22px 40px">
|
||
|
|
<div style="display:flex;align-items:center;gap:12px">
|
||
|
|
<img src="uploads/ornito_logo.png" alt="Ornitonautas" style="width:40px;height:40px;object-fit:contain">
|
||
|
|
<div style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px">Ornitonautas</div>
|
||
|
|
</div>
|
||
|
|
<div style="display:flex;align-items:center;gap:28px;font-size:14.5px;font-weight:600;color:#cdd6e4">
|
||
|
|
<span style="color:#fff">FP España</span><span>Rutas</span><span>Recursos</span>
|
||
|
|
</div>
|
||
|
|
<span style="border:1.5px solid rgba(255,255,255,.4);color:#fff;font-weight:700;font-size:14px;padding:10px 18px;border-radius:10px">Iniciar sesión</span>
|
||
|
|
</div>
|
||
|
|
<div style="display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;padding:70px 40px 80px">
|
||
|
|
<div>
|
||
|
|
<div style="display:inline-flex;align-items:center;gap:8px;background:rgba(244,122,32,.18);color:#f9a463;font-weight:700;font-size:12.5px;padding:7px 13px;border-radius:999px;margin-bottom:24px">FP OFICIAL · ESPAÑA</div>
|
||
|
|
<h1 style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:66px;line-height:.98;letter-spacing:-.03em;margin:0 0 22px">Tu FP,<br>a la <span style="color:#f47a20">velocidad</span><br>de la luz.</h1>
|
||
|
|
<p style="font-size:18px;line-height:1.6;color:#cdd6e4;max-width:420px;margin:0 0 34px">Libros y materiales para los ciclos de informática. Todo lo que necesitas para aprobar y trabajar.</p>
|
||
|
|
<span style="display:inline-flex;align-items:center;gap:8px;background:#f47a20;color:#fff;font-weight:700;font-size:16px;padding:16px 28px;border-radius:12px">Explorar FP de España →</span>
|
||
|
|
</div>
|
||
|
|
<div style="display:flex;justify-content:center"><img src="uploads/ornito_logo.png" alt="" style="width:290px;height:290px;object-fit:contain;animation:floaty 7s ease-in-out infinite"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- FP shelf -->
|
||
|
|
<div style="padding:66px 40px">
|
||
|
|
<h2 style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:32px;letter-spacing:-.01em;margin:0 0 6px">Ciclos de informática</h2>
|
||
|
|
<p style="margin:0 0 32px;font-size:16px;color:#4a5a72">Grado Medio y Superior. Libro oficial + prácticas guiadas.</p>
|
||
|
|
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:20px">
|
||
|
|
<div style="border:1px solid rgba(19,41,75,.1);border-radius:16px;overflow:hidden;transition:transform .2s" style-hover="transform:translateY(-6px)">
|
||
|
|
<div style="height:120px;background:linear-gradient(135deg,#13294b,#1c3a63);display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px">DAW</div>
|
||
|
|
<div style="padding:18px"><div style="font-weight:700;font-size:15px;margin-bottom:4px">Aplicaciones Web</div><div style="font-size:12.5px;color:#8a97a8">Grado Superior</div></div>
|
||
|
|
</div>
|
||
|
|
<div style="border:1px solid rgba(19,41,75,.1);border-radius:16px;overflow:hidden;transition:transform .2s" style-hover="transform:translateY(-6px)">
|
||
|
|
<div style="height:120px;background:linear-gradient(135deg,#f47a20,#e26a12);display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px">ASIR</div>
|
||
|
|
<div style="padding:18px"><div style="font-weight:700;font-size:15px;margin-bottom:4px">Sistemas en Red</div><div style="font-size:12.5px;color:#8a97a8">Grado Superior</div></div>
|
||
|
|
</div>
|
||
|
|
<div style="border:1px solid rgba(19,41,75,.1);border-radius:16px;overflow:hidden;transition:transform .2s" style-hover="transform:translateY(-6px)">
|
||
|
|
<div style="height:120px;background:linear-gradient(135deg,#22a05a,#178048);display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px">DAM</div>
|
||
|
|
<div style="padding:18px"><div style="font-weight:700;font-size:15px;margin-bottom:4px">Multiplataforma</div><div style="font-size:12.5px;color:#8a97a8">Grado Superior</div></div>
|
||
|
|
</div>
|
||
|
|
<div style="border:1px solid rgba(19,41,75,.1);border-radius:16px;overflow:hidden;transition:transform .2s;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px" style-hover="transform:translateY(-6px)">
|
||
|
|
<div style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;color:#f47a20;margin-bottom:6px">+8</div><div style="font-weight:700;font-size:14px">Más ciclos FP</div><div style="font-size:12.5px;color:#e26a12;font-weight:600;margin-top:4px">Ver todos →</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- rutas + mercado combined light -->
|
||
|
|
<div style="padding:66px 40px;background:#f7f9fc;display:grid;grid-template-columns:1fr 1fr;gap:40px">
|
||
|
|
<div>
|
||
|
|
<h2 style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;margin:0 0 18px">Rutas de aprendizaje</h2>
|
||
|
|
<div style="display:flex;flex-direction:column;gap:12px">
|
||
|
|
<div style="display:flex;align-items:center;gap:14px;background:#fff;border:1px solid rgba(19,41,75,.1);border-radius:12px;padding:16px 18px"><div style="width:38px;height:38px;border-radius:10px;background:#eef3fb;display:flex;align-items:center;justify-content:center;font-weight:700;color:#1c3a63">1</div><div><div style="font-weight:700;font-size:15px">Fundamentos</div><div style="font-size:13px;color:#8a97a8">Lógica y programación</div></div></div>
|
||
|
|
<div style="display:flex;align-items:center;gap:14px;background:#fff;border:1px solid rgba(19,41,75,.1);border-radius:12px;padding:16px 18px"><div style="width:38px;height:38px;border-radius:10px;background:#fdeee2;display:flex;align-items:center;justify-content:center;font-weight:700;color:#e26a12">2</div><div><div style="font-weight:700;font-size:15px">Especialización</div><div style="font-size:13px;color:#8a97a8">Web, sistemas o datos</div></div></div>
|
||
|
|
<div style="display:flex;align-items:center;gap:14px;background:#fff;border:1px solid rgba(19,41,75,.1);border-radius:12px;padding:16px 18px"><div style="width:38px;height:38px;border-radius:10px;background:#fde9e8;display:flex;align-items:center;justify-content:center;font-weight:700;color:#e5241b">3</div><div><div style="font-weight:700;font-size:15px">Proyecto real</div><div style="font-size:13px;color:#8a97a8">Portfolio para empleo</div></div></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h2 style="font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;margin:0 0 18px">Preparado para el mercado</h2>
|
||
|
|
<div style="display:flex;flex-direction:column;gap:14px;font-size:15px;color:#4a5a72">
|
||
|
|
<div style="display:flex;gap:12px;align-items:center"><span style="color:#22a05a;font-weight:800">✓</span> Habilidades que piden las empresas</div>
|
||
|
|
<div style="display:flex;gap:12px;align-items:center"><span style="color:#22a05a;font-weight:800">✓</span> Portfolio con proyectos reales</div>
|
||
|
|
<div style="display:flex;gap:12px;align-items:center"><span style="color:#22a05a;font-weight:800">✓</span> Certificaciones que suman</div>
|
||
|
|
<div style="display:flex;gap:12px;align-items:center"><span style="color:#22a05a;font-weight:800">✓</span> Del aula a tu primer empleo tech</div>
|
||
|
|
</div>
|
||
|
|
<span style="display:inline-block;margin-top:24px;background:#13294b;color:#fff;font-weight:700;font-size:15px;padding:13px 24px;border-radius:12px">Ver preparación laboral →</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="padding:28px 40px;background:#13294b;color:#aeb9c9;display:flex;align-items:center;justify-content:space-between;font-size:13px">
|
||
|
|
<div style="display:flex;align-items:center;gap:10px"><img src="uploads/ornito_logo.png" style="width:26px;height:26px;object-fit:contain"><span style="color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700">Ornitonautas</span></div>
|
||
|
|
<span>© 2026 · Formación FP · España</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<p class="dv-next">Prueba a pedir: "desarrolla <a class="dv-oid" href="#1a">1a</a> a pantalla completa" · "combina el reto de <a class="dv-oid" href="#1b">1b</a> con el hero de <a class="dv-oid" href="#1a">1a</a>" · "menos espacial, más sobrio en <a class="dv-oid" href="#1c">1c</a>" · "añade sección de comunidad"</p>
|
||
|
|
</section>
|
||
|
|
</x-dc>
|
||
|
|
<script type="text/x-dc" data-dc-script>
|
||
|
|
class Component extends DCLogic {
|
||
|
|
state = { picked: null };
|
||
|
|
pick(i){ this.setState({ picked: i }); }
|
||
|
|
renderVals(){
|
||
|
|
const opts = [
|
||
|
|
{ label: 'Un lenguaje de programación', ok: true },
|
||
|
|
{ label: 'Un sistema operativo', ok: false },
|
||
|
|
{ label: 'Una base de datos', ok: false },
|
||
|
|
];
|
||
|
|
const picked = this.state.picked;
|
||
|
|
const quizOptions = opts.map((o, i) => {
|
||
|
|
let bg = '#fff', border = '1px solid rgba(19,41,75,.14)', color = '#13294b', mark = '';
|
||
|
|
if (picked !== null) {
|
||
|
|
if (o.ok) { bg = 'rgba(34,160,90,.10)'; border = '1px solid #22a05a'; mark = '✓'; }
|
||
|
|
else if (i === picked) { bg = 'rgba(229,36,27,.06)'; border = '1px solid #e5241b'; color = '#8a97a8'; mark = '✕'; }
|
||
|
|
else { color = '#a6b0be'; }
|
||
|
|
}
|
||
|
|
return { label: o.label, bg, border, color, mark, onClick: () => this.pick(i) };
|
||
|
|
});
|
||
|
|
const feedback = picked === null ? '' : (opts[picked].ok ? '¡Correcto! Así se aprende: probando.' : 'Casi. La respuesta correcta está en verde.');
|
||
|
|
return { quizOptions, feedback };
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|