Neon Border Fieldset - 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 Border Fieldset</title> <style> body { font-family: 'Arial', sans-serif; background-color: #1a1a1a; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .fieldset-container { width: 60%; max-width: 800px; } fieldset { border: 2px solid #00ff00; border-radius: 10px; padding: 20px; position: relative; background-color: #2c2c2c; box-shadow: 0 0 15px #00ff00, 0 0 20px #00ff00; transition: box-shadow 0.3s ease; } fieldset:hover { box-shadow: 0 0 30px #00ff00, 0 0 40px #00ff00; } legend { font-size: 1.5rem; font-weight: bold; color: #00ff00; position: relative; padding: 0 10px; background: #2c2c2c; border-radius: 5px; display: inline-block; animation: neon 2s infinite alternate; } @keyframes neon { from { text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00, 0 0 40px #00ff00; } to { text-shadow: 0 0 20px #00ff00, 0 0 30px #00ff00, 0 0 40px #00ff00, 0 0 50px #00ff00; } } .fieldset-content { margin-top: 20px; color: #fff; } .icon { width: 30px; height: 30px; margin-right: 10px; } .info-item { display: flex; align-items: center; margin-bottom: 10px; } </style> </head> <body> <div class="fieldset-container"> <fieldset> <legend>Neon Border</legend> <div class="fieldset-content"> <div class="info-item"> <img src="https://img.icons8.com/color/48/000000/html-5--v1.png" class="icon" alt="HTML Icon"> <span>HTML5 Markup</span> </div> <div class="info-item"> <img src="https://img.icons8.com/color/48/000000/css3.png" class="icon" alt="CSS Icon"> <span>CSS3 Styling</span> </div> <div class="info-item"> <img src="https://img.icons8.com/color/48/000000/javascript.png" class="icon" alt="JavaScript Icon"> <span>JavaScript Functionality</span> </div> </div> </fieldset> </div> </body> </html>