Courses
Admissions & Support
Course Search
Courses
Admissions & Support
Course Search
Our Services
Our Community
Course Search
Governance
Professional Services
/* Rotating ring animation */ @keyframes rotateRing { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes pulseGlow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
/* Outer ring glow effect */ .badge-container::before { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; background: radial-gradient(circle, rgba(255,215,0,0.2), transparent); border-radius: 50%; z-index: -1; animation: pulseGlow 2s ease-in-out infinite; } kubestronaut golden
<!-- Filter for glow --> <filter id="glow"> <feGaussianBlur stdDeviation="2" result="coloredBlur"/> <feMerge> <feMergeNode in="coloredBlur"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs>
.star { color: gold; font-size: 20px; } </style> </head> <body> <div style="text-align: center;"> <div class="badge-container"> <svg class="kubestronaut-badge" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <defs> <!-- Gradients --> <linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:#FFD700;stop-opacity:1" /> <stop offset="50%" style="stop-color:#FFA500;stop-opacity:1" /> <stop offset="100%" style="stop-color:#FFD700;stop-opacity:1" /> </linearGradient> <linearGradient id="darkGold" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:#B8860B;stop-opacity:1" /> <stop offset="100%" style="stop-color:#DAA520;stop-opacity:1" /> </linearGradient> /* Rotating ring animation */ @keyframes rotateRing {
.badge-container:hover { transform: scale(1.05); filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.5)); }
<!-- Golden laurel leaves (left side) --> <g fill="none" stroke="#DAA520" stroke-width="1.5"> <path d="M 60 85 Q 55 80 58 75"/> <path d="M 58 88 Q 52 83 55 78"/> <path d="M 56 91 Q 50 86 52 81"/> </g> } 100% { transform: rotate(360deg)
body { min-height: 100vh; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); display: flex; justify-content: center; align-items: center; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }