Created
August 27, 2025 03:34
-
-
Save socool/2a2703fcaf747d229cfae066fbf9e18b to your computer and use it in GitHub Desktop.
ai coder workshop 1
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>KBTG</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap'); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| height: 100vh; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-family: 'Orbitron', monospace; | |
| overflow: hidden; | |
| } | |
| body::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>') repeat; | |
| animation: sparkle 3s linear infinite; | |
| } | |
| h1 { | |
| font-size: 8rem; | |
| font-weight: 900; | |
| text-align: center; | |
| letter-spacing: 0.5rem; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| h1 span { | |
| display: inline-block; | |
| background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4); | |
| background-size: 400% 400%; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| animation: gradientShift 3s ease-in-out infinite, bounce 2s ease-in-out infinite; | |
| text-shadow: 0 0 30px rgba(255, 255, 255, 0.5); | |
| filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3)); | |
| transition: all 0.3s ease; | |
| } | |
| #k { | |
| animation-delay: 0s; | |
| } | |
| #b { | |
| animation-delay: 0.2s; | |
| } | |
| #t { | |
| animation-delay: 0.4s; | |
| } | |
| #g { | |
| animation-delay: 0.6s; | |
| } | |
| h1 span:hover { | |
| transform: scale(1.2) rotate(5deg); | |
| filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.8)); | |
| } | |
| @keyframes gradientShift { | |
| 0%, 100% { | |
| background-position: 0% 50%; | |
| } | |
| 50% { | |
| background-position: 100% 50%; | |
| } | |
| } | |
| @keyframes bounce { | |
| 0%, 20%, 50%, 80%, 100% { | |
| transform: translateY(0); | |
| } | |
| 40% { | |
| transform: translateY(-20px); | |
| } | |
| 60% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| @keyframes sparkle { | |
| 0% { | |
| transform: translateY(0px); | |
| } | |
| 100% { | |
| transform: translateY(-100px); | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| h1 { | |
| font-size: 4rem; | |
| letter-spacing: 0.3rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1> | |
| <span id="k">K</span> | |
| <span id="b">B</span> | |
| <span id="t">T</span> | |
| <span id="g">G</span> | |
| </h1> | |
| <script> | |
| // Add interactive sound effects (optional) | |
| document.querySelectorAll('h1 span').forEach(span => { | |
| span.addEventListener('mouseenter', () => { | |
| span.style.animation = 'none'; | |
| span.offsetHeight; // Trigger reflow | |
| span.style.animation = 'gradientShift 0.5s ease-in-out, bounce 0.5s ease-in-out'; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment