Project Overviewlink

Liko is a versatile HTML template designed for creative agencies and personal portfolios, featuring over 30 pre-built pages including homepage variations, portfolio, blog, e-commerce (cart/checkout), contact forms, and more. It supports both light and dark mode switching.

Tech Stacklink

• HTML5 / CSS3 (Native + Bootstrap 4 Grid)
• jQuery (Core interaction library)
• Slick Slider (Carousel component)
• Nice Select (Custom dropdown)
• Google Fonts (Syne, Big Shoulders Display, etc.)

Project Structurelink

likohtml-10/
├── documentation/          # Official documentation
│   ├── index.html
│   └── assets/
│       ├── css/            # Documentation styles (elegantFont, responsive, style)
│       ├── fonts/
│       ├── images/
│       └── js/             # Documentation navigation and search logic
└── liko/                   # Template main body
    ├── index-*.html        # 12 homepage variations
    ├── index-dark-*.html   # Dark homepage variations
    ├── about-*.html        # About pages
    ├── blog-*.html         # Blog pages
    ├── cart.html / checkout.html  # E-commerce pages
    ├── contact*.html       # Contact pages
    └── assets/
        ├── css/main.css    # All styles
        ├── js/
        │   ├── main.js     # Core interactions (Slick, slider, navigation)
        │   └── app.js      # Parallax slider logic
        └── img/            # Sample image assets

Core File Descriptionslink

• liko/index-*.html — Entry files for each homepage variation, can be directly copied and modified
• liko/assets/css/main.css — All style definitions including theme variables, components, and page-specific styles
• liko/assets/js/main.js — Core interactions: preloader, sticky navigation, search popup, carousel initialization
• liko/assets/js/app.js — Scroll-driven logic for the parallax slider
• documentation/index.html — Official documentation covering template structure, customization guide, and third-party resource details

Quick Startlink

1. Open liko/index-10.html (or any index page) on a local web server
2. To modify colors or fonts, edit the CSS variables at the top of liko/assets/css/main.css (--tp-common-*, --tp-ff-*)
3. Replace placeholder images in assets/img/ with your actual content

Usage Recommendationslink

The template includes multiple homepage and dark variations. It's recommended to start with index-10.html (the full-featured demo page), identify the components you need, and then copy them to your target page. Dark mode pages are toggled via CSS class names only. For a unified theme color overhaul, focus on modifying the CSS variables in main.css for global changes.