HTML + CSS + JS

No Build Tools Required

This is a pure HTML/CSS/JS project. Just open the HTML files in your browser!

Project Structure

All files are organized in a simple structure: HTML files in the root, CSS in css/, and JavaScript in js/.

Color Variables

All colors are defined in css/style.css:

:root {
  --primary: /* Your primary color */;
  --secondary: /* Your secondary color */;
  --accent: /* Your accent color */;
  --text-on-primary: /* Text color for primary bg */;
  --text-on-secondary: /* Text color for secondary bg */;
  --text-on-accent: /* Text color for accent bg */;
}

Using Colors in HTML

Apply colors using CSS classes or inline styles:

<div class="primary-section">
  <h1>Primary Background</h1>
</div>

<button class="btn-accent">
  Click Me
</button>

CSS Classes

Pre-defined classes in style.css:

.primary-section {
  background-color: var(--primary);
  color: var(--text-on-primary);
}

.btn-accent {
  background-color: var(--accent);
  color: var(--text-on-accent);
}

JavaScript Integration

Access colors in JavaScript:

const primary = getComputedStyle(document.documentElement)
  .getPropertyValue('--primary');

// Use the color value
element.style.backgroundColor = primary;