Project Overviewlink

Hubfolio is a versatile HTML template designed for creative agencies, digital marketing studios, and business startups. It includes 7 homepage variations (such as Creative Studio, Startup Agency, Digital Marketing, etc.). Built on Bootstrap 5, it supports responsive layouts and modular CSS/SCSS structure, making it ideal for quickly building portfolio or corporate showcase websites.

Tech Stacklink

• HTML5 / CSS3
• Bootstrap 5
• jQuery
• SCSS (located at hubfolio_HTML/common/scss)
• Google Fonts (Poppins, Sora, Inter, Six Caps, etc.)

Project Structurelink

hubfolio_HTML/
  common/
    css/
      _extra.css, _global.css, _helper.css
      _preloader.css, _typography.css
      common_style.css, plugins.css
      plugins/ (YouTubePopUp, magnific-popup, swiper, etc.)
    fonts/
    imgs/
    scss/
      _variables.scss, _typography.scss, ...
  creative-studio/
    index.html
    assets/
      css/home8-style.css
      imgs/
  startup_agency/
  creative_agency/
  digital-marketing/
  modern_portfolio/
  digital_studio/
  modern_agency/
  inner_pages/
Documentation/
  index.html
  css/style.css, helper.css
  images/

Core File Descriptionlink

• hubfolio_HTML/common/css/common_style.css — Global base styles (reset, typography, layout)
• hubfolio_HTML/common/css/plugins.css — Collection of third-party plugin styles
• hubfolio_HTML/common/scss/_variables.scss — SCSS breakpoint variables (480px / 768px / 992px / 1300px)
• hubfolio_HTML/creative-studio/index.html — Creative Studio variant homepage entry
• Documentation/index.html — Official template usage documentation

Quick Startlink

1. Open hubfolio_HTML/creative-studio/index.html directly in a browser to preview
2. For local development server, use any static server tool (e.g., VS Code Live Server extension)
3. When modifying styles, edit SCSS files first, then compile to overwrite the corresponding CSS

Usage Suggestionslink

The template offers multiple homepage variations. Simply replace the /creative-studio/ folder to switch between different styles. Internal pages (about, portfolio, blog, etc.) are uniformly stored under inner_pages/, making it easy to maintain global styles and scripts consistently.