Welcome to Shahzeb's Magic Web - Posts

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Shahzeb Animation Page</title> <style> body { margin: 0; padding: 0; background: linear-gradient(120deg, #2c3e50, #3498db); font-family: Arial, sans-serif; color: white; text-align: center; }

h1 {
  font-size: 50px;
  animation: glowText 2s infinite alternate;
  margin-top: 40px;
}

@keyframes glowText {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #00f, 0 0 30px #0ff;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #0ff, 0 0 40px #00f;
  }
}

.box {
  width: 150px;
  height: 150px;
  background: #f1c40f;
  margin: 40px auto;
  border-radius: 20px;
  animation: bounce 2s infinite, rotate 4s linear infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-40px);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.btn {
  padding: 15px 30px;
  font-size: 18px;
  background: #2ecc71;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px #2ecc71;
}

.btn:hover {
  background: #27ae60;
  box-shadow: 0 0 20px #00ffcc, 0 0 40px #00ffcc;
}

footer {
  margin-top: 60px;
  padding: 20px;
  background: #111;
}

</style> </head> <body> <h1>Shahzeb's Animated World</h1> <div class="box"></div>

<button class="btn" onclick="alert('Shahzeb is on fire!')">Click for Magic</button>

<footer> Created with love by Shahzeb - 2025 </footer> </body> </html>