Project Overviewlink

Harry is a multi-page HTML template designed for creative agencies and personal portfolio scenarios. Built on the Bootstrap framework, it offers over a dozen homepage variations along with complete blog, portfolio, and e-commerce page templates, accompanied by a visual theme settings panel (color switching, RTL/LTR toggle), suitable for quickly building professional-grade showcase sites.

Tech Stacklink

• HTML5 / CSS3 (native styles + SCSS source reference)
• Bootstrap 5 (grid, components, utility classes)
• jQuery (interaction logic)
• meanmenu (mobile navigation)
• Google Fonts (Inter, Oswald, Poppins, etc.)

Project Structurelink

harryhtml-10/
├── documentation/          # Online documentation entry
│   ├── index.html
│   └── assets/
│       ├── css/            # Documentation styles
│       ├── fonts/
│       └── images/
└── harry/                  # Template main body
    ├── 404.html
    ├── about.html
    ├── blog-*.html          # Blog-related pages
    ├── cart.html / checkout.html
    ├── contact-*.html
    ├── elements-*.html     # UI component demo pages (30+)
    ├── home-*.html          # Homepage variations
    ├── coming-soon.html
    └── assets/
        ├── css/main.css
        ├── js/main.js
        └── sass.txt        # SCSS compilation reference commands

Core File Descriptionslink

• harry/index.html — Default homepage entry of the template
• harry/home-*.html — Various homepage variations (agency, creative, freelancer, etc.)
• harry/elements-*.html — 30+ UI component pages, ready for reuse
• harry/assets/js/main.js — Theme settings, mobile menu, preloader, and other interaction logic
• harry/assets/css/main.css — Complete stylesheet (including dark mode variables)
• documentation/index.html — Official documentation page

Quick Startlink

1. Open harry/index.html in a local web server (e.g., Live Server, Nginx)
2. Choose a suitable homepage variation (e.g., home-agency.html) for modification
3. Component pages are located in elements-*.html; copy blocks to target pages

Usage Suggestionslink

The template's built-in theme settings panel allows real-time color and layout direction switching in the browser. During development, it is recommended to refer to the commands in sass.txt to integrate SCSS source into the build pipeline for easier maintenance of customized styles.