# Website Template Guide

## Using base.html Template

The `base.html` file serves as a template for creating new pages. It includes the common navigation bar and footer that should be consistent across all pages.

### How to Create a New Page

1. Copy the contents of `base.html`
2. Replace the placeholder comments with your content:
   - Replace `<!-- PAGE_TITLE -->` with your page title
   - Replace `<!-- PAGE_CONTENT -->` with your main content

### Example

```html
<!-- Copy from base.html and modify like this: -->
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My New Page</title> <!-- Changed from PAGE_TITLE -->
    <link href="../dist/output.css" rel="stylesheet">
</head>
<body class="min-h-screen bg-black">
    <!-- Navigation and other elements from base.html stay the same -->
    
    <main>
        <!-- Your page-specific content goes here -->
        <header class="text-center mb-12">
            <h1 class="text-4xl font-bold text-white mb-4">My New Page</h1>
        </header>
        
        <section>
            <!-- Add your sections here -->
        </section>
    </main>
    
    <!-- Footer from base.html stays the same -->
</body>
</html>
```

### Template Elements

1. **Navigation Bar**: Includes logo and menu links
2. **Main Content Area**: Marked with `<!-- PAGE_CONTENT -->`
3. **Footer**: Copyright information

### Styling

- The template includes dark mode by default
- Uses Tailwind CSS classes for styling
- Maintains consistent spacing and layout across pages
