Aspendos - Your All-in-One AI Platform

Code Sandbox

Create, edit, and preview your code in real-time

Code Editor

<!DOCTYPE html>
<html>
<head>
  <title>HTML Sandbox</title>
  <style>
    body { 
      font-family: Arial, sans-serif; 
      margin: 20px; 
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .demo-box { 
      background: #f8f9fa; 
      padding: 20px; 
      border-radius: 8px; 
      margin: 20px 0;
      border-left: 4px solid #667eea;
    }
    .button {
      background: #667eea;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
      transition: background 0.2s;
    }
    .button:hover {
      background: #5a6fd8;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🎨 HTML Sandbox</h1>
    <p>Welcome to the HTML playground! Start building your ideas here.</p>
    
    <div class="demo-box">
      <h2>✨ Interactive Demo</h2>
      <p>This is a styled demo box. Try editing the HTML and CSS!</p>
      <button class="button" onclick="alert('Hello from HTML Sandbox!')">
        Click Me!
      </button>
    </div>
    
    <div class="demo-box">
      <h3>📝 Getting Started</h3>
      <ul>
        <li>Edit the HTML in the left panel</li>
        <li>See live changes in the right panel</li>
        <li>Try adding more CSS styles</li>
        <li>Create interactive elements with JavaScript</li>
      </ul>
    </div>
  </div>
</body>
</html>

Live Preview