Alpinfans Adventskalender 2024

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta property="og:title" content="Alpinfans Adventskalender 2024"> <meta property="og:image" content="https://alpinfans.com/adventskalender/advent_share.jpg"> <meta property="og:description" content="T盲glich Tageskarten f眉r ein Skigebiet gewinnen"> <meta property="og:url" content="https://alpinfans.com/adventskalender/"> <meta name="twitter:title" content="Alpinfans Adventskalender 2024"> <meta name="twitter:description" content="T盲glich Tageskarten f眉r ein Skigebiet gewinnen"> <meta name="twitter:image" content="https://alpinfans.com/adventskalender/advent_share.jpg"> <title>Alpinfans Adventskalender 2024</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body, html { width: 100%; height: 100%; background-color: #404954; } .container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; overflow: hidden; background-color: #404954; position: relative; } img { max-width: 100%; max-height: 100%; object-fit: contain; background-color: #404954; position: absolute; transition: opacity 1s ease-in-out; /* Updated transition duration to 1s */ } .hidden { opacity: 0; /* Make hidden image invisible */ pointer-events: none; /* Disable interactions with hidden image */ } .visible { opacity: 1; /* Make visible image fully opaque */ } /* Modal styling */ .modal { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 10px 20px; border-radius: 10px; font-family: Verdana; font-size: 18px; text-align:center; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); display: none; /* Hidden by default */ } .modal a { color: #00aaff; text-decoration: none; font-weight: bold; } .modal a:hover { text-decoration: underline; } </style> </head> <body> <div class="container">  <img id="mainImage" class="visible" src="advent_desktop_04.jpg" alt="Advent Calendar" style="cursor:pointer;"> <img id="openImage" class="hidden" src="advent_desktop_open.jpg" alt="Advent Calendar Open"> </div> <div class="modal" id="modal"> Die Gondel kann ab 6 Uhr ge枚ffnet werden! </div> <script> const mainImage = document.getElementById("mainImage"); const openImage = document.getElementById("openImage"); const modal = document.getElementById("modal"); function setInitialImage() { if (window.innerWidth <= 500) { mainImage.src = "advent_mobile_04.jpg"; document.querySelector('.modal').style.width='80%'; } else { mainImage.src = "advent_desktop_04.jpg"; } } // Swap the image on click modal.style.display = "block"; // Set initial image on page load setInitialImage(); // Handle window resizing window.addEventListener("resize", setInitialImage); </script> </body> </html>

CINXE.COM

Alpinfans Adventskalender 2024