Project Overview
Lotech is a static HTML template designed for technology and IT solution companies, built on Bootstrap 5. It includes multiple page variants such as homepage, blog, case studies, and shopping cart, along with documentation and custom icon fonts. Ideal for quickly building corporate websites or portfolio sites.
Tech Stack
- HTML5 + CSS3
- Bootstrap 5.x (responsive framework)
- jQuery
- Custom Flaticon icon font
- Google Fonts (DM Sans, Yantramanav)
- Animation libraries: AOS, jarallax, animate.css
- Carousel components: Owl Carousel, tiny-slider, slick
- Others: magnific-popup, nouislider, jarallax
Project Structure
lotechhtml-10/lotech-html-package/
├── lotech-html-main/ # Main template directory
│ ├── index.html # Homepage entry
│ └── assets/
│ ├── css/lotech.css # Main stylesheet
│ └── vendors/ # Third-party libraries
│ ├── bootstrap/
│ ├── lotech-icons/ # Custom icon font
│ ├── owl-carousel/
│ └── ...
├── lotech-html-documentations/
│ ├── index.html # Template documentation page
│ └── css/style.css # Documentation styles
└── lotech-icons/ # Standalone icon font package
├── style.css
└── demo.html
Core File Descriptions
lotech-html-main/index.html— Homepage template, aggregating all sections like navigation, carousel, footer, etc.lotech-html-main/assets/css/lotech.css— Main stylesheet, integrating all custom styleslotech-html-main/assets/vendors/lotech-icons/style.css— Glyph definitions for the Flaticon custom icon fontlotech-html-documentations/index.html— Official documentation page, including HTML structure, CSS explanations, and third-party configuration guideslotech-html-documentations/css/style.css— Documentation page sidebar and content area styles
Quick Start
Simply open lotech-html-main/index.html in your browser to preview. Alternatively, start a local server from the project root:
cd lotechhtml-10/lotech-html-package/lotech-html-main
python -m http.server 8080
# Visit http://localhost:8080
Usage Suggestions
The template includes dozens of page variants such as blog, case studies, and shopping cart. Simply copy the lotech-html-main/ directory to start customizing. To replace icons, we recommend using the IcoMoon tool to re-import lotech-icons/selection.json for adding or removing icons.
