PAPER
XIFY
AI
Home
AI Study Suite
Backpack
Pricing
Try Free
Home
Tools
Pricing
Profile
HTML · CSS · JS — Live Editor
HTML Editor
Templates
index.html
style.css
script.js
HTML
17 lines · 468 chars
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>My Page</title> </head> <body> <div class="hero"> <div class="glow"></div> <h1>Hello, World! <span>✨</span></h1> <p>Edit the HTML, CSS, and JS panels to see live changes.</p> <button onclick="handleClick()">Click Me</button> <p class="counter" id="counter">Clicks: 0</p> </div> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', system-ui, sans-serif; background: #0a0a0a; color: #fff; min-height: 100vh; display: flex; align-items: center; justify-content: center; } .hero { text-align: center; padding: 40px 24px; position: relative; } .glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 400px; background: radial-gradient(circle, rgba(220,38,38,0.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } h1 { font-size: clamp(2rem, 6vw, 4rem); font-weight: 800; letter-spacing: -0.03em; background: linear-gradient(135deg, #fff 0%, #a3a3a3 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 16px; } h1 span { -webkit-text-fill-color: initial; } p { color: #737373; font-size: 1rem; max-width: 400px; margin: 0 auto 28px; line-height: 1.6; } button { background: #dc2626; color: white; border: none; padding: 12px 28px; border-radius: 12px; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: all 0.2s; margin-bottom: 14px; } button:hover { background: #b91c1c; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(220,38,38,0.35); } button:active { transform: translateY(0); } .counter { color: #525252; font-size: 0.8rem; font-family: monospace; }
1
2
3
4
5
6
7
8
9
10
11
let count = 0; function handleClick() { count++; document.getElementById('counter').textContent = `Clicks: ${count}`; const btn = document.querySelector('button'); btn.style.transform = 'scale(0.95)'; setTimeout(() => btn.style.transform = '', 150); } console.log('✅ JavaScript engine ready!');
Live Preview
Console