Flip phone Sky blue 🩵

<!-- // Hello Kitty Slide - Freddy (⁠◡⁠ ⁠ω⁠ ⁠◡⁠)🪲// --> <div id="hello-kitty"></div> <div class="contenedor-telefono"> <style> #hello-kitty { position: fixed; top: 0; left: 0; visibility: hidden; } .contenedor-telefono { position: fixed; bottom: 20px; right: 40px; width: 104px; height: auto; z-index: 999; cursor: pointer; } .marco { position: relative; width: 100%; } .pantalla { position: absolute; z-index: 1; top: 19.5% !important; left: 23.4% !important; width: 53% !important; height: 28% !important; background: #000; overflow: hidden; } /* Filtro de líneas */ .pantalla::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(18, 16, 16, 0) 40%, rgba(0, 0, 0, 0.15) 50%); background-size: 100% 1.5px; z-index: 10; pointer-events: none; } /* Efecto ondas de líneas */ .pantalla::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%); background-size: 100% 15px; z-index: 11; pointer-events: none; animation: barrido 4s linear infinite; } @keyframes barrido { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } .imagen-fondo { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0px !important; } .carcasa { position: relative; z-index: 20; width: 100%; display: block; } @keyframes bloqueo-fade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } } .bloqueo { position: absolute; top: 0; left: 0; z-index: 5; } /* Estados */ .estado-abierto { display: none; } #hello-kitty:target ~ .contenedor-telefono .estado-abierto { display: block; } #hello-kitty:target ~ .contenedor-telefono .estado-abierto .bloqueo { animation: bloqueo-fade 3s ease-in-out forwards; } #hello-kitty:target ~ .contenedor-telefono .estado-cerrado { display: none; } .enlace { text-decoration: none !important; outline: none !important; } .musica-oculta { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } </style> <!-- TELÉFONO CERRADO --> <a href="#hello-kitty" class="estado-cerrado"> <div class="marco"> <div class="pantalla"> <img src="https://i.postimg.cc/0ykMNX8h/cd63c62d2890295fa2aca31b43a5eeee.jpg" class="imagen-fondo"> </div> <img src="https://i.postimg.cc/kgcPsfPH/280-sin-titulo3-20260405002040.png" class="carcasa"> </div> </a> <!-- TELÉFONO ABIERTO --> <a href="#close" class="estado-abierto"> <div class="marco"> <div class="pantalla"> <img src="https://i.postimg.cc/jdQntYrB/7adaf66dff59ec2f60df53841ca1caee.jpg" class="imagen-fondo"> <img src="https://i.postimg.cc/wvT0cQcn/05ae1aa4d9ec52d3a4b69ba2c1e3fe70.gif" class="imagen-fondo bloqueo"> <!-- El sonido solo carga al abrir teléfono --> <div class="musica-oculta"> <iframe width="1" height="1" src="https://www.youtube.com/embed/c4j9Z9bwBBU?autoplay=1&start=0&end=37" frameborder="0" allow="autoplay"></iframe> </div> </div> <img src="https://i.postimg.cc/fLy2xvMw/280-sin-titulo3-20260405001818.png" class="carcasa"> </div> </a> </div>