Loading... 0%

Live Demo

CYBER
PUNK
2024
Welcome to the future

Code

<!DOCTYPE html>
<html>
<head>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
    
    body {
      margin: 0;
      padding: 0;
      background: #0a0a0a;
      font-family: 'Orbitron', monospace;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      overflow: hidden;
    }
    
    .neon-container {
      text-align: center;
    }
    
    .neon-text {
      font-size: 4rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin: 20px 0;
      position: relative;
    }
    
    .neon-blue {
      color: #00ffff;
      text-shadow: 
        0 0 5px #00ffff,
        0 0 10px #00ffff,
        0 0 15px #00ffff,
        0 0 20px #00ffff,
        0 0 35px #00ffff,
        0 0 40px #00ffff;
      animation: neon-flicker 2s infinite alternate;
    }
    
    .neon-pink {
      color: #ff00ff;
      text-shadow: 
        0 0 5px #ff00ff,
        0 0 10px #ff00ff,
        0 0 15px #ff00ff,
        0 0 20px #ff00ff,
        0 0 35px #ff00ff,
        0 0 40px #ff00ff;
      animation: neon-flicker 1.5s infinite alternate;
    }
    
    .neon-green {
      color: #00ff00;
      text-shadow: 
        0 0 5px #00ff00,
        0 0 10px #00ff00,
        0 0 15px #00ff00,
        0 0 20px #00ff00,
        0 0 35px #00ff00,
        0 0 40px #00ff00;
      animation: neon-flicker 2.5s infinite alternate;
    }
    
    @keyframes neon-flicker {
      0%, 18%, 22%, 25%, 53%, 57%, 100% {
        text-shadow: 
          0 0 5px currentColor,
          0 0 10px currentColor,
          0 0 15px currentColor,
          0 0 20px currentColor,
          0 0 35px currentColor,
          0 0 40px currentColor;
      }
      
      20%, 24%, 55% {
        text-shadow: none;
      }
    }
    
    .subtitle {
      color: #666;
      font-size: 1.2rem;
      font-weight: 400;
      margin-top: 30px;
      animation: pulse 3s infinite;
    }
    
    @keyframes pulse {
      0%, 100% {
        opacity: 0.7;
      }
      50% {
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <div class="neon-container">
    <div class="neon-text neon-blue">CYBER</div>
    <div class="neon-text neon-pink">PUNK</div>
    <div class="neon-text neon-green">2024</div>
    <div class="subtitle">Welcome to the future</div>
  </div>
</body>
</html>