| <div style="position: relative; height: 120px; width: 100%; overflow: hidden; background: linear-gradient(270deg, #FFEBEE, #FFF3E0, #FFFDE7, #E8F5E9, #E3F2FD, #F3E5F5); background-size: 1400% 1400%; animation: rainbow 13.33s ease infinite;"> | |
| <div id=banner-text style="position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 120px; font-weight: black; font-family: Impact, sans-serif; color: white; animation: text-pan 13.33s linear infinite;"> | |
| Collaboration | |
| </div> | |
| </div> | |
| <style>@keyframes rainbow{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes text-pan{0%{left:-100%}16.66%{left:100%}16.67%{content:"Compute";left:-100%}33.33%{left:100%}33.34%{content:"Security";left:-100%}50%{left:100%}50.01%{content:"Governance";left:-100%}66.66%{left:100%}66.67%{content:"Compliance";left:-100%}83.33%{left:100%}83.34%{content:"Support";left:-100%}to{left:100%}}</style><script>let bannerText=document.getElementById("banner-text"),textSequence=["Collaboration","Compute","Security","Governance","Compliance","Support"],currentIndex=0;setInterval(()=>{bannerText.textContent=textSequence[currentIndex],currentIndex=(currentIndex+1)%textSequence.length},2222)</script> |