card.appendChild(posterDiv); card.appendChild(infoDiv); grid.appendChild(card); );
function closeModalHandler() modal.classList.remove('show'); document.body.style.overflow = ''; peliculas de juegos del hambre
.container max-width: 1400px; margin: 0 auto; padding: 2rem 2rem 4rem; function closeModalHandler() modal.classList.remove('show')
<!-- iconic quote section --> <div class="quote-section"> <div class="quote-icon">⚔️ 🕊️</div> <div class="quote-text">“Hope. It is the only thing stronger than fear. A spark is fine, as long as it's contained.”</div> <div class="quote-author">— President Coriolanus Snow</div> <div style="margin-top: 1rem; font-size:0.8rem; opacity:0.7;">“And may the odds be ever in your favor.”</div> </div> document.body.style.overflow = ''
<!-- stats tribute --> <div class="stats-panel"> <div class="stat"><strong>5</strong> epic films</div> <div class="stat"><strong>12</strong> districts + capitol</div> <div class="stat"><strong>$3.3B+</strong> worldwide box office</div> <div class="stat"><strong>🌹</strong> 64th—75th Hunger Games</div> </div>
closeBtn.addEventListener('click', closeModalHandler); window.addEventListener('click', (e) => if (e.target === modal) closeModalHandler(); ); document.addEventListener('keydown', (e) => if (e.key === 'Escape' && modal.classList.contains('show')) closeModalHandler(); );
// modal logic const modal = document.getElementById('filmModal'); const modalTitle = document.getElementById('modalTitle'); const modalDetail = document.getElementById('modalDetail'); const closeBtn = document.getElementById('closeModalBtn');