ApexTemplate Documentation

Welcome to the ApexTemplate documentation. This template is designed to be a perfect solution for developers and designers, combining modern design with high flexibility. This guide will provide a comprehensive overview of the template's structure, features, and how to use it effectively.

1. File Structure Overview

The ApexTemplate is built with a highly organized and flexible structure to ensure ease of use and customization. The main goal of this structure is to enable each Demo to function as a completely standalone website, giving you the freedom to use and modify a single demo without worrying about files from other demos.

Folder Structure:

ApexTemplate/
├── documentation/
│   └── index.html
├── assets/
│   ├── css/
│   │   ├── style.css
│   ├── js/
│   │   ├── main.js
│   ├── images/
│   │   └── pages/
│   ├── vendors/
├── demos/
│   ├── demo-1-agency/
│   │   ├── assets/
│   │   │   ├── css/
│   │   │   │   └── style.css
│   │   │   ├── js/
│   │   │   │   └── main.js
│   │   │   └── images/
│   │   │   └── vendors/
│   │   ├── index.html
│   │   ├── about.html
│   │   ├── services.html
│   │   ├── pricing.html
│   │   ├── contact.html
│   │   ├── 404.html
│   │   └── coming-soon.html
│   │   └── .htaccess
│   │   └── favicon.png
│   ├── demo-2-portfolio/
│   │   ├── assets/
│   │   │   ├── css/
│   │   │   └── js/
│   │   │   └── images/
│   │   │   └── vendors/
│   │   ├── index.html
│   │   ├── about.html
│   │   ├── pricing.html
│   │   ├── contact.html
│   │   ├── 404.html
│   │   └── coming-soon.html
│   │   └── .htaccess
│   │   └── favicon.png
│   ├── demo-3-business/
│   │   ├── assets/
│   │   │   ├── css/
│   │   │   └── js/
│   │   │   └── images/
│   │   │   └── vendors/
│   │   ├── index.html
│   │   ├── about.html
│   │   ├── services.html
│   │   ├── pricing.html
│   │   ├── contact.html
│   │   ├── 404.html
│   │   └── coming-soon.html
│   │   └── .htaccess
│   │   └── favicon.png
│   ├── demo-4-landing-page/
│   │   ├── assets/
│   │   │   ├── css/
│   │   │   └── js/
│   │   │   └── images/
│   │   │   └── vendors/
│   │   ├── index.html
│   │   ├── about.html
│   │   ├── pricing.html
│   │   ├── contact.html
│   │   ├── 404.html
│   │   └── coming-soon.html
│   │   └── .htaccess
│   │   └── favicon.png
│   └── demo-5-minimal/
│       ├── assets/
│       │   ├── css/
│       │   └── js/
│   │   │   └── images/
│   │   │   └── vendors/
│       ├── index.html
│       ├── about.html
│       ├── pricing.html
│       ├── contact.html
│       ├── 404.html
│       └── coming-soon.html
│       └── .htaccess
│       └── favicon.png
├── index.html
├── readme.txt
├── license.txt
├── favicon.png

2. Key Features of the Main Template Page (`index.html`)

The main page is designed to act as a living guide to the template, showcasing all available demos and page types in one place.

Features:

3. Customization & Editing Guide

The ApexTemplate is built for maximum independence and ease of use. The code is well-commented and organized to make modifications as simple as possible. Each of the five demos has a completely **self-contained asset structure**, allowing you to treat and modify any single demo as a fully **independent website**.

3.1. Main Customization Files (Per Demo)

To customize the look, feel, and functionality of any specific demo, you only need to focus on these two files located within the dedicated assets folder of that demo:

.../demo-Name/
└── assets/
    ├── css/
    │   └── style.css  // Main customization file (colors, layout)
    └── js/
        └── main.js    // Main functional customization file (JS Code)

3.2. Local Libraries Overview

All third-party libraries have been self-hosted (local) for superior performance and compliance. They are located in the assets/vendors/ folder of each demo. These libraries are:

3.3. Font Replacement

Since the Poppins font is self-hosted, you can easily replace it with any other custom font by:

  1. Replacing the .woff2 files in the assets/vendors/fonts/ directory.
  2. Updating the @font-face rules in the poppins.css file to reflect the new font name and file path.

4. Demo 1: Agency

The Agency demo is a full-fledged website designed for creative agencies, digital marketing companies, and professional service providers. It features a clean, modern design with smooth animations and a strong focus on showcasing your services and projects effectively.

Included Pages:

Key Features:

5. Demo 2: Portfolio

The Portfolio demo is a creative and personal website template designed to showcase your work, skills, and professional journey. It is ideal for freelancers, designers, developers, and artists looking to create a strong online presence.

Included Pages:

Key Features:

6. Demo 3: Business

The Business demo is a professional and robust template, ideal for corporate websites, business services, and product showcases. It features a clean and highly organized design, focusing on clear communication and a seamless user experience.

Included Pages:

Key Features:

7. Demo 4: Landing Page

The Landing Page demo is a sleek and modern template designed for a single product or a specific marketing campaign. It focuses on a clean layout, a clear call-to-action, and professional visual elements to drive conversions.

Included Pages:

Key Features:

8. Demo 5: Minimal

The Minimal demo is a clean and professional template designed for a creative agency, focusing on a minimalist aesthetic to highlight content and services without distraction.

Included Pages:

Key Features: