Elegant Gold File Upload - 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>Elegant Gold File Upload</title> <style> body, html { margin: 0; padding: 0; font-family: 'Georgia', serif; background: #f5f5f5; display: flex; justify-content: center; align-items: center; height: 100vh; } .upload-container { background: #fff; border-radius: 15px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); padding: 35px; max-width: 450px; width: 100%; text-align: center; border: 3px solid #d4af37; } .upload-title { font-size: 24px; color: #333; margin-bottom: 20px; font-weight: 700; text-transform: uppercase; } .upload-box { background: #fafafa; border: 2px solid #d4af37; border-radius: 10px; padding: 20px; cursor: pointer; transition: background 0.3s, border-color 0.3s; } .upload-box:hover { background: #fff; border-color: #b8860b; } .upload-box input[type="file"] { display: none; } .upload-box .icon { font-size: 45px; color: #d4af37; margin-bottom: 10px; } .upload-box .text { font-size: 18px; color: #666; } </style> </head> <body> <div class="upload-container"> <div class="upload-title">Elegant Gold</div> <div class="upload-box" onclick="document.getElementById('file-upload').click()"> <input type="file" id="file-upload" /> <div class="icon">🖼️</div> <div class="text">Click or Drag to Upload</div> </div> </div> <script> document.getElementById('file-upload').addEventListener('change', function() { alert('File selected!'); }); </script> </body> </html>