Project Overviewlink

Zaira is a static HTML template designed for news/magazine-style websites, built on Bootstrap 5. It offers multiple homepage layout variations, blog pages, author profiles, contact pages, and more. Features include dark mode toggle, responsive navigation, and scroll-to-top functionality, making it ideal for quickly building news or personal blog sites.

Tech Stacklink

• Bootstrap 5.1.3 (responsive framework)
• jQuery 3.x (DOM manipulation and interactions)
• Slick Carousel (carousel component)
• Google Fonts (Inter + Manrope fonts)
• Font Awesome 6 (icon library)
• PHP (only for contact.html form backend, mail.php)

Project Structurelink

zairahtml-10/
├── Documentation/         # Official documentation (HTML format)
│   └── index.html
└── zaira/                 # Main template (LTR version)
    ├── index.html         # Homepage (6 layout variations: index ~ index-6)
    ├── blog.html
    ├── blog-details.html
    ├── contact.html
    ├── about.html
    ├── author.html
    └── assets/
        ├── css/           # Stylesheets (style.css, responsive.css, etc.)
        ├── fonts/         # Font Awesome font files
        └── js/
            └── main.js    # Core interaction logic

Key Fileslink

• zaira/index.html — Main homepage entry point, default layout
• zaira/assets/css/style.css — Global styles and CSS variable definitions
• zaira/assets/js/main.js — Preloader, navigation, theme toggle, carousel, and other interactions
• zaira/assets/mail.php — Contact form backend processing script
• zaira/contact.html — Contact page with form
• Documentation/index.html — Official template usage documentation

Quick Startlink

1. Open zaira/index.html directly in a browser to preview;
2. For a local server, use VS Code's Live Server extension or run npx serve;
3. To enable the contact form, deploy mail.php to a PHP-supported server.

Usage Tipslink

• The template includes 6 homepage layout variations that can be selected or combined based on content needs;
• Dark mode remembers user preferences via localStorage, with the toggle button located in the tg_theme_toggler function in main.js.