Unique And Professional Badges - VexaX
Run Code
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Unique and Professional Badges</title> <style> body { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: 100vh; background: #f3f4f6; font-family: 'Arial', sans-serif; margin: 0; } .badge-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding: 20px; } .badge { position: relative; display: inline-block; padding: 15px 30px; border-radius: 30px; color: white; font-size: 16px; font-weight: bold; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; overflow: hidden; } .badge:hover { transform: translateY(-10px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } .badge-icon { position: absolute; top: -20px; left: -20px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: flex; justify-content: center; align-items: center; font-size: 24px; transition: transform 0.3s ease; } .badge:hover .badge-icon { transform: scale(1.2) rotate(20deg); } @keyframes emoji-bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } .badge-emoji { display: inline-block; animation: emoji-bounce 2s infinite; } .badge-1 { background: linear-gradient(45deg, #ff6b6b, #f94d6a, #f65c5c); } .badge-2 { background: linear-gradient(45deg, #6bffb8, #4df9d2, #5cf6f1); } .badge-3 { background: linear-gradient(45deg, #6b92ff, #4d6af9, #5c5cf6); } .badge-4 { background: linear-gradient(45deg, #ffeb6b, #f9d74d, #f6b35c); } .badge-5 { background: linear-gradient(45deg, #d36bff, #a34df9, #785cf6); } .badge-6 { background: linear-gradient(45deg, #ff6bf0, #f94db8, #f65c92); } .badge-7 { background: linear-gradient(45deg, #6bffdf, #4df9d7, #5cf6c2); } .badge-8 { background: linear-gradient(45deg, #ffb26b, #f98e4d, #f66c5c); } .badge-9 { background: linear-gradient(45deg, #6bff89, #4df977, #5cf65c); } .badge-10 { background: linear-gradient(45deg, #ffa16b, #f97b4d, #f6615c); } .badge-11 { background: linear-gradient(45deg, #6b6bff, #4d4df9, #5c5cf6); } .badge-12 { background: linear-gradient(45deg, #ff6bff, #f94df9, #f65cf6); } .badge-13 { background: linear-gradient(45deg, #6bffca, #4df9b0, #5cf697); } .badge-14 { background: linear-gradient(45deg, #ffd26b, #f9b14d, #f68d5c); } .badge-15 { background: linear-gradient(45deg, #6bff6b, #4df94d, #5cf65c); } </style> </head> <body> <div class="badge-container"> <div class="badge badge-1"> <span class="badge-icon">🌟</span> Top Performer </div> <div class="badge badge-2"> <span class="badge-icon">🎉</span> Achievement Unlocked </div> <div class="badge badge-3"> <span class="badge-icon">🏆</span> Champion </div> <div class="badge badge-4"> <span class="badge-icon">🚀</span> Fast Track </div> <div class="badge badge-5"> <span class="badge-icon">💡</span> Innovative Idea </div> <div class="badge badge-6"> <span class="badge-icon">🎨</span> Creative Mind </div> <div class="badge badge-7"> <span class="badge-icon">🔧</span> Problem Solver </div> <div class="badge badge-8"> <span class="badge-icon">👥</span> Team Player </div> <div class="badge badge-9"> <span class="badge-icon">💻</span> Coding Guru </div> <div class="badge badge-10"> <span class="badge-icon">📈</span> Sales Star </div> <div class="badge badge-11"> <span class="badge-icon">📝</span> Best Report </div> <div class="badge badge-12"> <span class="badge-icon">🎯</span> Target Achiever </div> <div class="badge badge-13"> <span class="badge-icon">📚</span> Knowledge Seeker </div> <div class="badge badge-14"> <span class="badge-icon">🛠️</span> Maintenance Master </div> <div class="badge badge-15"> <span class="badge-icon">🚴</span> Fitness Champion </div> </div> </body> </html>