Spaces:
Running
Running
generate pulsing animation for the Promotional Offers / Flash Sales section - Follow Up Deployment
Browse files- index.html +8 -2
index.html
CHANGED
|
@@ -213,6 +213,12 @@
|
|
| 213 |
25% { transform: translateX(-5px); }
|
| 214 |
75% { transform: translateX(5px); }
|
| 215 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 216 |
</style>
|
| 217 |
</head>
|
| 218 |
<body class="pt-20">
|
|
@@ -329,7 +335,7 @@
|
|
| 329 |
<!-- Header Banner -->
|
| 330 |
<header class="pt-8 pb-4 px-4">
|
| 331 |
<div class="container mx-auto">
|
| 332 |
-
<div class="glass-card glow-border relative overflow-hidden">
|
| 333 |
<div class="absolute -top-24 -right-24 w-48 h-48 bg-yellow-500 rounded-full filter blur-[60px] opacity-20"></div>
|
| 334 |
<div class="relative z-10 p-6 md:p-8 flex flex-col md:flex-row items-center justify-between">
|
| 335 |
<div class="mb-4 md:mb-0 text-center md:text-left">
|
|
@@ -484,7 +490,7 @@
|
|
| 484 |
<div class="text-xs text-gray-400">Ends in:</div>
|
| 485 |
</div>
|
| 486 |
|
| 487 |
-
<button class="btn-gradient px-6 py-3 font-bold">
|
| 488 |
Claim Now
|
| 489 |
</button>
|
| 490 |
</div>
|
|
|
|
| 213 |
25% { transform: translateX(-5px); }
|
| 214 |
75% { transform: translateX(5px); }
|
| 215 |
}
|
| 216 |
+
|
| 217 |
+
@keyframes flashPulse {
|
| 218 |
+
0% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.4); }
|
| 219 |
+
50% { box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.2); }
|
| 220 |
+
100% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.4); }
|
| 221 |
+
}
|
| 222 |
</style>
|
| 223 |
</head>
|
| 224 |
<body class="pt-20">
|
|
|
|
| 335 |
<!-- Header Banner -->
|
| 336 |
<header class="pt-8 pb-4 px-4">
|
| 337 |
<div class="container mx-auto">
|
| 338 |
+
<div class="glass-card glow-border relative overflow-hidden animate-[flashPulse_2s_ease-in-out_infinite]">
|
| 339 |
<div class="absolute -top-24 -right-24 w-48 h-48 bg-yellow-500 rounded-full filter blur-[60px] opacity-20"></div>
|
| 340 |
<div class="relative z-10 p-6 md:p-8 flex flex-col md:flex-row items-center justify-between">
|
| 341 |
<div class="mb-4 md:mb-0 text-center md:text-left">
|
|
|
|
| 490 |
<div class="text-xs text-gray-400">Ends in:</div>
|
| 491 |
</div>
|
| 492 |
|
| 493 |
+
<button class="btn-gradient px-6 py-3 font-bold hover:animate-[pulse_1.5s_ease-in-out_infinite]">
|
| 494 |
Claim Now
|
| 495 |
</button>
|
| 496 |
</div>
|