FreeTools
ForMe
Home
AI Studio
Image Tools
PDF Tools
Dev Tools
Blog
Pricing
Sign In
Sign Up
ع
ع
HTML/CSS/JS
Live Preview
Explain
Run
index.html
<!DOCTYPE html> <html> <head> <style> body { font-family: 'Segoe UI', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .card { background: white; padding: 40px; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); text-align: center; } h1 { color: #333; margin: 0 0 10px; } p { color: #666; margin: 0; } button { margin-top: 20px; padding: 12px 24px; background: #667eea; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; } button:hover { background: #5a67d8; } </style> </head> <body> <div class="card"> <h1>Hello World! 🚀</h1> <p>Edit the code and see changes live</p> <button onclick="alert('It works!')">Click Me</button> </div> </body> </html>
Live Preview