Nature Inspired Fieldset - MeggiTools
Run
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>Nature Inspired Fieldset</title> <style> body { font-family: 'Arial', sans-serif; background-color: #e0f7fa; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .fieldset-container { width: 60%; max-width: 800px; } fieldset { border: 2px solid #4caf50; border-radius: 15px; padding: 20px; position: relative; background-color: #ffffff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); color: #388e3c; } legend { font-size: 1.5rem; font-weight: bold; color: #388e3c; position: relative; padding: 0 10px; background: #e0f7fa; border-radius: 5px; display: inline-block; display: flex; align-items: center; } legend::before { content: "🌿"; margin-right: 10px; font-size: 1.2rem; } .fieldset-content { margin-top: 20px; } .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>Nature Inspired</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>