| .. | ||
| about/img | ||
| assets | ||
| contact/img | ||
| features/img | ||
| fonts | ||
| home | ||
| about.html | ||
| base.html | ||
| circle.png | ||
| contact.html | ||
| features.html | ||
| index.html | ||
| input.css | ||
| Open Sauce One OFL.txt | ||
| Open Sauce Sans OFL.txt | ||
| Open Sauce Two OFL.txt | ||
| open-sauce.zip | ||
| OpenSauceOne-Black.ttf | ||
| OpenSauceOne-BlackItalic.ttf | ||
| OpenSauceOne-Bold.ttf | ||
| OpenSauceOne-BoldItalic.ttf | ||
| OpenSauceOne-ExtraBold.ttf | ||
| OpenSauceOne-ExtraBoldItalic.ttf | ||
| OpenSauceOne-Italic.ttf | ||
| OpenSauceOne-Light.ttf | ||
| OpenSauceOne-LightItalic.ttf | ||
| OpenSauceOne-Medium.ttf | ||
| OpenSauceOne-MediumItalic.ttf | ||
| OpenSauceOne-Regular.ttf | ||
| OpenSauceOne-SemiBold.ttf | ||
| OpenSauceOne-SemiBoldItalic.ttf | ||
| OpenSauceSans-Black.ttf | ||
| OpenSauceSans-BlackItalic.ttf | ||
| OpenSauceSans-Bold.ttf | ||
| OpenSauceSans-BoldItalic.ttf | ||
| OpenSauceSans-ExtraBold.ttf | ||
| OpenSauceSans-ExtraBoldItalic.ttf | ||
| OpenSauceSans-Italic.ttf | ||
| OpenSauceSans-Light.ttf | ||
| OpenSauceSans-LightItalic.ttf | ||
| OpenSauceSans-Medium.ttf | ||
| OpenSauceSans-MediumItalic.ttf | ||
| OpenSauceSans-Regular.ttf | ||
| OpenSauceSans-SemiBold.ttf | ||
| OpenSauceSans-SemiBoldItalic.ttf | ||
| OpenSauceTwo-Black.ttf | ||
| OpenSauceTwo-BlackItalic.ttf | ||
| OpenSauceTwo-Bold.ttf | ||
| OpenSauceTwo-BoldItalic.ttf | ||
| OpenSauceTwo-ExtraBold.ttf | ||
| OpenSauceTwo-ExtraBoldItalic.ttf | ||
| OpenSauceTwo-Italic.ttf | ||
| OpenSauceTwo-Light.ttf | ||
| OpenSauceTwo-LightItalic.ttf | ||
| OpenSauceTwo-Medium.ttf | ||
| OpenSauceTwo-MediumItalic.ttf | ||
| OpenSauceTwo-Regular.ttf | ||
| OpenSauceTwo-SemiBold.ttf | ||
| OpenSauceTwo-SemiBoldItalic.ttf | ||
| output.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