| 123456789101112131415161718192021222324252627282930313233343536373839404142434445 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Contact Homepage</title>
- <script src="https://cdn.tailwindcss.com"></script>
- <style>
- /* Holographic Gleam Effect */
- .holographic-gleam::before {
- content: '';
- position: absolute;
- top: -10%;
- left: -50%;
- width: 200%;
- height: 200%;
- background: linear-gradient(
- 110deg,
- rgba(0, 255, 255, 0) 40%,
- rgba(0, 255, 255, 0.5) 48%,
- rgba(255, 0, 255, 0.5) 52%,
- rgba(255, 0, 255, 0) 60%
- );
- background-size: 200% 100%;
- animation: holographic-gleam 3s linear infinite;
- transform: rotate(25deg);
- z-index: 1;
- opacity: 1; /* Always active */
- }
- @keyframes holographic-gleam {
- 0% { background-position: 200% 0; }
- 100% { background-position: -200% 0; }
- }
- @keyframes spin {
- from { transform: rotate(0deg); }
- to { transform: rotate(360deg); }
- }
- </style>
- </head>
- <body class="bg-slate-100">
- <div id="root"></div>
- <script type="module" src="/src/index.tsx"></script>
- </body>
- </html>
|
