1. Item Name : Aleric - Digital Agency & Creative Portfolio HTML Template
2. Created: 4 September 2025
3. Item Version : v 1.0.3
4. Author : Aqlova
5. Support Ticket: https://help.aqlova.com/login

## Introduction

#### Aleric - Digital Agency & Creative Portfolio HTML Template

For any support please don't hesitate to contact us at Support Center. We provide 13 hours real-time support for our customers.

We would like to thank you for choosing Aleric - Digital Agency & Creative Portfolio HTML Template.

### Getting started

The template is easy to customize, ensuring a unique and professional look for your business. Get ahead of the competition and stand out in the market with our HTML template for businesses.

#### Template Features

- HTML5 & CSS3
- Bootstrap v5.x
- Font-awesome
- jQuery
- Gsap Animation Included.
- Three.js Animation Included.
- Scroll Animation Included.
- Hover Animation Included.
- Distortion Animation Included.
- Split Text Animation Included.
- Scroll Magic Animation Included.
- Hover Effect Animation Included.
- 62+ Awesome Homepage
- Responsive Design
- Pixel Perfect Design
- Clean Code & Unique Design
- Easy to Customize
- Ajax Contact Form

### What's Included

After purchasing Aleric template on themeforest.net with your Envato account, go to your Download page. You can choose to download Aleric template package which contains the following files:

#### The contents of the template package downloaded from ThemeForest

- Aleric - An HTML Template file. this file you can edit and use for your business.
- Aleric-rtl - An HTML Template file. this file you can edit and use for your business.
- Documentation - This folder contains what you are reading now :)

## 🚀 Important Notice:
For Proper Functionality, Use a Local or Web Server

Thank you for choosing our template! To ensure all features — especially animations and JavaScript functionality — work correctly, please open the template through a local or web server environment.

### ❗ Why is this necessary?

Modern JavaScript libraries and animation frameworks often require a server environment to function properly. If you open the template directly from your file system (e.g., by double-clicking an .html file), certain scripts may fail to load due to browser security restrictions. This is a common behavior in frontend development, and not a bug or issue with the template.

### ✅ Recommended Solutions:

You can use any of the following methods to run the template in a server environment:

Live Server Extension (Recommended) For Visual Studio Code users, install the Live Server extension to quickly launch your project.
👉 See how to install Live Server
👉 Open your template properly

### Local Development Tools Use tools like:

- XAMPP
- MAMP
- Laragon

Web Hosting Upload the template to your hosting server and access it via your domain or hosting URL.

### 🙏 Still Seeing Issues?

If you're viewing the template without a server and notice missing animations or non-functional scripts, it’s likely due to this reason. Please try the steps above before reporting a problem.

We truly appreciate your feedback and support. If this resolves your issue, we kindly ask you to reconsider your rating, as it helps us continue improving and supporting great products.

"If you still don't understand after reading the documentation, click the support button below to contact us — we're here to help you."

Support Ticket

## Template Structures

### Articles

- HTML Structure
- CSS Files and Structure
- JavaScript Files

### HTML Structure

The main contents are inside the 'body' tag divided into differt section (i.e. header, banner, services,... footer etc.). The general template structure is the same throughout the template. Here is the general structure.

This template is a fixed layout with four columns.

HTML Markup Structure

### CSS Files and Structure

We are using one customed CSS files (style.css) and several vendor css files. CSS file structure is as follows:

CSS Files and Structure

### SCSS Files and Structure

Here our SCSS Structure:

SCSS Files and Structure

### Light Mode Style Structure

The Aleric-light class is being used to enable light mode effectively and beautifully.

Light Mode Structure

### Dark Mode Style Structure

The Aleric-dark class is being used to enable dark mode effectively and beautifully.

Dark Mode Structure

### Light & Dark Scss Structure

Here our Light & Dark Scss Structure:

Light & Dark Scss Structure

### JavaScript Files

There is a custom .js file named main.js and are several vendor js files as plugins. We are using jQuery(a javascript library) instead of vanilla javascript. Our file structure is a follows:

JavaScript Files

## Change Contents

- Changing Images
- Changing Brand Logo
- Changing Email Settings of the Contact Form

### Changing Images

To change any images of the website

1. Carefully collect the source name of the image (i.e. about-1.jpg)
2. Open the file called images.
3. Find the particular image file.
4. Replace the file with your image.
5. Make sure that the file name does not change.The file name should be the same.

Example: Suppose you want to change the following image file:

#### You have to do the following to change this image with your own image:

1. Open the file called images.
2. Find the particular image file called about-1.jpg
3. Replace the file with your image
4. Make sure that the file name does not change.

##### Note

Images seen in the live preview are only set for preview purposes. They are not included in the download files.

### Changing Brand Logo

To change any images of the website

1. Carefully collect the source name of the image (i.e. logo.png)
2. Open the file called images.
3. Find the particular image file.
4. Replace the file with your image.
5. Make sure that the file name does not change.The file name should be the same.

Example: Suppose you want to change the following image file for change your logo:

### Changing Colors

We have used scss for this project to write css. If you are familiar with scss you should customize only the .scss files. Please make sure you compile the main.scss file after you have made changes in any of the .scss files.

- Changing default template colors

### Changing default template colors

1. Open the colors.scss file from assets > scss > utils folder with a text-editor.
2. Change the right-side values of the variables to change any default colors of your site.
3. Save your file.

### Changing Email Settings of the Contact Form

1. Go to main folder
2. Open mail.php
3. Go to line number 76
4. Follow instructions in image below:

### Notes for Clients:

1. Host → Use the SMTP server from your hosting provider (e.g., smtp.hostinger.com, smtp.gmail.com, etc.).
2. Username → Must be your full email address (e.g., info@yourdomain.com).
3. Password → The password of your email account (or an App Password if required).
4. setFrom → Use the same email as Username. You can also change the name shown in the inbox.

### Sources and Credits

- Google Fonts
- Animate.css
- jQuery
- Waypoints Js

### Support

If you face any issue please contact us at Support Ticket. We provide 15 hours real-time support for our customers.

Thank you for purchasing our Template.