Add Block HTML,CSS,JS Code
<style> @import url("https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap"); :root { --button-width: 15rem; --button-height: 4rem; --button-bg: linear-gradient(90deg, rgb(32, 32, 53), rgb(46, 43, 89)); --font-size: 2rem; --before-offset: 10px; --after-offset: 20px; --box-size: 2.5rem; --box-bg: linear-gradient(180deg, rgb(58, 133, 246), rgb(38, 81, 178)); --box-animation-ease: cubic-bezier(0.46, 0.03, 0.52, 0.96); --outline-bg-col-one: hsla(0, 0%, 100%, 1); --outline-bg-col-two: hsla(306, 82%, 83%, 1); --outline-bg-col-three: hsla(181, 79%, 85%, 1); --outline-bg: linear-gradient( 90deg, var(--outline-bg-col-one) 0%, var(--outline-bg-col-two) 50%, var(--outline-bg-col-three) 100% ); --outline-animation-ease: cubic-bezier(0.65, 0.05, 0.36, 1); } body { font-family: "Rubik Mono One", serif; } .rounded { border-radius: 99999px; } .ml { margin-left: 0.5em; } .box { display: flex; align-items: center; justify-content: center; width: var(--box-size); height: var(--box-size); background: var(--box-bg); border: 2px solid white; font-size: 1.75rem; font-family: "Helvetica", sans-serif; overflow: hidden; } .box img { max-width: 100%; max-height: 100%; } #button { position: relative; display: flex; align-items: center; justify-content: flex-start; height: var(--button-height); background: var(--button-bg); margin: 25px auto; justify-content: center; margin-left: 10%; margin-right: 10%; } #button:hover { cursor: pointer; } #button:hover .box { animation: 0.75s squish var(--box-animation-ease) infinite; } #button:hover::after { animation: 2s moveBg var(--outline-animation-ease) infinite both; } #button::before, #button::after { content: ""; position: absolute; background: var(--outline-bg); background-size: cover; background-position: 0 0; border-radius: 99999px; } #button::before { top: calc(var(--before-offset) / -2); left: calc(var(--before-offset) / -2); height: calc(100% + var(--before-offset)); width: calc(100% + var(--before-offset)); z-index: -1; } #button::after { top: calc(var(--after-offset) / -2); left: calc(var(--after-offset) / -2); height: calc(100% + var(--after-offset)); width: calc(100% + var(--after-offset)); z-index: -2; filter: blur(12px); } @keyframes moveBg { to { background-position: var(--button-width) 0%; } } @keyframes squish { from, to { transform: none; } 25% { transform: translateY(0.25em) scaleY(0.75) scaleX(0.95); } 75% { transform: translateY(-0.1rem) scaleY(1) scaleX(0.95); } } </style> <center> <a href="https://bukakartu.id/" target="_blank"> <div id="button" class="rounded"> <div class="box rounded ml"> <img src="https://bukakartu.id/assets/img/1_1699349132.webp" alt="Image" width="40" height="40"> </div> <span class="text ml">bukakartu.id</span> </div> </a> <center>
<style> /* Gaya untuk popup */ .popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; background-color: white; border-radius: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 20px; text-align: center; width: 320px; } .popup img { max-width: 100%; height: auto; } .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999; } .close-btn { display: block; margin: 20px auto 0; padding: 8px 16px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } .close-btn:hover { background-color: #0056b3; } .qr-btn { font-size: 24px; cursor: pointer; background-color: black; color: white; border-color: white; border-radius: 20%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 5px 4px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease-in-out; position: fixed; bottom: 5px; /* Jarak dari bawah */ right: 25px; /* Jarak dari kanan */ z-index: 1001; } .qr-btn:hover { transform: scale(1.1); } </style> <!-- Tombol QR --> <button id="qr-btn" class="qr-btn"> <i class="fa-solid fa-qrcode"></i> </button> <!-- Popup dan Overlay --> <div class="overlay" id="overlay"></div> <div class="popup" id="popup"> /* ganti dengan alamt gambar QR mu */ <img src="https://via.placeholder.com/300?text=QR+Code" alt="QR Code"> <button class="close-btn" id="close-btn">Tutup</button> </div> <script> // JavaScript untuk mengontrol popup const qrBtn = document.getElementById('qr-btn'); const popup = document.getElementById('popup'); const overlay = document.getElementById('overlay'); const closeBtn = document.getElementById('close-btn'); qrBtn.addEventListener('click', () => { popup.style.display = 'block'; overlay.style.display = 'block'; }); closeBtn.addEventListener('click', () => { popup.style.display = 'none'; overlay.style.display = 'none'; }); overlay.addEventListener('click', () => { popup.style.display = 'none'; overlay.style.display = 'none'; }); </script>
<style> #snow-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; } .snowflake { position: absolute; top: -10px; color: white; font-size: 10px; animation: fall 10s linear infinite; } @keyframes fall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } } </style> <div id="snow-container"></div> <script> const snowContainer = document.getElementById('snow-container'); const snowflakeSymbols = ['β', 'β ', 'β']; function createSnowflake() { const snowflake = document.createElement('div'); snowflake.className = 'snowflake'; snowflake.textContent = snowflakeSymbols[Math.floor(Math.random() * snowflakeSymbols.length)]; snowflake.style.left = Math.random() * 100 + 'vw'; snowflake.style.fontSize = Math.random() * 10 + 10 + 'px'; snowflake.style.animationDuration = Math.random() * 5 + 5 + 's'; snowflake.style.opacity = Math.random(); snowContainer.appendChild(snowflake); // Hapus salju setelah animasi selesai setTimeout(() => { snowflake.remove(); }, 10000); } // Tambahkan salju setiap 200ms setInterval(createSnowflake, 200); </script>
<style> .baris { display: flex; margin-top: 1rem; flex-wrap: nowrap; align-content: stretch; justify-content: center; flex-direction: row; } .kolom { flex: 1; padding: 0.5rem; } .kotak-gambar { display: flex; padding: 0.2rem; cursor: pointer; background-color: transparent; background-size: cover; background-position: center center; width: 100%; height: 0; padding-bottom: 100%; /* Media query untuk mode mobile */ @media (max-width: 768px) { padding-bottom: 100%; } transition: transform 0.2s; } .kotak-gambar:hover { transform: scale(1.1); } </style> <center> <div class="baris pa-2"> <div class="kolom"> <a href="https://bukakartu.id/"> <div class="kotak-gambar" style="background-image: url('https://bukakartu.id/assets/linkstack/images/avatar_1698220876.webp');" alt="bukakartu"></div>bukakartu </a> </div> <div class="kolom"> <a href="https://bukakartu.id/"> <div class="kotak-gambar" style="background-image: url('https://bukakartu.id/assets/linkstack/images/avatar_1698220876.webp');" alt="bukakartu"></div>bukakartu </a> </div> <div class="kolom"> <a href="https://bukakartu.id/"> <div class="kotak-gambar" style="background-image: url('https://bukakartu.id/assets/linkstack/images/avatar_1698220876.webp');" alt="bukakartu"></div>bukakartu </a> </div> </div> .<center>
<style> /* .fadein ganti dengan class yang ingin ada efek heartbeat */ .fadein { animation: heartbeat 1.5s infinite; } @keyframes heartbeat { 0% { transform: scale(1); } 25% { transform: scale(1.1); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } 100% { transform: scale(1); } } </style>