Create the top portion of a “Coming Soon” page for FiveXBet.com. Only generate the elements listed below — do not add additional sections.
013faa4
verified
| @keyframes scroll { | |
| 0% { | |
| transform: translateX(0); | |
| } | |
| 100% { | |
| transform: translateX(-50%); | |
| } | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-20px); | |
| } | |
| } | |
| @keyframes float-delay { | |
| 0%, 100% { | |
| transform: translateY(-10px); | |
| } | |
| 50% { | |
| transform: translateY(10px); | |
| } | |
| } | |
| @keyframes glow { | |
| 0% { | |
| filter: drop-shadow(0 0 5px rgba(0, 162, 255, 0.8)) drop-shadow(0 0 10px rgba(255, 0, 255, 0.5)); | |
| } | |
| 50% { | |
| filter: drop-shadow(0 0 10px rgba(0, 162, 255, 0.8)) drop-shadow(0 0 20px rgba(255, 0, 255, 0.8)); | |
| } | |
| 100% { | |
| filter: drop-shadow(0 0 5px rgba(0, 162, 255, 0.8)) drop-shadow(0 0 10px rgba(255, 0, 255, 0.5)); | |
| } | |
| } | |
| @keyframes title-glow { | |
| 0% { | |
| text-shadow: 0 0 5px rgba(0, 162, 255, 0.8), 0 0 10px rgba(255, 0, 255, 0.5); | |
| } | |
| 50% { | |
| text-shadow: 0 0 10px rgba(0, 162, 255, 0.8), 0 0 20px rgba(255, 0, 255, 0.8); | |
| } | |
| 100% { | |
| text-shadow: 0 0 5px rgba(0, 162, 255, 0.8), 0 0 10px rgba(255, 0, 255, 0.5); | |
| } | |
| } | |
| .animate-scroll { | |
| animation: scroll 20s linear infinite; | |
| } | |
| .animate-float { | |
| animation: float 5s ease-in-out infinite; | |
| } | |
| .animate-float-delay { | |
| animation: float-delay 6s ease-in-out infinite 1s; | |
| } | |
| .glow-effect { | |
| animation: glow 3s ease-in-out infinite; | |
| } | |
| .neon-title { | |
| color: white; | |
| animation: title-glow 3s ease-in-out infinite; | |
| } | |
| .neon-subtitle { | |
| text-shadow: 0 0 8px rgba(0, 162, 255, 0.6), 0 0 15px rgba(255, 0, 255, 0.4); | |
| } | |
| #particles-js { | |
| background: transparent; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .scrolling-carousel { | |
| width: 100%; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .crypto-icon { | |
| display: inline-block; | |
| transition: transform 0.3s ease; | |
| } | |
| .crypto-icon:hover { | |
| transform: scale(1.1); | |
| } |