Basex - One Page Portfolio Template preview 1

Basex - One Page Portfolio Template

bookmark

Basex is a single-page portfolio HTML template with dark/light theme switching support. It offers multiple homepage variants including Hero carousel, image wall, video background, etc., making it suitable for personal portfolios or small...

HTML

Project Overview

Basex is a single-page portfolio HTML template with dark/light theme switching support. It offers multiple homepage variants including Hero carousel, image wall, video background, etc., making it suitable for personal portfolios or small business websites to go live quickly. Built-in jQuery effects, counters, lightbox, and other interactive components require no additional dependencies.

Tech Stack

  • HTML5 + CSS3 (CSS variables for theme switching)
  • jQuery (non-modular CDN import)
  • PHP (only used for contact.php form processing)

Project Structure

text
basexhtml-10/
├── Template/
│   ├── index-*.html    # 8 homepage variants
│   ├── contact.php     # Form backend
│   └── MIT-License/
├── css/
│   ├── style.css       # Main stylesheet (includes all component styles)
│   └── plugins.css     # Third-party plugin styles
├── fonts/ionicons/     # Icon font
└── img/                # Sample image resources

Core File Description

  • Template/index-*.html — Homepage entry point, select the corresponding file based on functionality
  • css/style.css — Main stylesheet, includes dark mode and all UI component styles
  • css/plugins.css — Plugin styles for Magnific Popup, Lity, Owl Carousel, etc.
  • contact.php — Form submission handler, sends data to a specified email address
  • img/ — Sample resources such as carousel backgrounds, team photos, portfolio thumbnails
  • Documentation/index.html — Official usage documentation with modification instructions for each module

Quick Start

  1. Open Template/index-SINGLE-IMAGE-LIGHT.html directly in a browser to preview
  2. Modify image paths in CSS to point to your resources, or replace files in the img/ directory
  3. When deploying, upload the entire Template folder to your server; contact.php requires a PHP environment

Usage Suggestions

After replacing all sample images in img/, it is recommended to add the body-dark class to the <body> tag to switch to dark theme. If you need form functionality, change $myemail in contact.php to your actual recipient email address.

help_outline

FAQ