The Sandbox | DEVELOP CREATE PRODUCE

HTML

<h1>Hello World</h1>
<p>Welcome to the Grace Jordan Sandbox.</p>
<button class="btn">Click Me</button>

CSS

body {
  font-family: sans-serif;
  padding: 20px;
  background: #f4f4f4;
}
h1 { color: #333; }
.btn {
  background: #0d47a1;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
.btn:hover { background: #512da8; }

document.querySelector('.btn').addEventListener('click', function() {
  alert('System Fully Operational!');
});

BROWSER PREVIEW

/tools/directory

HOW TO USE

Type HTML, CSS, and JS in the top panels.
The preview updates automatically.
Use this to test buttons, layout ideas, or scripts before deploying to the main site.
Note: Content is not saved if you refresh.