Playground
Download
AI
Code
HTML
CSS
JS
Live
<section class="hero"> <h1>Welcome</h1> <h2>Build something beautiful. What are you planning to do today?</h2> <p>Edit the code and see the result instantly.</p> <button class="btn" onclick="sayHello()">Click Me</button> </section>
body { margin: 0; min-height: 100vh; display: grid; place-items: center; font-family: Arial, sans-serif; background: #FAF7F0; } .hero { text-align: center; padding: 40px; } h1 { font-size: 2.2rem; color: #6D4AAE; } h2 { font-size: 1.15rem; font-weight: 400; color: #5b6250; } .btn { padding: 12px 24px; border: none; color: #fff; background: linear-gradient(120deg,#6D4AAE,#C1499B,#4A87C7); border-radius: 12px; cursor: pointer; }
function sayHello() { window.open('https://ayb7.com', '_blank'); }
Fix with AI
Close
Preview
Refresh
AI Assistant
Clear
AI
Hey! I can help with HTML, CSS and JS. If your code has an error, I will catch it and you can fix it with one click.
Review
Animation
Fix errors
Send
Playground
Playground