Comic Style 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>Comic Style Fieldset</title> <style> body { font-family: 'Comic Sans MS', cursive, sans-serif; background-color: #ffeb3b; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .fieldset-container { width: 60%; max-width: 800px; } fieldset { border: 3px solid #000; border-radius: 10px; padding: 20px; position: relative; background-color: #fff; box-shadow: 5px 5px 0 #000, 10px 10px 0 #ff5722; } legend { font-size: 1.5rem; font-weight: bold; color: #000; position: relative; padding: 0 10px; background: #ffeb3b; border-radius: 5px; display: inline-block; } .fieldset-content { margin-top: 20px; color: #000; } .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>Comic Style</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>