| .. | ||
| about/img | ||
| assets | ||
| contact/img | ||
| features/img | ||
| fonts | ||
| home | ||
| about.html | ||
| base.html | ||
| contact.html | ||
| features.html | ||
| index.html | ||
| input.css | ||
| README.md | ||
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
- Copy the contents of
base.html - Replace the placeholder comments with your content:
- Replace
<!-- PAGE_TITLE -->with your page title - Replace
<!-- PAGE_CONTENT -->with your main content
- Replace
Example
<!-- 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
- Navigation Bar: Includes logo and menu links
- Main Content Area: Marked with
<!-- PAGE_CONTENT --> - Footer: Copyright information
Styling
- The template includes dark mode by default
- Uses Tailwind CSS classes for styling
- Maintains consistent spacing and layout across pages