| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>abohmead | 3D Profile Card</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); |
| min-height: 100vh; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| perspective: 1000px; |
| overflow: hidden; |
| } |
| |
| .card-container { |
| width: 300px; |
| height: 400px; |
| position: relative; |
| transform-style: preserve-3d; |
| transition: transform 0.5s ease; |
| } |
| |
| .card { |
| width: 100%; |
| height: 100%; |
| position: relative; |
| transform-style: preserve-3d; |
| transition: transform 0.5s ease; |
| border-radius: 20px; |
| box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); |
| } |
| |
| .card-front, .card-back { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| backface-visibility: hidden; |
| border-radius: 20px; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| align-items: center; |
| padding: 20px; |
| box-sizing: border-box; |
| } |
| |
| .card-front { |
| background: linear-gradient(135deg, #6e45e2 0%, #89d4cf 100%); |
| transform: rotateY(0deg); |
| } |
| |
| .card-back { |
| background: linear-gradient(135deg, #89d4cf 0%, #6e45e2 100%); |
| transform: rotateY(180deg); |
| } |
| |
| .avatar { |
| width: 120px; |
| height: 120px; |
| border-radius: 50%; |
| border: 5px solid white; |
| object-fit: cover; |
| margin-bottom: 20px; |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); |
| } |
| |
| .name { |
| font-size: 24px; |
| font-weight: 700; |
| color: white; |
| margin-bottom: 5px; |
| text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); |
| } |
| |
| .title { |
| font-size: 16px; |
| font-weight: 400; |
| color: rgba(255, 255, 255, 0.8); |
| margin-bottom: 20px; |
| } |
| |
| .social-icons { |
| display: flex; |
| gap: 15px; |
| } |
| |
| .social-icon { |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| background: rgba(255, 255, 255, 0.2); |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| color: white; |
| font-size: 18px; |
| transition: all 0.3s ease; |
| } |
| |
| .social-icon:hover { |
| background: white; |
| color: #6e45e2; |
| transform: translateY(-5px); |
| } |
| |
| .discord-badge { |
| background: #7289da; |
| padding: 8px 15px; |
| border-radius: 20px; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| margin-top: 20px; |
| color: white; |
| font-weight: 500; |
| } |
| |
| .stats { |
| display: flex; |
| width: 100%; |
| justify-content: space-around; |
| margin-top: 30px; |
| } |
| |
| .stat { |
| text-align: center; |
| } |
| |
| .stat-value { |
| font-size: 24px; |
| font-weight: 700; |
| color: white; |
| } |
| |
| .stat-label { |
| font-size: 12px; |
| color: rgba(255, 255, 255, 0.7); |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| } |
| |
| .floating { |
| animation: floating 3s ease-in-out infinite; |
| } |
| |
| @keyframes floating { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-10px); } |
| 100% { transform: translateY(0px); } |
| } |
| |
| .glow { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| border-radius: 20px; |
| background: radial-gradient(circle at center, rgba(110, 69, 226, 0.4) 0%, transparent 70%); |
| z-index: -1; |
| filter: blur(20px); |
| } |
| </style> |
| </head> |
| <body> |
| <div class="card-container" id="cardContainer"> |
| <div class="card" id="card"> |
| <div class="glow"></div> |
| <div class="card-front"> |
| <div class="avatar floating"> |
| <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> |
| <defs> |
| <linearGradient id="avatarGradient" x1="0%" y1="0%" x2="100%" y2="100%"> |
| <stop offset="0%" stop-color="#6e45e2" /> |
| <stop offset="100%" stop-color="#89d4cf" /> |
| </linearGradient> |
| </defs> |
| <circle cx="50" cy="50" r="45" fill="url(#avatarGradient)" /> |
| <text x="50" y="60" font-size="40" text-anchor="middle" fill="white" font-weight="bold">A</text> |
| </svg> |
| </div> |
| <h1 class="name">abohmead</h1> |
| <p class="title">Discord Enthusiast</p> |
| |
| <div class="discord-badge"> |
| <i class="fab fa-discord"></i> |
| <span>abohmead</span> |
| </div> |
| |
| <div class="social-icons"> |
| <div class="social-icon"> |
| <i class="fab fa-twitter"></i> |
| </div> |
| <div class="social-icon"> |
| <i class="fab fa-github"></i> |
| </div> |
| <div class="social-icon"> |
| <i class="fab fa-discord"></i> |
| </div> |
| </div> |
| </div> |
| |
| <div class="card-back"> |
| <h1 class="name">About Me</h1> |
| <p class="title" style="text-align: center; margin-bottom: 30px;"> |
| Passionate about gaming, coding, and building communities on Discord. |
| </p> |
| |
| <div class="stats"> |
| <div class="stat"> |
| <div class="stat-value">100+</div> |
| <div class="stat-label">Friends</div> |
| </div> |
| <div class="stat"> |
| <div class="stat-value">10+</div> |
| <div class="stat-label">Servers</div> |
| </div> |
| <div class="stat"> |
| <div class="stat-value">24/7</div> |
| <div class="stat-label">Active</div> |
| </div> |
| </div> |
| |
| <div style="margin-top: 30px; width: 100%;"> |
| <div style="background: rgba(255, 255, 255, 0.2); height: 4px; border-radius: 2px; width: 100%;"> |
| <div style="background: white; height: 100%; width: 80%; border-radius: 2px;"></div> |
| </div> |
| <div style="text-align: right; margin-top: 5px; color: rgba(255, 255, 255, 0.7); font-size: 12px;"> |
| Discord Level: 80% |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| const card = document.getElementById('card'); |
| const cardContainer = document.getElementById('cardContainer'); |
| |
| |
| cardContainer.addEventListener('mousemove', (e) => { |
| const xAxis = (window.innerWidth / 2 - e.pageX) / 25; |
| const yAxis = (window.innerHeight / 2 - e.pageY) / 25; |
| card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`; |
| }); |
| |
| |
| cardContainer.addEventListener('mouseleave', () => { |
| card.style.transform = 'rotateY(0deg) rotateX(0deg)'; |
| }); |
| |
| |
| let flipped = false; |
| card.addEventListener('click', () => { |
| flipped = !flipped; |
| if (flipped) { |
| card.style.transform = 'rotateY(180deg)'; |
| } else { |
| card.style.transform = 'rotateY(0deg)'; |
| } |
| }); |
| |
| |
| function createParticle() { |
| const particle = document.createElement('div'); |
| particle.style.position = 'absolute'; |
| particle.style.width = Math.random() * 5 + 2 + 'px'; |
| particle.style.height = particle.style.width; |
| particle.style.background = 'rgba(255, 255, 255, ' + Math.random() * 0.5 + ')'; |
| particle.style.borderRadius = '50%'; |
| particle.style.top = Math.random() * 100 + 'vh'; |
| particle.style.left = Math.random() * 100 + 'vw'; |
| |
| const animationDuration = Math.random() * 20 + 10 + 's'; |
| |
| particle.style.animation = `float ${animationDuration} linear infinite`; |
| particle.style.animationDelay = Math.random() * 10 + 's'; |
| |
| document.body.appendChild(particle); |
| |
| |
| setTimeout(() => { |
| particle.remove(); |
| }, parseFloat(animationDuration) * 1000); |
| } |
| |
| |
| for (let i = 0; i < 20; i++) { |
| createParticle(); |
| setTimeout(createParticle, i * 1000); |
| } |
| |
| |
| setInterval(createParticle, 2000); |
| |
| |
| cardContainer.addEventListener('mouseenter', () => { |
| card.classList.add('floating'); |
| }); |
| |
| cardContainer.addEventListener('mouseleave', () => { |
| card.classList.remove('floating'); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=abohmead/as" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
