Getafe CF

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  <title>MiniQuiz Getafe CF – Copa 06/07</title>
  <style>
    header.MkHeader,
    footer.MkFooter {
        display: none !important;
    }
    
    :root {
      --geta-blue: #0a57ff;
      --geta-dark: #0b1736;
      --geta-yellow: #ffd34f;
      --ok: #14b8a6;
      --error: #ef4444;
      --text: #0e1222;
      --muted: #667185;
      --card: #ffffff;
      --ring: rgba(10, 87, 255, .25);
      --bg-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(10, 87, 255,.15) 0, rgba(10,87,255,0) 60%),
                      radial-gradient(800px 400px at 120% 10%, rgba(255, 211, 79,.18) 0, rgba(255,211,79,0) 60%),
                      linear-gradient(180deg, #f8fbff 0%, #f2f6ff 100%);
    }

    body { margin: 0; font-family: system-ui, sans-serif; color: var(--text); background: var(--bg-gradient); }
    img { max-width: 100%; display: block; }
    button { font: inherit; }

    .gfcf-wrap { max-width: 1000px; margin: 40px auto; padding: clamp(20px, 4vw, 32px); padding-top: max(32px, env(safe-area-inset-top)); padding-bottom: 96px; scroll-margin-top: 96px; }

    .gfcf-hero { position: relative; background: #fff; border-radius: 24px; box-shadow: 0 6px 24px rgba(11, 23, 54, .08); padding: clamp(24px, 5vw, 40px); display: grid; gap: 22px; isolation: isolate; }
    .gfcf-badge { display: inline-flex; align-items: center; gap: 8px; background: #101828; color: #fff; border-radius: 999px; padding: 6px 12px; font-size: 12px; letter-spacing: .4px; width: fit-content;}

    .gfcf-title { font-weight: 900; line-height: 1.1; font-size: clamp(24px, 4.6vw, 42px); margin: 0 0 12px; }
    .gfcf-claim { font-size: clamp(16px, 2.4vw, 20px); color: var(--muted); margin: 8px 0 0; }

    .gfcf-video-card { border-radius: 20px; overflow: hidden; box-shadow: 0 4px 16px rgba(11, 23, 54, .06); }
    .gfcf-video-wrap { position: relative; aspect-ratio: 16 / 9; }
    .gfcf-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

    .gfcf-card { background: var(--card); border-radius: 20px; box-shadow: 0 4px 16px rgba(11, 23, 54, .06); padding: 24px; display: grid; gap: 14px; }
    .gfcf-q { font-size: clamp(18px, 2.6vw, 22px); font-weight: 800; line-height: 1.2; }
    .gfcf-options { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }

    .gfcf-card .gfcf-options .gfcf-btn { all: unset; display: block; border: 1px solid rgba(10, 23, 54, .08); background: #fff; padding: 14px 16px; border-radius: 14px; cursor: pointer; text-align: center; font-weight: 800; transition: transform .08s ease, border-color .2s ease, box-shadow .2s ease; box-shadow: 0 1px 0 rgba(16, 24, 40, .04); -webkit-tap-highlight-color: transparent; }
    .gfcf-card .gfcf-options .gfcf-btn:hover { transform: translateY(-1px); border-color: var(--geta-blue); box-shadow: 0 6px 18px var(--ring); }
    .gfcf-card .gfcf-options .gfcf-btn.is-correct { border-color: var(--ok); box-shadow: 0 0 0 4px rgba(20,184,166,.15); }
    .gfcf-card .gfcf-options .gfcf-btn.is-wrong { border-color: var(--error); box-shadow: 0 0 0 4px rgba(239,68,68,.10); animation: shake .24s ease-in-out; }
    @keyframes shake { 0%,100%{ transform: translateX(0) } 25%{ transform: translateX(-3px) } 75%{ transform: translateX(3px) } }

.gfcf-result { 
  display: none; 
  background: linear-gradient(135deg, rgba(20,184,166,.08), rgba(10,87,255,.08)); 
  border-radius: 16px; 
  padding: clamp(14px, 3.2vw, 20px); 
}
.gfcf-result.is-visible { display: block; }

.gfcf-result-body{
  display: grid; 
  grid-template-columns: auto 1fr; 
  gap: 14px; 
  align-items: center; 
}
.gfcf-result-body h3 { 
  margin: 0; 
  font-size: clamp(18px, 2.8vw, 22px); 
  line-height: 1.2; 
}
.gfcf-result-body p { 
  margin: 6px 0 0; 
  color: #1f2937; 
}
.gfcf-result-body img { 
  width: 140px; 
  height: 140px; 
  object-fit: cover; 
  border-radius: 14px; 
  border: 3px solid #fff; 
  box-shadow: 0 10px 20px rgba(0,0,0,.10); 
}

/* Móvil: apilar y limitar longitud de línea para que no se vea estrecho */
@media (max-width: 640px){
  .gfcf-result-body{ 
    grid-template-columns: 1fr; 
    text-align: center; 
    gap: 10px; 
  }
  .gfcf-result-body h3{ 
    font-size: 20px; 
    text-wrap: balance; /* Safari iOS 17+ */
  }
  .gfcf-result-body img{ 
    width: min(68vw, 220px); 
    height: auto; 
    aspect-ratio: 4 / 5; 
    margin-inline: auto; 
  }
  .gfcf-result-body p{ 
    max-width: 45ch; 
    margin-inline: auto; 
    line-height: 1.45; 
  }
}


  </style>
</head>
<body>
  <div class="gfcf-wrap" id="gfcf-miniquiz">
    <section class="gfcf-hero">
      <span class="gfcf-badge">MINIQUIZ</span>
      <h1 class="gfcf-title"><span style="color:var(--geta-blue)">Encara Messi...</span> Pero pasó el Geta ✊</h1>
      <p class="gfcf-claim">Revive el gol maradoniano de Leo Messi en la ida (Copa 06/07)… y celebra la remontada histórica del Getafe en el Coliseum.</p>

      <div class="gfcf-video-card">
        <div class="gfcf-video-wrap">
            <iframe src="https://www.youtube-nocookie.com/embed/waETo-ZWCRw?rel=0&modestbranding=1&playsinline=1 " allowfullscreen></iframe>
        </div>
      </div>

      <div class="gfcf-card">
        <h2 class="gfcf-q">¿Quién hizo doblete en el <strong>Getafe CF 4–0 FC Barcelona</strong> de la vuelta de semis de Copa 06/07?</h2>
        <div class="gfcf-options">
          <button class="gfcf-btn" data-answer="Güiza">Güiza</button>
          <button class="gfcf-btn" data-answer="Casquero">Casquero</button>
          <button class="gfcf-btn" data-answer="Belenguer">Belenguer</button>
          <button class="gfcf-btn" data-answer="Alexis">Alexis</button>
        </div>

        <div id="gfcf-result" class="gfcf-result">
          <img src="https://statics-maker.llt-services.com/get/images/2025/10/27/original/28c535e8-8905-4be6-8075-82ad7ac8cea1-401.webp" alt="Dani Güiza celebrando"/>
          <div>
            <h3>¡SÍ, SÍ, SÍ. NOS VAMOS A MADRID!</h3>
            <p>Daniel Güiza fue el héroe de la eliminatoria con dos goles en la victoria por 4–0 frente al FC Barcelona. Gracias a ellos remontamos el 5–2 adverso de la ida y nos clasificamos para la final.</p>
          </div>
        </div>
        <p id="gfcf-hint" class="gfcf-footnote" style="display:none"></p>
      </div>

      <p class="gfcf-footnote">¿Te sabes esta? Demuestra memoria azulona. 💙</p>
    </section>
    <div id="gfcf-sparkles" class="gfcf-sparkles" aria-hidden="true"></div>
  </div>

  <script>
    (function(){
      function init(){
        const wrap=document.getElementById('gfcf-miniquiz');
        const result=document.getElementById('gfcf-result');
        const hint=document.getElementById('gfcf-hint');
        const CORRECT='Güiza';
        wrap.addEventListener('click',e=>{
          const btn=e.target.closest('.gfcf-btn');
          if(!btn)return;
          const choice=btn.dataset.answer;
          const isCorrect=choice===CORRECT;
          wrap.querySelectorAll('.gfcf-btn').forEach(b=>b.classList.remove('is-correct','is-wrong'));
          if(isCorrect){btn.classList.add('is-correct');result.classList.add('is-visible');hint.style.display='none';fireSparkles(result,20);}else{btn.classList.add('is-wrong');hint.textContent='No exactamente… ¡piensa en nuestro 9 más letal aquella noche!';hint.style.display='block';}
        });
      }

      function fireSparkles(el,count){
        const host=document.getElementById('gfcf-sparkles');
        if(!el||!host)return;
        const rect=el.getBoundingClientRect();
        const colors=['#0a57ff','#ffd34f','#0b1736','#ffffff'];
        for(let i=0;i<count;i++){
          const s=document.createElement('span');
          s.className='star';
          s.innerHTML=`<svg viewBox='0 0 24 24'><path fill='${colors[i%colors.length]}' d='M12 2l2.2 5.1L20 8l-4 3.6L17 18l-5-3-5 3 1-6.4L4 8l5.8-.9L12 2z'/></svg>`;
          const x=rect.left+rect.width/2+(Math.random()*rect.width/2-rect.width/4);
          const y=rect.top+rect.height/2;
          s.style.left=x+'px';
          s.style.top=y+'px';
          const tx=(Math.random()*140-70)+'px';
          const ty=(80+Math.random()*120)+'px';
          const dx=(Math.random()*20-10)+'px';
          const dy=(Math.random()*10-5)+'px';
          s.style.setProperty('--tx',tx);
          s.style.setProperty('--ty',ty);
          s.style.setProperty('--dx',dx);
          s.style.setProperty('--dy',dy);
          const delay=i*20+'ms';
          const duration=900+Math.random()*400+'ms';
          s.style.animation=`gfcf-rise ${duration} cubic-bezier(.22,.61,.36,1) ${delay} forwards`;
          host.appendChild(s);
          setTimeout(()=>s.remove(),2200);
        }
      }
      document.readyState==='loading'?document.addEventListener('DOMContentLoaded',init):init();
    })();
  </script>
</body>
</html>


Quiz Apps

Facebook

Instagram

Linkedin

Tiktok

Twitter

Weibo

Whatsapp

Youtube