ProjectGenesis's picture
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);
}