Neon Theme Cards - VexaX
Run Code
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Neon Theme Cards</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <style> body { font-family: 'Arial', sans-serif; background: #000; display: flex; flex-wrap: wrap; justify-content: center; padding: 20px; } .card-container { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } .neon-card { width: 300px; background: #1e1e1e; border-radius: 15px; padding: 20px; text-align: center; box-shadow: 0 0 20px #00ff00, 0 0 20px #00ff00 inset; transition: transform 0.3s, box-shadow 0.3s; } .neon-card:hover { transform: translateY(-10px); box-shadow: 0 0 30px #00ff00, 0 0 30px #00ff00 inset; } .neon-card .icon { font-size: 3em; color: #00ff00; margin-bottom: 10px; } .neon-card h3 { margin: 10px 0; font-size: 1.5em; color: #00ff00; } .neon-card p { color: #ccc; } .neon-card button { margin-top: 10px; padding: 10px 20px; border: none; border-radius: 5px; background: #00ff00; color: #000; cursor: pointer; transition: background 0.3s, color 0.3s; } .neon-card button:hover { background: #000; color: #00ff00; } </style> </head> <body> <div class="card-container"> <div class="neon-card"> <i class="fas fa-drum icon"></i> <h3>Drumming Workshop</h3> <p>Learn to drum like a pro in our workshop.</p> <button>Join Now</button> </div> <div class="neon-card"> <i class="fas fa-dumbbell icon"></i> <h3>Fitness Bootcamp</h3> <p>Get fit with our intense fitness bootcamp.</p> <button>Join Now</button> </div> <div class="neon-card"> <i class="fas fa-globe icon"></i> <h3>Travel Meetup</h3> <p>Share your travel stories and tips with others.</p> <button>Join Now</button> </div> </div> </body> </html>