<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interactive Glass Cards</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background: linear-gradient(135deg, #101010, #1f1f1f); height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: Arial, sans-serif; } .neon-shapes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .circle, .triangle, .rectangle { position: absolute; opacity: 0.8; filter: blur(2px); } .circle { width: 200px; height: 200px; background: rgba(0, 255, 255, 0.8); border-radius: 50%; top: 20%; left: 15%; } .triangle { width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 200px solid rgba(255, 0, 255, 0.8); top: 50%; left: 70%; } .rectangle { width: 220px; height: 180px; background: rgba(255, 255, 0, 0.8); top: 70%; left: 30%; } .card-container { display: flex; gap: 20px; position: relative; z-index: 1; } .card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); width: 230px; height: 320px; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); transition: transform 0.3s ease, box-shadow 0.3s ease; } .card img { width: 100px; height: 100px; border-radius: 50%; transition: transform 0.3s, box-shadow 0.3s; } .card h3 { color: white; font-family: 'Lucida Sans', 'Lucida Sans Regular', Geneva, Verdana, sans-serif; } .author { color: white; font-size: 14px; margin-top: -10px; } .follow-btn { background: rgba(0, 255, 127, 0.7); border: none; padding: 15px 25px; border-radius: 20px; color: white; font-size: 18px; cursor: pointer; text-transform: uppercase; animation: neon-flicker 2s infinite; transition: background 0.3s; } .follow-btn:hover { background: rgba(0, 255, 127, 1); } @keyframes neon-flicker { 0%, 100% { box-shadow: 0 0 10px rgba(0, 255, 127, 0.8), 0 0 30px rgba(0, 255, 127, 0.8), 0 0 50px rgba(0, 255, 127, 0.8); } 50% { box-shadow: 0 0 20px rgba(0, 255, 127, 1), 0 0 40px rgba(0, 255, 127, 1), 0 0 60px rgba(0, 255, 127, 1); } } .card:hover { transform: scale(1.1); box-shadow: 0 8px 50px rgba(0, 255, 127, 0.8); } .card img { width: 100px; height: 100px; border-radius: 50%; transition: transform 0.3s ease, filter 0.3s ease; } .card:hover img { transform: translateY(-10px); } .card img.active { transform: translateY(-30px) scale(1.2); filter: drop-shadow(0 0 20px rgba(255, 255, 0, 1)); } </style> </head> <body> <div class="neon-shapes"> <div class="circle"></div> <div class="triangle"></div> <div class="rectangle"></div> </div> <div class="card-container"> <div class="card" onclick="cardClickEffect(this)"> @@##@@ <h3>webstreet_code</h3> <div class="author">Author: Alexa</div> <button class="follow-btn">Follow Us</button> </div> <div class="card" onclick="cardClickEffect(this)"> @@##@@ <h3>webstreet_code</h3> <div class="author">Author: Jerry</div> <button class="follow-btn">Follow Us</button> </div> <div class="card" onclick="cardClickEffect(this)"> @@##@@ <h3>webstreet_code</h3> <div class="author">Author: Tom</div> <button class="follow-btn">Follow Us</button> </div> </div> <script> function cardClickEffect(card) { const img = card.querySelector('img'); img.classList.add('active'); setTimeout(() => { img.classList.remove('active'); }, 3000); // 3 seconds for the effect duration // const img = card.querySelector('img'); img.style.transform = 'translateY(-20px) scale(1.5)'; // img.style.boxShadow = '0 10px 60px rgba(255, 255, 0, 1)'; card.style.transform = 'scale(1.2)'; card.style.boxShadow = '0 10px 60px rgba(255, 255, 0, 1)'; setTimeout(() => { img.style.transform = 'translateY(0) scale(1)'; img.style.boxShadow = 'none'; card.style.transform = 'scale(1)'; card.style.boxShadow = '0 4px 30px rgba(0, 0, 0, 0.5)'; }, 3000); } </script> </body> </html>
